/* Portal theme = the CONSUMER Flutter app's coral "shell" brand (lib/theme/shell_brand.dart), applied by
 * overriding the mockup's CSS variables so the WHOLE portal (mockup form + injected sidebar/chat/admin) uses
 * one brand. Loaded AFTER mockup.css so these win. Light-first with a dark variant, mirroring the app
 * (ThemeMode.system). Values are the exact kBrand* / _ShellPalette tokens. */
:root {
  --ground: #F6F4F0;        /* paper (app background) */
  --surface: #FFFFFF;       /* panel (card/surface) */
  --surface-2: #F1EEE9;     /* block */
  --surface-3: #E7E2DB;     /* block2 */
  --ink: #26190F;           /* text */
  --ink-2: #796F66;         /* text2 (secondary) */
  --muted: #A79E95;         /* text3 (faint) */
  --rule: #ECE6DE;          /* line */
  --rule-2: #F1EEE9;        /* lighter line */
  --accent: #FB5B0E;        /* coral accent / primary */
  --accent-2: #E44E04;      /* accent hover */
  --accent-soft: #FFEADD;   /* soft coral fill */
  --accent-soft-border: #FFD9C4;
  --on-accent: #FFFFFF;     /* text on coral */
  --ok: #2F7A5F; --ok-soft: #E2F0E9;
  --warn: #E0932F; --warn-soft: #F7EBD1;
  --stop: #D8412F; --stop-soft: #F9E2DE;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Headings/brand use weighted Inter — the consumer shell uses its default sans, NOT the condensed
     Instrument Serif (landing-only; it looked squished/unreadable at heading sizes). */
  --slab: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Dark variant — the app's "midnight" tokens. Applies on OS dark unless the page forces light, and always
 * under [data-theme="dark"]. Kept identical in both blocks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #15120E; --surface: #1E1A15; --surface-2: #26211B; --surface-3: #2E2820;
    --ink: #F3EFE9; --ink-2: rgba(243,239,233,0.62); --muted: rgba(243,239,233,0.42);
    --rule: rgba(243,239,233,0.12); --rule-2: rgba(243,239,233,0.10);
    --accent: #FF7A3C; --accent-2: #FB5B0E; --accent-soft: rgba(251,91,14,0.20); --accent-soft-border: rgba(251,91,14,0.33);
    --on-accent: #1A120C; --stop: #E5484D;
  }
}
:root[data-theme="dark"] {
  --ground: #15120E; --surface: #1E1A15; --surface-2: #26211B; --surface-3: #2E2820;
  --ink: #F3EFE9; --ink-2: rgba(243,239,233,0.62); --muted: rgba(243,239,233,0.42);
  --rule: rgba(243,239,233,0.12); --rule-2: rgba(243,239,233,0.10);
  --accent: #FF7A3C; --accent-2: #FB5B0E; --accent-soft: rgba(251,91,14,0.20); --accent-soft-border: rgba(251,91,14,0.33);
  --on-accent: #1A120C; --stop: #E5484D;
}

/* Markdown rendered (client-side via marked) inside chat bubbles — tables/lists/code read cleanly. */
.msg span p { margin: .35em 0; }
.msg span p:first-child { margin-top: 0; }
.msg span p:last-child { margin-bottom: 0; }
.msg span table { border-collapse: collapse; margin: .5em 0; font-size: 12px; width: 100%; }
.msg span th, .msg span td { border: 1px solid var(--rule); padding: 3px 7px; text-align: left; vertical-align: top; }
.msg span th { background: var(--surface-2); }
.msg span ul, .msg span ol { margin: .35em 0; padding-left: 20px; }
.msg span li { margin: .15em 0; }
.msg span code { font-family: var(--mono); background: var(--surface-2); padding: 1px 4px; border-radius: 4px; font-size: 12px; }
.msg span pre { background: var(--surface-2); padding: 8px 10px; border-radius: 8px; overflow-x: auto; }
.msg span hr { border: 0; border-top: 1px solid var(--rule); margin: .6em 0; }
.msg span h1, .msg span h2, .msg span h3 { margin: .5em 0 .25em; font-size: 1.05em; font-weight: 700; }
.msg span a { color: var(--accent); }

/* Wider left rail so the Get covered 2-col tiles fit without clipping (desktop only; the mockup's own
   narrow-screen media query still collapses the rail below its breakpoint). */
@media (min-width: 1000px) {
  .shell { grid-template-columns: 272px minmax(0, calc((100% - 292px) * var(--split))) minmax(0, 1fr); }
  .shell[data-wide="1"] { grid-template-columns: 272px minmax(0, 1fr); }
}

/* Thin, themed scrollbars (match the consumer client). */
* { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Top bar above all panels (holds the account button). Body becomes a column: bar + shell(fills rest). */
body { display: flex; flex-direction: column; height: 100%; }
#bp-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 18px; border-bottom: 1px solid var(--rule); background: var(--ground); }
#bp-top .bp-top-brand { font-family: var(--slab, serif); font-weight: 700; font-size: 16px; color: var(--ink); }
#bp-top .bp-top-brand span { color: var(--accent); }
#bp-top .bp-top-sp { flex: 1; }
#bp-account { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 12px 5px 6px; cursor: pointer; font: 600 13px var(--sans, system-ui); }
#bp-account .av { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.shell { flex: 1; min-height: 0; height: auto !important; }

/* The floating ⚙ Admin button is superseded by the My account → Admin panel entry (kept in the DOM so the
   account panel can trigger it, but hidden so it doesn't overlap the top bar). */
#bp-admin-btn { display: none !important; }

/* Floating "Upload policy PDF" (#bp-pdf-btn) and "Select vehicle" (#bp-vehicle-btn) are superseded by the
   chat paperclip and the left car cards — hide them (kept in the DOM so their handlers/state stay valid). */
#bp-pdf-btn, #bp-vehicle-btn { display: none !important; }

/* Language switch moved to My account → Preferences; hide the in-panel EN/DE/RU switcher. */
#langSw { display: none !important; }

/* App theme for native form controls — coral, not the browser-default blue (matches the consumer). Covers
   the admin permission matrix checkboxes, settings toggles, radios and range inputs. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); }

/* Thinking indicator: animated three dots + reasoning text + live elapsed timer. */
.bp-thinking .bp-think-row { display: flex; align-items: center; gap: 8px; }
.bp-dots { display: inline-flex; gap: 4px; align-items: center; flex: none; }
.bp-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; animation: bp-blink 1.2s infinite ease-in-out; }
.bp-dots span:nth-child(2) { animation-delay: .16s; }
.bp-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes bp-blink { 0%, 80%, 100% { transform: scale(.5); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }
.bp-think-text { color: var(--ink-2, var(--ink)); font-size: 13px; }
.bp-think-timer { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; margin-left: auto; }
/* Post-answer step history (collapsible) + per-step durations. */
.bp-think-sum { color: var(--muted); font-size: 11.5px; margin-top: 6px; user-select: none; }
.bp-caret { font-size: 10px; }
.bp-think-steps { margin-top: 4px; padding-left: 4px; border-left: 2px solid var(--rule-2, var(--rule)); }
.bp-step { display: flex; gap: 10px; align-items: baseline; font-size: 11.5px; color: var(--muted); padding: 2px 0; }
.bp-step-t { flex: 1; }
.bp-step-d { flex: none; font-variant-numeric: tabular-nums; }
/* Answer timestamp under a bot reply. */
.bp-ts { color: var(--muted); font-size: 11px; margin-top: 5px; font-variant-numeric: tabular-nums; }

/* ::field:: pill — a centered "field added/updated" notice. */
.bp-fieldrow { display: flex; justify-content: center; background: transparent !important; box-shadow: none !important; padding: 2px 0 !important; }
.bp-fieldpill { display: inline-block; background: var(--accent-soft); color: var(--ink-2, var(--ink)); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; font-size: 12px; }
/* ::card-select:: — selectable card table inside a bot bubble. */
.bp-cardsel { border: 1px solid var(--rule); border-radius: 10px; padding: 12px; background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.bp-cardsel-prompt { font-size: 13px; color: var(--ink); margin-bottom: 8px; }
.bp-cardsel-hdr { display: flex; gap: 8px; align-items: center; font: 700 11px var(--sans, system-ui); letter-spacing: .3px; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.bp-cardsel-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule-2, var(--rule)); font-size: 13px; }
.bp-cardsel-info { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px; }
.bp-cardsel-info:hover { color: var(--accent); }
.bp-cardsel-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.bp-cardsel-select { border: 0; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 6px 14px; cursor: pointer; font: 600 13px var(--sans, system-ui); }
.bp-cardsel-select:disabled { opacity: .45; cursor: default; }
.bp-cardsel-cont { border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink-2, var(--ink)); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; }
.bp-cardsel-cont:disabled { opacity: .45; cursor: default; }

/* ::paywall:: — lock/block informational card. */
.bp-paywall { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.bp-paywall.blocked { background: var(--surface-2); border-color: var(--rule); }
.bp-paywall-ic { flex: none; font-size: 18px; line-height: 1.2; }

/* ::compare-table:: — compact carrier comparison inside a bot bubble. */
.bp-cmp { overflow: auto; }
.bp-cmp-sub { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.bp-cmp table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.bp-cmp th { text-align: left; color: var(--muted); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.bp-cmp td { padding: 5px 8px; border-bottom: 1px solid var(--rule-2, var(--rule)); white-space: nowrap; }

/* Quote card loader — shown while a carrier is still scanning (before its price / no-price arrives). */
/* Quote card overflow containment: the middle text block flexes+shrinks, the name/reason wrap (long unbreakable
   strings like a carrier's raw error URL), and the reason is clamped to a few lines so a stack-trace dump can't
   blow out the card. */
.q { align-items: flex-start; overflow: hidden; }
.q .av, .q .pr { flex: none; }
.q .qtx { flex: 1; min-width: 0; }
.q .nm { overflow-wrap: anywhere; }
.q .sub { white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.q.loading { opacity: .82; }
.q-load { display: inline-flex; align-items: center; }
.q-spin { width: 15px; height: 15px; border: 2px solid var(--rule); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: bp-spin .7s linear infinite; }
@keyframes bp-spin { to { transform: rotate(360deg); } }

/* Unread badge on a Recent-chats row that received messages while it was not the open chat. */
.bp-unread { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 11px var(--sans, system-ui); display: inline-flex; align-items: center; justify-content: center; }

/* ---- Consumer-parity sidebar (section headers, rows, kebab menu, confirm modal) ---------------------- */
/* Section header: uppercase label left; item count + collapse chevron pinned to the RIGHT. */
.bp-sechead { display: flex; align-items: center; gap: 6px; padding: 2px 4px 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.bp-sechead .bp-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-sechead .bp-cnt { color: var(--ink-2); font-weight: 600; }
.bp-sechead .bp-chev { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; }
.bp-sechead.collapsible { cursor: pointer; }
.bp-sechead.collapsible:hover .bp-chev, .bp-sechead.collapsible:hover .bp-cnt { color: var(--ink); }
/* Row: colored round icon · bright title + muted subtitle · status dot + count · kebab (on hover). */
.bp-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
.bp-row:hover { background: var(--surface-2); }
.bp-row.on { background: var(--accent-soft); }
.bp-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--accent-soft); color: var(--accent); }
.bp-ico.doc { background: var(--surface-2); color: var(--ink-2); }
.bp-ico-plain { flex: none; width: 22px; text-align: center; color: var(--muted); font-size: 14px; }
.bp-row.on .bp-ico-plain { color: var(--accent); }
.bp-tx { flex: 1; min-width: 0; }
.bp-tt { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-row.on .bp-tt { color: var(--accent-2); }
.bp-sb { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-amt { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.bp-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.bp-dot.ok { background: var(--ok); }
.bp-kebab { flex: none; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); opacity: 0; font-size: 17px; line-height: 1; }
.bp-row:hover .bp-kebab, .bp-kebab.open { opacity: 1; }
.bp-kebab:hover { background: var(--surface-3); color: var(--ink); }
.bp-seeall { font-size: 11.5px; color: var(--ink-2); cursor: pointer; padding: 4px 8px; }
.bp-seeall:hover { color: var(--accent); }
/* Kebab context menu (fixed, positioned in JS). */
.bp-menu { position: fixed; z-index: 960; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.28); padding: 5px; min-width: 150px; }
.bp-menu-item { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 7px; font-size: 13px; color: var(--ink); cursor: pointer; }
.bp-menu-item:hover { background: var(--surface-2); }
.bp-menu-item.danger { color: var(--stop); }
/* Confirm modal (matches the consumer's "Delete card" dialog). */
.bp-modal-bg { position: fixed; inset: 0; z-index: 970; background: rgba(20,16,14,.55); display: flex; align-items: center; justify-content: center; }
.bp-modal { background: var(--surface); color: var(--ink); width: min(380px, calc(100vw - 40px)); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.4); padding: 22px; text-align: center; font-family: var(--sans, system-ui, sans-serif); }
.bp-modal h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.bp-modal p { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.bp-modal-actions { display: flex; gap: 10px; justify-content: center; align-items: center; }
.bp-btn-text { border: 0; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 14px; padding: 9px 16px; cursor: pointer; border-radius: 9px; }
.bp-btn-text:hover { background: var(--surface-2); }
.bp-btn-danger { border: 0; background: var(--stop); color: #fff; font-weight: 700; font-size: 14px; padding: 9px 20px; cursor: pointer; border-radius: 10px; }
.bp-btn-danger:hover { filter: brightness(1.05); }

/* "Compare offers" (#cmpBtn): when ENABLED it is styled exactly like "Show prices" (filled coral primary), so
   the two footer actions match; when DISABLED it is clearly dim. */
#cmpBtn:not([disabled]) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
#cmpBtn:not([disabled]):hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
#cmpBtn[disabled] { opacity: .45; cursor: not-allowed; }

/* Composer send arrow turns into a STOP button while a turn runs. */
.send.bp-stop { background: var(--stop); border-color: var(--stop); }
.send.bp-stop:hover { filter: brightness(1.05); }

/* "Compare offers" matrix rendered in a chat bubble (comparison_matrix). */
.bp-cmp { font-size: 12.5px; }
.bp-cmp-sub { color: var(--ink-2); margin-bottom: 8px; line-height: 1.5; }
.bp-cmp table { border-collapse: collapse; width: 100%; }
.bp-cmp th, .bp-cmp td { border: 1px solid var(--rule); padding: 5px 9px; text-align: left; vertical-align: top; white-space: nowrap; }
.bp-cmp th { background: var(--surface-2); font-weight: 600; color: var(--ink); }
.bp-cmp td.crit { color: var(--ink); background: var(--surface-2); white-space: normal; }
.bp-cmp-src { color: var(--muted); font-size: 11px; margin-top: 6px; }

/* Legal/about document rendered into the modal DIV (first-party HTML injected, styled here — no iframe, so
   the app CSP no longer blocks it). Uses the app fonts + coral headings, brand type scale. */
.bp-legal { padding: 4px 18px 18px; color: var(--ink); line-height: 1.6; font: 15px/1.6 var(--sans, system-ui, sans-serif); }
.bp-legal h1 { font-family: var(--slab, Georgia, serif); font-size: 34px; line-height: 1.15; color: var(--accent); margin: .3em 0 .5em; font-weight: 700; }
.bp-legal h2 { font-size: 20px; margin: 1.4em 0 .5em; color: var(--ink); }
.bp-legal h3 { font-size: 16px; margin: 1.2em 0 .4em; color: var(--ink); }
.bp-legal p { margin: .7em 0; }
.bp-legal a { color: var(--accent); }
.bp-legal strong, .bp-legal b { color: var(--ink); }
.bp-legal ul, .bp-legal ol { padding-left: 22px; }
.bp-legal li { margin: .25em 0; }
.bp-legal hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5em 0; }
.bp-legal img { max-width: 100%; height: auto; }
.bp-legal table { border-collapse: collapse; width: 100%; }
.bp-legal td, .bp-legal th { border: 1px solid var(--rule); padding: 6px 9px; text-align: left; }