:root {
  --bg: #d3dbd5;
  --card-bg: #ffffff;
  --border: #c5d0c9;
  --text: #202b25;
  --muted: #55645c;
  --brand: #2fa872;
  --brand-dark: #1f8a5c;
  --brand-light: #eefaf3;
  --brand-contrast: #ffffff;
  --danger: #c0362c;
  --danger-bg: #fdf0ee;
  --ok-bg: #eafaf1;
  --ok-text: #1a8058;
  --nav-bg-1: #1c4632;
  --nav-bg-2: #266b48;
  /* the small "mystery" sparkle accent in the MysterBots logo mark — the
     one spot of warm color against the otherwise all-green palette */
  --brand-spark: #ffd166;
  /* the print/PDF accent color — quote/invoice header rule, heading text,
     total underline. Defaults to the ShinePro green but is overridden
     per-render by an inline <style> block using your Branding setting
     (brand_color) — see templates/quote_pdf.html, invoice_pdf.html,
     quote_public.html, invoice_public.html. */
  --print-accent: #1c4632;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 35, 25, 0.05);
  --shadow-md: 0 6px 18px rgba(15, 35, 25, 0.08);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
}

/* ---------- nav ---------- */

.nav-toggle-checkbox { display: none; }

.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
  color: white;
  padding: 14px 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.brand { font-weight: 700; font-size: 18px; color: white; text-decoration: none; }
.brand span { font-weight: 400; color: #8fd6b4; }

.nav-burger {
  display: none;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  color: white;
}

.navlinks { display: flex; align-items: center; }
.navlinks a {
  color: #d1d5db;
  text-decoration: none;
  margin-left: 20px;
  font-size: 14px;
  padding: 6px 0;
}
.navlinks a:hover { color: white; }
.navlinks a.active { color: white; font-weight: 600; }

@media (max-width: 900px) {
  /* Below tablet width the nav bar can't fit all 8 links without wrapping
     onto a second line (which, combined with the bar being sticky, pushed
     and overlapped page content) — collapse into the burger menu instead. */
  .nav-burger { display: block; }
  .navlinks {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 10px;
    order: 3;
  }
  .navlinks a {
    margin: 0;
    padding: 12px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 16px;
  }
  .nav-toggle-checkbox:checked ~ .topnav .navlinks { display: flex; }
}

/* ---------- layout ---------- */

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}
@media (max-width: 640px) {
  .container { padding: 16px 16px 80px; }
}

.page-title { margin-bottom: 4px; }

/* small "where am I" label, top-left of every logged-in page's content —
   independent of each page's own <h1>/hero-banner, which not every page
   has (detail pages start with a back-link instead) */
.page-crumb {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 14px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.card h2 { margin-top: 0; font-size: 16px; color: #0d2b1c; }

.hint { color: var(--muted); font-size: 13px; }
.ok-text { color: var(--ok-text); font-size: 14px; }

/* ---------- tables (stack on mobile) ---------- */

table { width: 100%; border-collapse: collapse; margin: 12px 0; }
th, td { text-align: left; padding: 8px 6px; font-size: 14px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }

@media (max-width: 640px) {
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
  }
  td {
    border: none;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    flex-shrink: 0;
  }
}

/* ---------- forms ---------- */

input, textarea, select, button {
  font-family: inherit;
  font-size: 16px; /* 16px avoids iOS zoom-on-focus */
}
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number],
input[type=tel], input[type=url], input:not([type]), textarea, select {
  width: 100%;
  padding: 11px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fbfdfc;
  transition: border-color 0.1s, box-shadow 0.1s;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=date]:focus,
input[type=number]:focus, input[type=tel]:focus, input[type=url]:focus, input:not([type]):focus,
textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
textarea { min-height: 70px; resize: vertical; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #2e3e35; }

.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid-form textarea, .grid-form button { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .grid-form { grid-template-columns: 1fr; }
}

button {
  cursor: pointer;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  background: #eaeeec;
  color: #17241d;
  min-height: 44px; /* touch target */
  transition: background 0.12s, box-shadow 0.12s, transform 0.05s;
}
button.primary, button[type=submit].primary {
  background: var(--brand);
  color: white;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
button.primary:hover { background: var(--brand-dark); }
button.primary:active { transform: translateY(1px); }
button.secondary { background: var(--nav-bg-1); color: white; }
button.secondary:hover { background: var(--nav-bg-2); }
button.full-width { width: 100%; }
/* An <a> that should look like button.secondary — e.g. Previous/Next paging
   links on a detail page, where a real <button> (needs a form/JS) is
   overkill for a plain navigation link. */
a.btn-nav {
  display: inline-block;
  cursor: pointer;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--nav-bg-1);
  color: white;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s;
}
a.btn-nav:hover { background: var(--nav-bg-2); }
button.linklike {
  background: none;
  color: var(--brand-dark);
  text-decoration: underline;
  padding: 6px 0;
  min-height: auto;
}
.toggle-on { background: var(--danger-bg); color: var(--danger); font-size: 12px; padding: 6px 12px; min-height: 32px; }
.resend-form { margin-top: -4px; }

/* ---------- banners / status ---------- */

.pausebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.pausebar.active { background: var(--ok-bg); color: var(--ok-text); }
.pausebar.paused { background: var(--danger-bg); color: var(--danger); }
.pausebar button { background: white; border: 1px solid currentColor; }

.banner { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.banner.ok { background: var(--ok-bg); color: var(--ok-text); }
.banner.error { background: var(--danger-bg); color: var(--danger); }

.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.checkbox-label input { width: auto; margin: 0; }

/* ---------- login / reset ---------- */

.login-box {
  max-width: 360px;
  margin: 60px auto;
  background: white;
  padding: 30px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.login-box-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.login-box-header h1 { margin: 0; }
.login-box-header .mascot { background: var(--brand-light); border-radius: 12px; padding: 4px; }
.error { color: var(--danger); }
.forgot-link { text-align: center; font-size: 14px; margin-top: 16px; }
.forgot-link a { color: var(--muted); }

/* ---------- hub / bot cards ---------- */

.hub-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.page-title { font-size: 26px; margin-bottom: 2px; }

.hub-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.hub-status-pill.active { background: var(--ok-bg); color: var(--ok-text); }
.hub-status-pill.paused { background: var(--danger-bg); color: var(--danger); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin: 20px 0 28px;
}

.bot-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  box-shadow: 0 1px 2px rgba(16, 21, 31, 0.04);
}
.bot-card-live { border-top: 3px solid var(--brand); }
.bot-card:hover { box-shadow: 0 8px 20px rgba(16, 21, 31, 0.08); transform: translateY(-2px); }
.bot-card-disabled:hover { box-shadow: 0 1px 2px rgba(16, 21, 31, 0.04); transform: none; }
.bot-card h2 { font-size: 17px; margin: 12px 0 4px; }
.bot-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }

.bot-card-disabled { opacity: 0.65; cursor: default; }

.bot-card-top { display: flex; justify-content: space-between; align-items: flex-start; }

.bot-icon {
  font-size: 22px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
.bot-icon-sales { background: var(--brand-light); }
.bot-icon-research { background: #e7f0fb; }
.bot-icon-messaging { background: #f3ecfb; }

.bot-status { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em; }
.bot-status.active { background: var(--ok-bg); color: var(--ok-text); }
.bot-status.paused { background: var(--danger-bg); color: var(--danger); }
.bot-status.coming-soon { background: #f3f4f6; color: var(--muted); }

.bot-card-stats { display: flex; gap: 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.bot-card-stats strong { display: block; font-size: 22px; line-height: 1.2; }
.bot-card-stats span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.bot-card-cta { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--brand-dark); }

.quicklinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.quicklink-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: background 0.1s, border-color 0.1s;
}
.quicklink-item span { font-size: 18px; }
.quicklink-item:hover { background: var(--brand-light); border-color: var(--brand); }
@media (max-width: 640px) {
  .quicklinks { grid-template-columns: 1fr; }
}

/* ---------- settings pages: 2-column masonry card layout on wide screens ----------
   A CSS Grid with grid-template-columns: 1fr 1fr places cards row-by-row, so
   once cards have uneven heights (they do here — SMTP setup vs. a couple of
   toggles) later cards get pushed down and leave ragged gaps, i.e. "columns
   up and down". CSS multi-column instead flows cards straight down each
   column and packs them tightly regardless of height. */
.settings-form {
  column-count: 2;
  column-gap: 20px;
}
.settings-form .card {
  margin-bottom: 20px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.settings-form > button.primary {
  /* column-span only takes effect on a block-level box — buttons are
     inline-block by default, which silently breaks the span (Chromium just
     renders it inside whichever column it falls in instead) */
  display: block; column-span: all; width: 100%; margin-top: 4px;
}
@media (max-width: 900px) {
  .settings-form { column-count: 1; }
}

.day-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.day-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.day-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.day-toggle:has(input:checked) {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.stat-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.stat-row strong { display: block; font-size: 24px; line-height: 1.2; }
.stat-row span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.lead-link { color: var(--brand-dark); text-decoration: none; font-weight: 600; }
.lead-link:hover { text-decoration: underline; }

.timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}
.timeline-item {
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--bg);
}
.timeline-item.timeline-inbound { border-left-color: #3b82f6; }
.timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.timeline-kind {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-dark);
  background: var(--brand-light);
  padding: 3px 9px;
  border-radius: 999px;
}
.timeline-date { font-size: 12px; color: var(--muted); }
.timeline-subject { font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.timeline-body {
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.5;
}
.timeline-meta { font-size: 11px; color: var(--muted); margin-top: 8px; }
.timeline-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.timeline-attachment-link {
  display: inline-block; font-size: 12.5px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 6px; text-decoration: none;
  color: var(--text); background: var(--card-alt, transparent);
}
.timeline-attachment-link:hover { border-color: var(--accent, #1c4632); }

.timeline-expand-toggle { display: none; }
.timeline-body-clamped {
  max-height: 4.2em;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}
.timeline-expand-toggle:checked + .timeline-body-clamped {
  max-height: none;
  mask-image: none;
  -webkit-mask-image: none;
}
.timeline-toggle-more,
.timeline-toggle-less {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--brand-dark);
  cursor: pointer;
  text-decoration: underline;
  user-select: none;
}
.timeline-toggle-less { display: none; }
.timeline-expand-toggle:checked ~ .timeline-toggle-more { display: none; }
.timeline-expand-toggle:checked ~ .timeline-toggle-less { display: inline-block; }

.interested-card {
  border: 1px solid var(--brand);
  background: linear-gradient(180deg, var(--brand-light), var(--card-bg) 60%);
}
.interested-card h2 { color: var(--brand-dark); }

.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  vertical-align: middle;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.switch-track {
  position: absolute;
  inset: 0;
  background: #d3dbd6;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
.switch-track::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s;
}
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::before { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--brand-light); }

button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- mascots & illustrations ---------- */

:root {
  --mascot-sales: #2fa872;
  --mascot-research: #3b82f6;
  --mascot-messaging: #a855f7;
  --mascot-ops: #d97706;
  --mascot-hub: #234a34;
}

.mascot { display: inline-flex; flex-shrink: 0; }
.mascot svg { width: 100%; height: 100%; display: block; }

.empty-illustration { text-align: center; padding: 18px 10px 6px; }
.empty-illustration svg { width: 140px; height: auto; margin-bottom: 6px; }
.empty-illustration .hint { margin: 0; }

/* ---------- brand lockup (nav) ---------- */

.brand-lockup { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-lockup .brand { margin: 0; }

/* ---------- hub hero ---------- */

.hero-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, var(--nav-bg-1), var(--nav-bg-2));
  color: white;
  border-radius: var(--radius);
  padding: 22px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-md);
}
.hero-banner .mascot { background: rgba(255,255,255,0.1); border-radius: 16px; padding: 6px; }
.hero-banner h1 { margin: 0 0 3px; font-size: 22px; }
.hero-banner p { margin: 0; color: #b9dcc9; font-size: 13.5px; }
.hero-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(255,255,255,0.12);
}
.hero-status.paused { background: rgba(192,54,44,0.35); }
@media (max-width: 560px) {
  .hero-banner { flex-wrap: wrap; }
  .hero-status { margin-left: 0; }
}

/* ---------- section groups ---------- */

.group-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 28px 0 10px;
}
.group-header:first-of-type { margin-top: 4px; }
.group-header h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.group-header .group-line { flex: 1; height: 1px; background: var(--border); }

/* ---------- collapsible utility panel ---------- */

.utility-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); margin-bottom: 20px; box-shadow: var(--shadow-sm); overflow: hidden; }
.utility-panel summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0d2b1c;
}
.utility-panel summary::-webkit-details-marker { display: none; }
.utility-panel summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform 0.15s; }
.utility-panel[open] summary::after { transform: rotate(90deg); }
.utility-panel .utility-body { padding: 0 20px 20px; }

/* ---------- click-to-edit customer card (quote/invoice header) ---------- */

.customer-edit summary {
  cursor: pointer;
  list-style: none;
  color: #fff;
  font-size: 13.5px;
  margin: 4px 0 0;
}
.customer-edit summary::-webkit-details-marker { display: none; }
.customer-edit-hint {
  color: #b9dcc9;
  font-size: 11px;
  text-decoration: underline;
  margin-left: 4px;
}
.customer-edit-card {
  background: var(--card-bg);
  color: var(--text);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 10px;
  max-width: 480px;
  box-shadow: var(--shadow-sm);
}
.customer-edit-card .grid-form { gap: 10px 12px; }

/* ---------- catalog: row summary + expandable big edit card ---------- */

.catalog-list { display: flex; flex-direction: column; gap: 10px; }
.catalog-row-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.catalog-edit-toggle summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.catalog-edit-toggle summary::-webkit-details-marker { display: none; }
.catalog-row-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  flex: 1;
  min-width: 0;
}
.catalog-row-name { font-weight: 700; font-size: 14.5px; }
.catalog-row-price { font-size: 13px; color: var(--muted); }
.catalog-row-price .hint { display: inline; margin: 0; }
.catalog-row-edit-btn {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 13px;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 5px 14px;
}
.catalog-edit-toggle[open] .catalog-row-edit-btn::after { content: " ✕"; }
.catalog-edit-toggle[open] summary { border-bottom: 1px solid var(--border); }
.catalog-edit-card {
  padding: 18px 20px 20px;
}
.catalog-edit-card .grid-form textarea { min-height: 70px; }
.catalog-edit-card-actions {
  margin: 12px 0 18px;
  display: flex;
  gap: 16px;
}
.catalog-edit-card .card { box-shadow: none; border: 1px solid var(--border); }
.catalog-edit-card .card + .card { margin-top: 14px; }

/* ---------- offers page ---------- */

.offer-explainer { margin-bottom: 20px; }
.offer-flags-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px; margin-top: 10px;
}
.offer-flag {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card-bg-alt, #f4f7f5); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.offer-flag strong { font-size: 13.5px; }
.offer-flag .hint { margin: 0; }
.offer-rank {
  flex: 0 0 auto; font-weight: 700; font-size: 13px; color: var(--muted);
  min-width: 28px;
}

/* ---------- leads: "Remove Lead" button + row removal animation ---------- */

.remove-lead-btn {
  font-size: 12.5px;
  padding: 7px 12px;
  min-height: auto;
  color: var(--danger);
  border: 1px solid #f3d3ce;
  background: var(--danger-bg);
}
.remove-lead-btn:hover { background: #fbe2de; }
.remove-lead-btn:disabled { opacity: 0.6; cursor: default; }
#new-leads-table tbody tr {
  transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.35s ease;
}
#new-leads-table tbody tr.lead-row-removing {
  opacity: 0;
  transform: translateX(18px) scale(0.98);
  background-color: var(--danger-bg);
}

/* ---------- leads: "Add as customer" badge + modal ---------- */

.lead-customer-added {
  color: var(--brand-dark);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- native <dialog> modals (top-layer overlay, immune to any
   ancestor's overflow/position/z-index) with a "curtain drop" entrance ---------- */

dialog.modal-dialog {
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(20, 30, 25, 0.35);
  padding: 22px 24px 24px;
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  background: var(--card-bg);
}
dialog.modal-dialog::backdrop {
  background: rgba(15, 25, 20, 0.45);
  animation: modal-backdrop-fade 0.18s ease-out;
}
dialog.modal-dialog[open] {
  animation: modal-curtain-drop 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes modal-curtain-drop {
  from { opacity: 0; transform: translateY(-32px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes modal-backdrop-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-dialog .grid-form { gap: 10px 12px; }
.modal-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
}
@media (max-width: 640px) {
  dialog.modal-dialog { width: calc(100vw - 32px); padding: 18px 18px 20px; }
}

/* ---------- catalog typeahead create-hint ---------- */

.catalog-create-hint {
  margin: 6px 0 0;
  background: var(--brand-light);
  border-radius: 8px;
  padding: 6px 10px;
}
.catalog-create-hint button { font-size: 12px; }

/* ---------- activity log ---------- */

.activity-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.activity-log li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.activity-log li:last-child { border-bottom: none; padding-bottom: 0; }
.activity-log-actor {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-dark);
  flex-shrink: 0;
}
.activity-log-actor.actor-ops-bot { background: #fef3e2; color: #b45309; }
.activity-log-actor.actor-customer { background: #eef2ff; color: #4338ca; }
.activity-log-action { flex: 1; min-width: 160px; }
.activity-log-time { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ---------- bot card mascot layout tweak ---------- */

.bot-card-top .mascot { border-radius: 12px; }

/* ---------- timeline avatars ---------- */

.timeline-item { display: flex; gap: 10px; align-items: flex-start; }
.timeline-item .mascot { margin-top: 2px; }
.timeline-body-wrap { flex: 1; min-width: 0; }

/* ---------- leads page: quick nav, status grid, scroll tables, pipeline grid ---------- */
.quicknav {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.quicknav a {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: #0d2b1c; text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.quicknav a:hover { border-color: var(--brand); }
.quicknav-count {
  background: var(--brand-light); color: var(--brand-dark);
  border-radius: 999px; padding: 1px 7px; font-size: 11.5px; font-weight: 700;
}

/* Sub-tab bar for Ops Bot's Jobs/Quotes/Invoices pages, since those live
   under one "Ops Bot" nav link now instead of three separate top-level ones. */
.ops-subnav { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.ops-subnav a {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border, #dbe3de);
  background: white; font-weight: 600; font-size: 14px; text-decoration: none;
  color: var(--muted, #6c7a73);
}
.ops-subnav a:hover { border-color: var(--brand); }
.ops-subnav a.active { background: var(--brand); color: white; border-color: var(--brand); }

.status-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 22px;
}
.status-grid .pausebar { margin-bottom: 0; height: 100%; }
@media (max-width: 900px) {
  .status-grid { grid-template-columns: 1fr; }
}

.table-scroll {
  max-height: 480px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 4px;
}
.table-scroll table { margin: 0; }
.table-scroll thead th {
  position: sticky; top: 0; background: var(--card-bg); z-index: 1;
  box-shadow: 0 1px 0 var(--border);
}
.table-scroll-sm { max-height: 320px; }
@media (max-width: 640px) {
  /* the responsive card-row table layout doesn't play well with a scroll
     clip + sticky header, so let these tables run full length on mobile —
     this matches the breakpoint tables actually stack into cards at */
  .table-scroll, .table-scroll-sm { max-height: none; overflow: visible; border: none; }
  .table-scroll thead th { position: static; box-shadow: none; }
}

.pipeline-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.pipeline-grid .card { margin-bottom: 0; }
@media (max-width: 900px) {
  .pipeline-grid { grid-template-columns: 1fr; }
}

/* ---------- leads page: two-column layout (main + aside) ---------- */
.leads-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
/* Pages with nothing left to put in the narrow aside (its old "Add new…"
   form moved into a top-of-list modal instead) go full-width, so the main
   column uses the space the aside used to take up. */
.leads-layout.full-width {
  grid-template-columns: 1fr;
}
/* Not position:sticky — a sticky aside creates its own stacking context that
   sat in front of (or, depending on scroll offset, behind) the "Pipeline"
   section of the main column as the page scrolled, causing the two to
   visually overlap. A normal static column avoids that entirely. */
.leads-aside .card { margin-bottom: 20px; }
@media (max-width: 900px) {
  .leads-layout { grid-template-columns: 1fr; }
}

/* Narrow secondary containers (a 320px aside, a 480px-wide edit card) still
   sit inside a wide desktop viewport, so the .grid-form 640px viewport
   breakpoint never kicks in for them and their two columns get squeezed
   down to nothing. Force single-column regardless of viewport width. */
.leads-aside .grid-form,
.customer-edit-card .grid-form {
  grid-template-columns: 1fr;
}

/* ---------- ops bot: jobs / clients / staff ---------- */
.job-status {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.job-status.open { background: #fef3e2; color: #b45309; }
.job-status.completed { background: var(--ok-bg); color: var(--ok-text); }
.job-status.invoiced { background: var(--brand-light); color: var(--brand-dark); }

.margin-positive { color: var(--ok-text); font-weight: 700; }
.margin-negative { color: var(--danger); font-weight: 700; }

.cost-item-row form { display: inline; }
.cost-item-row button.linklike { color: var(--danger); font-size: 12px; }

.job-summary-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin: 16px 0 4px;
}
.job-summary-stats div { background: var(--bg); border-radius: 10px; padding: 14px 16px; }
.job-summary-stats strong { display: block; font-size: 22px; line-height: 1.2; }
.job-summary-stats span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.cost-item-form-fields { display: none; }
.cost-item-form-fields.active { display: grid; }

/* ---------- quotes / invoices status pills ---------- */
.doc-status {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.doc-status.draft { background: #f3f4f6; color: var(--muted); }
.doc-status.sent { background: #fef3e2; color: #b45309; }
.doc-status.accepted, .doc-status.paid { background: var(--ok-bg); color: var(--ok-text); }
.doc-status.declined { background: var(--danger-bg); color: var(--danger); }
/* declined_follow: still "in play" (one win-back email still owed or sent) —
   amber like "sent", not red, so it doesn't read as fully closed out */
.doc-status.declined_follow { background: #fef3e2; color: #b45309; }
.doc-status.declined_no_follow { background: var(--danger-bg); color: var(--danger); }
.doc-status.expired { background: #f3f4f6; color: var(--muted); }

/* ---------- public embeddable contact form (templates/contact_embed.html) ---------- */
/* Meant to sit inside a narrow iframe on an external site (Odoo, say) —
   always single-column regardless of width, and background is transparent
   so it blends into whatever page it's embedded on rather than showing a
   visible rectangle. */
.contact-embed-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text); max-width: 480px; margin: 0 auto; padding: 18px 4px;
}
.contact-embed-page h2 { margin: 0 0 6px; color: #1c4632; font-size: 20px; }
.contact-embed-page .hint { margin: 0 0 16px; }
.contact-embed-page .grid-form { grid-template-columns: 1fr; gap: 10px; }
.contact-embed-page input, .contact-embed-page textarea { width: 100%; }
/* display:none (not off-screen positioning) — browsers and password
   managers reliably skip autofilling a display:none field, but will
   still autofill one that's merely moved off-screen, which was
   incorrectly triggering the honeypot for real visitors with saved
   address/company info in their browser. */
.contact-embed-honeypot { display: none; }
.contact-embed-thanks { text-align: center; padding: 30px 10px; }
.contact-embed-check {
  width: 48px; height: 48px; line-height: 48px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok-text); font-size: 24px; font-weight: 700;
}
.contact-embed-thanks h2 { color: var(--ok-text); }
.contact-embed-thanks p { color: var(--muted); margin: 0; }

/* ---------- Contact form dashboard page (templates/contact_form.html) ---------- */
.embed-snippet {
  background: #1c2620; color: #d7f5e5; padding: 14px 16px; border-radius: var(--radius);
  white-space: pre-wrap; word-break: break-all; font-size: 13px; line-height: 1.5; margin: 0 0 10px;
}
.contact-counts { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 16px; }
.contact-counts div { display: flex; flex-direction: column; }
.contact-counts strong { font-size: 22px; }
.contact-counts span { color: var(--muted); font-size: 12.5px; }
.contact-status {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.contact-status.lead { background: var(--ok-bg); color: var(--ok-text); }
.contact-status.enquiry { background: #eaf2fd; color: #2563eb; }
.contact-status.other { background: #fef3e2; color: #b45309; }
.contact-status.spam { background: #f3f4f6; color: var(--muted); }
.contact-status.duplicate { background: #f3f4f6; color: var(--muted); }

/* ---------- printable public quote/invoice page ---------- */
/* logo/header layout + spacing are driven by Settings > Branding — see
   app/branding.py for logo_position/header_style/layout_density, and the
   per-render inline <style> block in quote_pdf.html/invoice_pdf.html/
   quote_public.html/invoice_public.html that sets --print-accent,
   --print-header-bg and the body font-family from those settings. */
.print-page {
  max-width: 720px; margin: 0 auto; padding: 40px 32px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #202b25; background: #fff;
}
.print-page.compact { padding: 22px 20px; }
.print-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  margin-bottom: 28px; padding-bottom: 20px;
  flex-wrap: wrap; background: var(--print-header-bg, transparent);
}
.print-page.compact .print-header { margin-bottom: 18px; padding-bottom: 14px; }
.print-header.has-bg { padding: 16px 20px; margin-left: -20px; margin-right: -20px; }
/* header_border_style: how the header separates from the rest of the page */
.print-header.border-thin { border-bottom: 2px solid var(--print-accent); }
.print-header.border-bold { border-bottom: 6px solid var(--print-accent); }
.print-header.border-bold h1 { font-size: 28px; }
.print-header.border-boxed {
  border: 2px solid var(--print-accent); border-radius: 10px; padding: 18px 20px;
}
.print-header.border-boxed.has-bg { margin-left: 0; margin-right: 0; }
.print-header h1 { margin: 0 0 4px; font-size: 22px; color: var(--print-accent); }
.print-header .biz { text-align: right; font-size: 13px; color: #6c7a73; line-height: 1.5; }
.print-header .biz img.print-logo { display: block; max-height: 48px; max-width: 220px; margin-bottom: 8px; }
.print-header.pos-center .biz img.print-logo { margin-left: auto; margin-right: auto; }
/* logo_position: where the heading vs. the logo+business-name block sit */
.print-header.pos-left { flex-direction: row-reverse; }
.print-header.pos-center { flex-direction: column; align-items: center; text-align: center; }
.print-header.pos-center .biz { text-align: center; }
/* header_style: logo stacked above the business name (default) vs. inline beside it */
.print-header.style-inline .biz { display: flex; align-items: center; gap: 10px; text-align: left; }
.print-header.style-inline .biz img.print-logo { margin-bottom: 0; }
.print-header.pos-center.style-inline .biz { justify-content: center; }
.print-meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; font-size: 14px; }
.print-page.compact .print-meta { margin-bottom: 16px; }
.print-meta div span { display: block; color: #6c7a73; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.print-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.print-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: #6c7a73; padding: 8px 6px; border-bottom: 2px solid #e4e9e6; }
.print-table td { padding: 10px 6px; border-bottom: 1px solid #e4e9e6; font-size: 14px; }
.print-page.compact .print-table th { padding: 6px 6px; }
.print-page.compact .print-table td { padding: 6px 6px; }
.print-table td.num, .print-table th.num { text-align: right; }
/* table_stripe — alternating row tint, coloured from secondary_color (see
   app/branding.py's _lighten helper, which computes --print-stripe-bg as a
   plain hex colour rather than relying on CSS colour functions) */
.print-table.striped tbody tr:nth-child(even) td { background: var(--print-stripe-bg, transparent); }
.print-total { display: flex; justify-content: flex-end; margin-bottom: 30px; }
.print-page.compact .print-total { margin-bottom: 18px; }
.print-total table { border-collapse: collapse; }
.print-total td { padding: 6px 14px; font-size: 15px; }
.print-total tr:last-child td { font-weight: 700; font-size: 18px; border-top: 2px solid var(--print-accent); padding-top: 10px; }
.print-actions { display: flex; gap: 12px; justify-content: center; margin: 30px 0; }
.print-actions form { display: inline; }
.print-notes { font-size: 13px; color: #6c7a73; white-space: pre-wrap; margin-bottom: 20px; }
.print-offer-callout {
  background: var(--brand-light, #e3f3ea); border: 1px solid var(--brand, #2fa872);
  color: var(--brand-dark, #1f8a5c); border-radius: 10px; padding: 12px 16px;
  font-size: 14px; margin-bottom: 20px;
}
.print-footer { text-align: center; font-size: 12px; color: #6c7a73; margin-top: 30px; }
.print-page.compact .print-footer { margin-top: 18px; }
/* the free-text Settings > Branding "Document footer" field (bank transfer
   details etc.) — sits above the fixed one-liner in the same .print-footer */
.print-footer-custom {
  white-space: pre-wrap; font-size: 12.5px; color: #202b25; margin-bottom: 10px;
  padding-bottom: 10px; border-top: 1px solid #e4e9e6; padding-top: 14px;
}
@media print {
  .print-actions { display: none; }
  body { background: white; }
}
/* Any screen-only control (a date-range filter, a back link) on an
   otherwise printable page — same idea as .print-actions above but not
   restricted to a flex button row. */
.no-print { }
@media print {
  .no-print { display: none !important; }
}

/* ---------- customer statement ---------- */
.statement-filter-bar {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  background: var(--card-bg, #fff); border: 1px solid var(--border, #dbe3de);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 24px;
}
.statement-filter-bar label { font-size: 12px; color: var(--muted, #6c7a73); display: block; margin-bottom: 4px; }
.statement-filter-bar input[type="date"] { min-height: 38px; }
.statement-summary { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.statement-summary div { flex: 1; min-width: 140px; background: var(--card-bg, #fff); border: 1px solid var(--border, #dbe3de); border-radius: 10px; padding: 14px 16px; }
.statement-summary div span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted, #6c7a73); margin-bottom: 4px; }
.statement-summary div strong { font-size: 20px; }
@media print {
  .statement-summary div { border-color: #e4e9e6; break-inside: avoid; }
}

/* ---------- settings tabs (radio-driven, no JS) ---------- */
.settings-tabs-input { display: none; }
.settings-tabbar { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; }
.settings-tabbar label {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border, #dbe3de);
  background: white; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--muted, #6c7a73);
}
.settings-tabbar label:hover { border-color: var(--brand); }
.settings-panel { display: none; }
#tab-system:checked ~ .settings-tabbar label[for="tab-system"],
#tab-sales:checked ~ .settings-tabbar label[for="tab-sales"],
#tab-pricing:checked ~ .settings-tabbar label[for="tab-pricing"],
#tab-ops:checked ~ .settings-tabbar label[for="tab-ops"],
#tab-branding:checked ~ .settings-tabbar label[for="tab-branding"] {
  background: var(--brand); color: white; border-color: var(--brand);
}
#tab-system:checked ~ .settings-panels .panel-system,
#tab-sales:checked ~ .settings-panels .panel-sales,
#tab-pricing:checked ~ .settings-panels .panel-pricing,
#tab-ops:checked ~ .settings-panels .panel-ops,
#tab-branding:checked ~ .settings-panels .panel-branding {
  display: block;
}

/* ---------- branding & email templates tab ---------- */
.brand-logo-preview { max-height: 64px; max-width: 240px; border: 1px solid var(--border, #dbe3de); border-radius: 8px; padding: 6px; background: white; display: block; margin-bottom: 10px; }
.preset-btn.preset-active { background: var(--brand, #2fa872); color: white; border-color: var(--brand, #2fa872); }
.template-editor { border: 1px solid var(--border, #dbe3de); border-radius: 10px; padding: 16px; margin-bottom: 14px; background: white; }
.template-editor summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.template-editor summary .tpl-customized-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--brand-light); color: var(--brand-dark); }
.template-editor .tpl-desc { color: var(--muted); font-size: 13px; margin: 6px 0 12px; }
.template-editor .tpl-placeholders { font-size: 12px; color: var(--muted); margin: 10px 0; line-height: 1.7; }
.template-editor .tpl-placeholders code { background: var(--brand-light); padding: 1px 5px; border-radius: 4px; color: var(--brand-dark); }
.template-editor textarea { width: 100%; font-family: inherit; }
.template-editor .tpl-actions { display: flex; gap: 10px; margin-top: 10px; align-items: center; }

/* ---------- Phase 4: customer types & pricing profile ---------- */
.customer-type-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.customer-type-row input[type="text"] { flex: 1; }
.pricing-item-types { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pricing-item-types label { display: inline-flex; gap: 4px; align-items: center; font-weight: 400; font-size: 13px; white-space: nowrap; }
.pricing-item-name { font-weight: 600; }

.callout-link {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; background: var(--brand-light); border: 1px solid var(--brand);
  border-radius: 10px; padding: 12px 16px; margin: 0 0 18px 0; font-size: 13.5px;
}
.callout-link span { color: var(--brand-dark, #1f8a5c); }
.callout-link a.linklike { font-weight: 700; white-space: nowrap; }

/* ---------- owner chat ---------- */

.chat-window {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 60vh; overflow-y: auto; padding: 6px 2px 14px 2px;
}
.chat-empty { color: var(--muted); font-size: 14px; padding: 20px 0; }

.chat-row { display: flex; }
.chat-row.chat-owner { justify-content: flex-end; }
.chat-row.chat-bot { justify-content: flex-start; }

.chat-bubble {
  max-width: 72%; padding: 10px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.45; box-shadow: var(--shadow-sm);
}
.chat-row.chat-owner .chat-bubble {
  background: var(--brand); color: white; border-bottom-right-radius: 4px;
}
.chat-row.chat-bot .chat-bubble {
  background: var(--card-bg); border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-bubble-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--brand-dark, #1f8a5c); margin-bottom: 3px;
}
.chat-row.chat-owner .chat-bubble-label { display: none; }
.chat-bubble-body { white-space: pre-wrap; word-break: break-word; }
.chat-bubble-time {
  font-size: 10.5px; margin-top: 6px; opacity: 0.7;
}
.chat-bubble-catalog-link {
  display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700;
}

.chat-input-form {
  display: flex; gap: 10px; align-items: flex-end; margin-top: 16px;
  border-top: 1px solid var(--border); padding-top: 16px;
}
.chat-input-form textarea {
  flex: 1; resize: vertical; min-height: 44px; max-height: 160px;
}
.chat-explainer {
  color: var(--muted); font-size: 13.5px; margin: 0 0 10px 0;
}

/* ---------- floating chat widget (templates/_chat_widget.html) ---------- */

.chat-widget { position: fixed; z-index: 900; bottom: 0; right: 24px; }

/* a docked bar flush with the bottom edge of the window, like the
   chat tab on most support-widget sites, rather than a floating
   circular button */
.chat-widget-bubble {
  height: 46px; padding: 0 16px 0 14px; border: none; cursor: pointer;
  background: var(--brand); box-shadow: var(--shadow-md);
  border-radius: 10px 10px 0 0;
  display: flex; align-items: center; gap: 8px; position: relative;
  color: #fff; font-weight: 700; font-size: 14px;
}
.chat-widget-bubble:hover { filter: brightness(1.05); }
.chat-widget-bubble-label { line-height: 1; }
.chat-widget-badge {
  position: absolute; top: -8px; right: -6px; background: #e0453c; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; min-width: 18px; height: 18px;
  border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
  border: 2px solid var(--body-bg, #fff);
}

.chat-widget-panel {
  /* local dark theme for the widget only — overrides the vars that
     .chat-bubble/.chat-window/inputs read, so the whole panel (message
     bubbles, borders, textarea) darkens together without a second
     copy of every chat rule */
  --card-bg: #1b2a21;
  --border: #33473c;
  --text: #eef4f0;
  --muted: #9db1a4;
  position: fixed; bottom: 58px; right: 24px; width: 440px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 90px);
  background: #14211a; color: var(--text); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden;
}
/* the `hidden` attribute normally maps to `display: none` via the UA
   stylesheet, but that loses to this file's own `display: flex` above
   (author styles beat user-agent styles regardless of specificity) —
   without this rule the panel never actually disappears, which is why
   the close button and the bubble looked like they did nothing */
.chat-widget-panel[hidden] { display: none; }
.chat-widget-header {
  background: var(--brand); color: #fff; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.chat-widget-close {
  background: none; border: none; color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0 2px;
}
.chat-widget-banner {
  background: #fff7e6; border-bottom: 1px solid #f0c36d; color: #7a5a00;
  font-size: 12px; padding: 8px 14px; flex-shrink: 0;
}
.chat-widget-window {
  flex: 1; min-height: 0; max-height: none; padding: 12px 14px; margin: 0;
  /* scrolling inside the message list shouldn't hand off to the page
     behind it once the list hits its top/bottom edge */
  overscroll-behavior: contain;
}
.chat-widget-input-form {
  padding: 10px 12px; margin-top: 0; border-top: 1px solid var(--border); flex-shrink: 0;
}
.chat-widget-input-form textarea { min-height: 38px; max-height: 100px; font-size: 13.5px; }

@media (max-width: 520px) {
  .chat-widget { right: 12px; bottom: 0; }
  .chat-widget-bubble { border-radius: 10px 10px 0 0; }
  .chat-widget-panel {
    right: 12px; left: 12px; width: auto; bottom: 54px;
    height: calc(100vh - 78px); max-height: none;
  }
}

.pending-review-list { display: flex; flex-direction: column; gap: 12px; }
.pending-review-item {
  border: 1px solid var(--brand); background: var(--brand-light);
  border-radius: 10px; padding: 14px;
}
.pending-review-item .catalog-row-price { color: var(--brand-dark, #1f8a5c); font-weight: 700; }

.contact-message {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 260px; font-size: 13px; color: var(--text);
  cursor: help;
}
.contact-reclassify-form { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.contact-reclassify-form select { font-size: 12.5px; padding: 4px 6px; }
.contact-reclassify-form button { font-size: 12.5px; }