/* Site-only assistant. Geometry borrows the lead drawer; every surface, rule and
   ink below is a theme token or a color-mix of one — no raw hex. The panel reads
   as a transcript: oldest at the top, newest on the sill above the composer.
   One deliberate exception to the squared, hairline house style: the composer
   surface is rounded and carries a focus halo (see .chat-field), because the
   input is the one element a reader must recognise instantly. */
.chat-tab { position:fixed; inset-inline-end:0; inset-block-start:55%; z-index:calc(var(--z-drawer) + 1);
  inline-size:44px; min-block-size:44px; padding:0; border:0; background:transparent; color:var(--ink); }
.chat-tab span { display:block; margin-inline-start:auto; inline-size:18px; padding-block:12px;
  border:1px solid var(--border-strong); background:var(--surface-sheet); }
.chat-tab:focus-visible { outline:2px solid var(--brand-orange); outline-offset:-2px; }
#chatPanel { position:fixed; inset-block:0; inset-inline-end:0; z-index:var(--z-drawer);
  inline-size:min(var(--drawer-snap), var(--drawer-max)); block-size:100dvh;
  display:flex; flex-direction:column; background:var(--surface-sheet); color:var(--ink);
  border-inline-start:1px solid var(--border-strong); font-size:var(--text-sm); line-height:var(--lh-body); }
#chatPanel[hidden], .chat-tab[hidden] { display:none; }

/* -- head: one compact row — context chips inline with the controls ------- */
.chat-head { flex:none; padding:var(--space-2) var(--space-4);
  border-block-end:1px solid var(--border); }
.chat-head__bar { display:flex; align-items:center; gap:var(--space-2); }
.chat-actions { display:flex; align-items:center; gap:var(--space-1); margin-inline-start:auto; flex:none; }
.chat-act { font:var(--fw-bold) var(--text-micro)/1 var(--font-sans); letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--ink-2); background:transparent; border:1px solid transparent;
  min-block-size:32px; padding:8px 6px; }
.chat-act:hover { background:color-mix(in oklch, var(--muted) 45%, var(--surface-sheet)); color:var(--ink); }
.chat-close { inline-size:32px; block-size:32px; padding:0; background:transparent;
  border:1px solid var(--border-strong); color:var(--primary); display:grid; place-items:center; }
.chat-close:hover { background:color-mix(in oklch, var(--primary) 8%, var(--surface-sheet)); }
.chat-context { display:flex; flex-wrap:nowrap; gap:var(--space-1); flex:1 1 auto;
  min-inline-size:0; overflow:hidden; }
.chat-chip { display:inline-block; flex:0 1 auto; min-inline-size:0; background:var(--accent);
  border:1px solid var(--border); padding:2px 6px; color:var(--ink-2);
  font-size:var(--text-micro); line-height:1.6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Several attached leads need room and a way back out; one does not, and that row
   is left exactly as it shipped. */
.chat-context[data-multi="1"] { flex-wrap:wrap; overflow:visible; }
.chat-chip__x { display:inline-block; vertical-align:baseline; margin-inline-start:5px;
  padding:0; border:0; background:transparent; color:var(--ink-2);
  font-size:var(--text-micro); line-height:1; min-block-size:0; }
.chat-chip__x:hover { color:var(--primary); }
.chat-max { font-size:13px; }

/* -- transcript ---------------------------------------------------------- */
.chat-scroll { flex:1; min-block-size:0; overflow:auto; overscroll-behavior:contain; }
/* The log grows from the bottom edge, so a short conversation sits on the
   composer instead of floating at the top of an empty panel. */
/* A transcript is read, not scanned: one step up from the panel's chrome size and
   the prose leading the rest of the product uses, so a long answer stays legible
   without out-typing the dashboard around it. */
.chat-log { min-block-size:100%; display:flex; flex-direction:column; justify-content:flex-end;
  gap:var(--space-6); padding:var(--space-5); font-size:var(--text-ui);
  line-height:var(--lh-prose); text-wrap:pretty; }
/* Roles are carried by the asymmetry — a soft tinted bubble inset from the end for
   what the reader said, clean typographic flow on the page ground for the answer —
   which is how both reference products do it. The words "You" and "Assistant" stay
   in the DOM for assistive tech and are never drawn. */
.chat-message { display:grid; gap:var(--space-2); }
.chat-who { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.chat-body { display:grid; gap:var(--space-3); min-inline-size:0; max-inline-size:100%; }
.chat-message--user { justify-items:end; }
.chat-message--user .chat-body { max-inline-size:min(86%, 34rem);
  background:color-mix(in oklch, var(--muted) 45%, var(--chat-ground, var(--surface-sheet)));
  border-radius:18px; border-end-end-radius:6px;
  padding:10px var(--space-4); color:var(--ink); }
.chat-message--assistant .chat-text { gap:var(--space-4); }
.chat-text { display:grid; gap:var(--space-3); overflow-wrap:anywhere; }
.chat-meta { font-size:var(--text-micro); line-height:var(--lh-body); color:var(--ink-2); overflow-wrap:anywhere; }
/* Provenance is a footnote, not a preamble: one 11px muted line under the answer,
   whatever order the sidecar's events happen to arrive in (grid `order` keeps it
   last). Anything the reader has to act on gets its own, equally small, marked line. */
.chat-note { order:2; margin:0; font-size:var(--text-micro); line-height:1.5;
  color:var(--ink-2); opacity:.75; overflow-wrap:anywhere; }
.chat-note--warn { order:3; opacity:1;
  border-inline-start:2px solid var(--warning); padding-inline-start:var(--space-2); }
.chat-older { margin:0; text-align:center; font-size:var(--text-micro);
  line-height:1.5; color:var(--ink-2); opacity:.8; }

/* -- rendered markdown (safe subset; nodes are built, never parsed as HTML) -- */
.chat-p { margin:0; white-space:pre-wrap; }
.chat-p--said { white-space:pre-wrap; }
.chat-h { margin:0; color:var(--ink); }
.chat-h--1 { font:var(--fw-bold) var(--text-body)/1.3 var(--font-sans); }
.chat-h--2 { font:var(--fw-bold) var(--text-ui)/1.3 var(--font-sans); }
.chat-h--3 { font:var(--fw-bold) var(--text-caps)/1.3 var(--font-sans); letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--ink-2); }
/* Bullets are the drawer's caveat-list mark: a 5px square in secondary ink, so a
   rendered list looks like the rest of the product rather than a browser default. */
.chat-list { margin:0; display:grid; gap:4px; }
ul.chat-list { padding:0; list-style:none; }
ul.chat-list li { position:relative; padding-inline-start:var(--space-4); }
ul.chat-list li::before { content:""; position:absolute; inset-inline-start:0; inset-block-start:8px;
  inline-size:5px; block-size:5px; background:var(--ink-2); }
ol.chat-list { padding-inline-start:var(--space-5); }
ol.chat-list li::marker { color:var(--ink-2); }
.chat-text strong { font-weight:var(--fw-bold); color:var(--ink-emphasis); }
.chat-text em { font-style:italic; }
.chat-code { font-family:var(--font-mono); font-size:var(--text-xs);
  background:var(--well-ground); border:1px solid var(--border); padding:0 4px; }
.chat-pre { margin:0; overflow-x:auto; background:var(--well-ground);
  border:1px solid var(--border); border-inline-start:3px solid var(--primary); padding:var(--space-3); }
.chat-pre code { font-family:var(--font-mono); font-size:var(--text-xs); line-height:var(--lh-body);
  color:var(--ink); white-space:pre; }
.chat-rule { border:0; border-block-start:1px solid var(--border); margin:0; }
.chat-link, .chat-text a { color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.chat-link:hover, .chat-text a:hover { text-decoration-thickness:2px; }

/* -- tool annotations ----------------------------------------------------
   Mechanics, not conversation: one muted frameless line per call, collapsed,
   set well below the transcript's size and ink. Nothing a tool produced is
   visible until the row is opened, and what opens stays small, monospaced and
   scrollable rather than becoming a second column of prose. The row is only as
   wide as what it says — a full-bleed hover band with the chevron marooned at the
   far edge of a 736px column reads as a table row, not as a quiet aside. */
.tool { font-size:var(--text-xs); color:var(--ink-2); display:grid; justify-items:start; }
/* Consecutive calls read as one stack of mechanics, not as separate paragraphs;
   the message body's own gap is walked back to a hairline between them. */
.tool + .tool { margin-block-start:calc(2px - var(--space-3)); }
.tool__row { display:inline-flex; align-items:center; gap:var(--space-2); max-inline-size:100%;
  background:transparent; border:0; border-radius:8px; padding:3px var(--space-2); min-block-size:0;
  color:var(--ink-2); font:var(--fw-regular) var(--text-xs)/1.5 var(--font-sans); text-align:start;
  margin-inline-start:-6px; }
.tool__row:hover { color:var(--ink); background:color-mix(in oklch, var(--muted) 34%, transparent); }
.tool__row:hover .tool__label { text-decoration:underline; text-underline-offset:2px; }
.tool__mark { flex:none; inline-size:5px; block-size:5px; background:var(--ink-2); opacity:.5; }
.tool--run .tool__mark { opacity:1; }
.tool--warn .tool__mark { background:var(--warning); opacity:1; }
.tool__label { flex:0 1 auto; min-inline-size:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tool__meta { color:var(--ink-2); opacity:.75; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-inline-size:0; }
.tool__chev { flex:none; font-size:var(--text-micro); opacity:.6; }
.tool__body { justify-self:stretch; border:0; border-radius:10px;
  background:color-mix(in oklch, var(--well-ground) 70%, var(--chat-ground, var(--surface-sheet)));
  margin-inline-start:-6px;
  padding:var(--space-3); display:grid; gap:var(--space-2); }
.tool__name { font-family:var(--font-mono); font-size:var(--text-micro); line-height:1.2;
  color:var(--ink-2); opacity:.8; margin:0; overflow-wrap:anywhere; }
.tool__args { margin:0; font-family:var(--font-mono); font-size:var(--text-micro); line-height:1.5;
  color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere; max-block-size:30dvh; overflow:auto; }
.tool__sources { margin:0; padding-inline-start:var(--space-4); display:grid; gap:2px;
  font-size:var(--text-micro); overflow-wrap:anywhere; }
.tool__leads { margin:0; padding:0; list-style:none; display:grid; gap:2px; font-size:var(--text-micro); }
.tool__leads li { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-1) var(--space-3); }
.tool__lead { color:var(--ink-2); overflow-wrap:anywhere; }
.tool__leads .more { min-block-size:0; font-size:var(--text-micro); color:var(--ink-2); }
.tool__leads .more:hover { color:var(--primary); }
/* A batch of calls with no narration between them is ONE of those rows, saying in
   words what the batch did and how many calls it took; the calls themselves are
   nested under it on a hairline rule, each still opening onto its own arguments.
   Structure only — the language, size and ink are the single chip's, unchanged. */
.toolgroup { font-size:var(--text-xs); color:var(--ink-2); display:grid; justify-items:start; }
.tool + .toolgroup, .toolgroup + .tool, .toolgroup + .toolgroup { margin-block-start:calc(2px - var(--space-3)); }
.toolgroup__body { justify-self:stretch; display:grid; justify-items:start;
  margin-inline-start:var(--space-2); padding-inline-start:var(--space-3);
  border-inline-start:1px solid var(--border); }
.toolgroup__body > .tool:first-child { margin-block-start:2px; }
.toolgroup--run > .tool__row .tool__mark { opacity:1; }
.toolgroup--warn > .tool__row .tool__mark { background:var(--warning); opacity:1; }
.toolgroup__note { margin:0; font-size:var(--text-micro); color:var(--ink-2); opacity:.75; }
@media (prefers-reduced-motion: no-preference) {
  .tool--run .tool__mark, .toolgroup--run > .tool__row .tool__mark {
    animation: chat-tool-pulse 1.4s ease-in-out infinite; }
  @keyframes chat-tool-pulse { 0%, 100% { opacity:1; } 50% { opacity:.25; } }
}

/* -- referenced leads, notes and proposals ------------------------------- */
.chat-ref { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-2) var(--space-3);
  border-inline-start:2px solid var(--border-strong); padding-inline-start:var(--space-3);
  font-size:var(--text-xs); overflow-wrap:anywhere; }
.chat-ref__t { color:var(--ink); }
.chat-card { border:1px solid var(--border); background:color-mix(in oklch, var(--surface-sheet) 92%, var(--background));
  padding:var(--space-3) var(--space-4); display:grid; gap:var(--space-2); overflow-wrap:anywhere; }
.chat-card--act { border-color:var(--border-strong); }
.chat-card__t { margin:0; font:var(--fw-bold) var(--text-caps)/1.3 var(--font-sans);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--ink); }
.chat-card__row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
/* The shell's base layer strips button frames, so the accept action states itself
   here on the action ground; cancel stays the drawer's quiet text button. */
.chat-card__row .btn--secondary { background:var(--primary); color:var(--primary-foreground);
  border:1px solid transparent; font:var(--fw-bold) var(--text-caps)/1 var(--font-sans);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; padding:10px 12px; min-block-size:36px; }
.chat-card__row .btn--secondary:hover { background:color-mix(in oklch, var(--primary) 88%, black); }
.chat-card__row .btn--secondary:disabled { background:color-mix(in oklch, var(--muted) 60%, var(--surface-sheet));
  color:var(--ink-2); border-color:var(--border); }
.chat-card__row .more { min-block-size:36px; padding-inline:var(--space-2); }
.chat-card__row .more:disabled { color:var(--ink-2); }

/* -- foot: jump affordance, status line and composer ---------------------- */
.chat-foot { flex:none; position:relative; border-block-start:1px solid var(--border);
  padding:var(--space-3) var(--space-5) max(var(--space-4), env(safe-area-inset-bottom));
  background:var(--surface-sheet); }
.chat-jump { position:absolute; inset-block-end:calc(100% + var(--space-2)); inset-inline:0;
  margin-inline:auto; inline-size:max-content; background:var(--surface-sheet);
  border:1px solid var(--border-strong); color:var(--primary); min-block-size:32px; padding:6px var(--space-3);
  font:var(--fw-bold) var(--text-micro)/1 var(--font-sans); letter-spacing:var(--tracking-caps);
  text-transform:uppercase; }
.chat-jump[hidden] { display:none; }
.chat-jump:hover { background:color-mix(in oklch, var(--primary) 8%, var(--surface-sheet)); }
.chat-status { font-size:var(--text-micro); line-height:1.4; color:var(--ink-2); margin:0 0 var(--space-2);
  min-block-size:1.4em; overflow-wrap:anywhere; }
/* The composer is one soft surface that floats on the panel's sill: the textarea
   is borderless inside it and the send control is docked in its bottom-inline-end
   corner, the way Claude's and ChatGPT's composers are built. It is deliberately
   the ONE rounded element in a squared product — the radius is what says "type
   here" without a second frame, a label or a standing hint — and every colour is
   still a site token. */
.chat-field { --chat-radius:14px;
  position:relative; display:grid; gap:2px;
  border:1px solid var(--input); border-radius:var(--chat-radius);
  background:var(--surface-sheet); padding:2px 4px 6px;
  transition:border-color var(--dur-small, 200ms) var(--ease-std, ease); }
/* The rounded surface cannot wear the square outline ring, so focus is stated on
   the frame itself plus one soft halo — still a visible, non-colour-only change. */
.chat-field:focus-within { border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--ring) 18%, transparent); }
.chat-field textarea { inline-size:100%; background:transparent; border:0; resize:none;
  padding:10px 10px 0; font:inherit; font-size:var(--text-ui); line-height:var(--lh-body);
  color:var(--ink); min-block-size:40px; }
.chat-field textarea::placeholder { color:var(--ink-2); }
.chat-field textarea:focus-visible { outline:none; }
.chat-field__row { display:flex; align-items:center; justify-content:flex-end;
  gap:var(--space-2); padding-inline:6px; }
/* Claude and ChatGPT show no standing keyboard hint; the sentence stays for
   assistive tech (the textarea points at it) and leaves the eye alone. */
.chat-hint { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.chat-send { flex:none; inline-size:32px; block-size:32px; min-block-size:32px; padding:0;
  display:grid; place-items:center; border:1px solid transparent; border-radius:var(--radius-pill);
  background:var(--primary); color:var(--primary-foreground); font-size:15px; line-height:1;
  transition:background-color var(--dur-micro, 120ms) var(--ease-std, ease); }
.chat-send:hover { background:color-mix(in oklch, var(--primary) 88%, black); }
.chat-send:active { background:color-mix(in oklch, var(--primary) 78%, black); }
/* Empty composer: present but plainly inert, never a live-looking button. */
.chat-send:disabled { background:color-mix(in oklch, var(--muted) 45%, var(--surface-sheet));
  color:var(--ink-2); border-color:var(--border); }
.chat-send--stop { background:var(--ink); color:var(--surface-sheet); border-color:transparent;
  font-size:11px; }
.chat-send--stop:hover { background:color-mix(in oklch, var(--ink) 82%, var(--surface-sheet)); }

.chat-scrim { position:fixed; inset:0; background:var(--scrim, rgba(0,0,0,.4)); z-index:var(--z-scrim); }
@media (min-width:1440px) {
  #chatPanel { position:sticky; inset-block-start:0; inline-size:100%;
    max-inline-size:var(--drawer-inline-size); z-index:var(--z-drawer); }
}
@media (min-width:1440px) and (max-width:1679px) { #chatPanel { max-inline-size:var(--drawer-inline-size-mid); } }
@media (max-width:1099px) {
  #chatPanel { inline-size:100%; min-inline-size:0; border-inline-start:0; }
  .chat-log { padding:var(--space-4); }
  .chat-foot { padding-inline:var(--space-4); }
  /* Touch target: the icon keeps its size, the button grows around it. */
  .chat-send { inline-size:40px; block-size:40px; min-block-size:40px; }
}
@media (forced-colors: active) {
  .tool__row, .tool__body, .chat-card, .chat-field, .chat-chip { border-color:CanvasText; }
  .tool__mark { background:CanvasText; }
  .toolgroup__body { border-inline-start-color:CanvasText; }
}


/* ---------------------------------------------------------------------------
   CHAT MODE. The masthead stays; below it the screen is three columns, left to
   right: the recent-chats rail, the assistant's reading column, and the LEADS
   PANEL (the dashboard's own filter bar, lead detail and lead list). Nothing here
   is a second copy of anything — #filters, #list and #drawer are the same
   elements, re-parented and handed back — and both dividers are real, dragged,
   remembered, and drawn with a grip so neither reads as fixed chrome.
   Rounded corners inside these surfaces are deliberate (owner instruction: this
   emulates Claude/ChatGPT); the squared house style still owns the dashboard.
   Offered only from 1440px up — the width at which the panel is already docked
   rather than a modal sheet, and the only width where three columns have room.
   ------------------------------------------------------------------------ */
body[data-chat-mode="on"] { position:fixed; inset:0; overflow:hidden; }
body[data-chat-mode="on"] #page { display:none; }
/* One definite row, not an implicit auto one: the panel's percentage split can
   only resolve against a height the grid really has. The docked drawer track is
   retired here — the lead detail lives in the leads panel now. */
body[data-chat-mode="on"] .shell,
body[data-chat-mode="on"] .shell[data-drawer="open"] {
  block-size:calc(100dvh - var(--chat-top, 88px));
  grid-template-columns:minmax(0, 1fr); grid-template-areas:"page";
  grid-template-rows:minmax(0, 100%); overflow:hidden; }
body[data-chat-mode="on"] #drawerHost { display:none; }
#chatStage { grid-area:page; min-inline-size:0; block-size:100%; overflow:hidden;
  display:flex; align-items:stretch; background:var(--background);
  --chat-r:14px; --chat-r-sm:8px; --chat-leads:430px; }

/* -- the reading column --------------------------------------------------- */
#chatStage > #chatPanel { position:static; flex:1 1 auto; min-inline-size:0;
  inline-size:auto; max-inline-size:none; block-size:100%; margin:0;
  border-inline-start:0; z-index:auto;
  --chat-ground:var(--background); background:var(--background); }
/* A comfortable measure, centred, with the head and the composer set to the same
   width so the column reads as one thing rather than as a panel with a page in it. */
/* On the page column a conversation starts at the top and grows down, the way both
   references read; the narrow docked panel keeps its bottom-anchored sill, where a
   short exchange floating at the top of a tall thin box looked abandoned. */
#chatStage > #chatPanel .chat-log { max-inline-size:46rem; inline-size:100%;
  margin-inline:auto; font-size:var(--text-body); padding:var(--space-6);
  justify-content:flex-start; }
#chatStage > #chatPanel .chat-head { background:transparent; border-block-end:1px solid var(--border);
  padding-inline:var(--space-5); }
#chatStage > #chatPanel .chat-head__bar { max-inline-size:46rem; margin-inline:auto; }
#chatStage > #chatPanel .chat-foot { background:transparent; border-block-start:0;
  padding-inline:var(--space-5); }
#chatStage > #chatPanel .chat-status { max-inline-size:46rem; margin:0 auto var(--space-2); }
#chatStage > #chatPanel .chat-field { max-inline-size:46rem; margin-inline:auto;
  background:var(--surface-sheet); }
/* The rail already leads with New chat; the head does not offer it twice. */
body[data-chat-mode="on"] .chat-act--new { display:none; }

/* -- recent chats rail ----------------------------------------------------
   Claude's position and Claude's manners: New chat at the top, a quiet rounded
   search under it, then rows that are soft pills rather than ruled list items.
   Every cell is written with textContent — a stored title is untrusted text. */
#chatHistory { flex:none; inline-size:268px; min-inline-size:0; block-size:100%;
  display:flex; flex-direction:column; padding:var(--space-3) 10px;
  background:color-mix(in oklch, var(--muted) 26%, var(--background));
  border-inline-end:1px solid var(--border); }
.chat-hhead { flex:none; display:flex; align-items:center; gap:6px;
  margin-block-end:var(--space-3); }
.chat-hcollapse { flex:none; inline-size:32px; block-size:32px; min-block-size:32px; padding:0;
  display:grid; place-items:center; background:transparent; border:0;
  border-radius:var(--chat-r-sm); color:var(--ink-2); font-size:13px; line-height:1; }
.chat-hcollapse:hover { background:color-mix(in oklch, var(--muted) 60%, transparent); color:var(--ink); }
.chat-hnew { flex:1 1 auto; min-inline-size:0; display:flex; align-items:center; gap:8px;
  min-block-size:34px; padding:0 10px; text-align:start;
  border:1px solid color-mix(in oklch, var(--border-strong) 65%, transparent);
  border-radius:var(--chat-r-sm); background:var(--surface-sheet); color:var(--ink);
  font:var(--fw-bold) var(--text-xs)/1 var(--font-sans); }
.chat-hnew:hover { background:color-mix(in oklch, var(--primary) 7%, var(--surface-sheet));
  border-color:var(--border-strong); }
.chat-hnew__i { flex:none; font-size:15px; line-height:1; color:var(--primary); }
.chat-hnew__t { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-hsearch { flex:none; position:relative; margin-block-end:var(--space-2); }
/* A magnifier drawn from a ring and a stroke — no icon font, no asset. */
.chat-glass { position:relative; display:block; inline-size:10px; block-size:10px;
  border:1.5px solid currentColor; border-radius:50%; opacity:.85; }
.chat-glass::after { content:""; position:absolute; inset-block-start:7px; inset-inline-start:7px;
  inline-size:5px; block-size:1.5px; border-radius:1px; background:currentColor;
  transform:rotate(45deg); transform-origin:0 50%; }
.chat-hsearch .chat-glass { position:absolute; inset-inline-start:10px; inset-block-start:50%;
  margin-block-start:-6px; color:var(--ink-2); pointer-events:none; }
.chat-hfind { display:none; flex:none; inline-size:34px; block-size:34px; min-block-size:34px;
  padding:0; place-items:center; background:transparent; border:0;
  border-radius:var(--chat-r-sm); color:var(--ink-2); }
.chat-hfind:hover { background:color-mix(in oklch, var(--muted) 60%, transparent); color:var(--ink); }
#chatStage[data-history="off"] .chat-hfind { display:grid; }
.chat-hsearch input { inline-size:100%; min-inline-size:0; min-block-size:32px;
  padding:5px 8px; padding-inline-start:30px;
  border:1px solid transparent; border-radius:var(--chat-r-sm);
  background:color-mix(in oklch, var(--muted) 50%, var(--background));
  font:inherit; font-size:var(--text-xs); line-height:var(--lh-body); color:var(--ink); }
.chat-hsearch input::placeholder { color:var(--ink-2); }
.chat-hsearch input:focus { outline:none; border-color:var(--ring); background:var(--surface-sheet);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--ring) 16%, transparent); }
.chat-hlist { flex:1 1 auto; min-block-size:0; overflow:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:1px; padding-block-end:var(--space-2);
  scrollbar-width:thin; }
.chat-hrow { display:block; inline-size:100%; text-align:start; background:transparent;
  border:0; border-radius:var(--chat-r-sm); padding:6px 10px; min-block-size:0;
  color:var(--ink-2);
  transition:background-color var(--dur-micro, 120ms) var(--ease-std, ease); }
.chat-hrow__line { display:flex; align-items:baseline; gap:var(--space-2); min-inline-size:0; }
.chat-hrow__t { flex:1 1 auto; min-inline-size:0; overflow:hidden; white-space:nowrap;
  text-overflow:ellipsis; color:var(--ink); font-size:13px; line-height:1.6; }
.chat-hrow__d { flex:none; color:var(--ink-2); font-size:var(--text-micro); line-height:1.6;
  white-space:nowrap; opacity:.7; }
.chat-hrow:hover { background:color-mix(in oklch, var(--muted) 42%, transparent); }
.chat-hrow:hover .chat-hrow__d { opacity:1; }
.chat-hrow[aria-current="true"] { background:color-mix(in oklch, var(--primary) 20%, var(--surface-sheet)); }
.chat-hrow[aria-current="true"] .chat-hrow__t { color:var(--ink-emphasis); font-weight:var(--fw-bold); }
.chat-hrow:focus-visible { outline:2px solid var(--ring); outline-offset:-2px; }
/* A search hit says which line matched, clamped to two so the list stays a list. */
.chat-hrow__s { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  color:var(--ink-2); font-size:var(--text-micro); line-height:1.45;
  margin-block-start:1px; overflow:hidden; overflow-wrap:anywhere; }
.chat-hnote { flex:none; margin:var(--space-1) 0 0; padding:var(--space-2) 10px 0;
  border-block-start:1px solid var(--border);
  font-size:var(--text-micro); line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere; }
.chat-hnote[hidden] { display:none; }
/* Collapsed: a clean strip that still offers both of its standing actions. */
#chatStage[data-history="off"] > #chatHistory { inline-size:52px; padding-inline:8px; }
#chatStage[data-history="off"] .chat-hhead { flex-direction:column; gap:4px; margin-block-end:0; }
#chatStage[data-history="off"] .chat-hnew { flex:none; inline-size:34px; padding:0;
  justify-content:center; }
#chatStage[data-history="off"] .chat-hnew__t,
#chatStage[data-history="off"] .chat-hsearch,
#chatStage[data-history="off"] .chat-hlist,
#chatStage[data-history="off"] .chat-hnote { display:none; }
@media (forced-colors: active) {
  .chat-hrow[aria-current="true"] { outline:2px solid Highlight; }
}

/* -- the leads panel (right) ---------------------------------------------- */
/* An explicit minmax(0, 1fr) column, not the implicit auto one: a grid item's
   automatic minimum is its min-content width, and the filter bar's widest control
   or the table's widest column would otherwise push the whole panel past the width
   the reader dragged for it. */
#chatSide { flex:0 0 var(--chat-leads); inline-size:var(--chat-leads);
  min-inline-size:0; block-size:100%; min-block-size:0;
  display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr);
  background:var(--surface-sheet); border-inline-start:1px solid var(--border); }

/* -- the filter summary ---------------------------------------------------
   At rest this is one quiet line: the lead search, a Filters button carrying the
   number of filters that are on, and the count. Active filters add a wrapping row
   of removable chips under it. The ten controls are one click away in the editor
   below, which is the dashboard's own bar — there is still exactly one of it.
   No padding on the header itself: the editor is positioned against this box and
   must open at the full width of the panel. */
.chat-fhead { position:relative; min-inline-size:0;
  border-block-end:1px solid var(--border); }
.chat-fsum { display:flex; align-items:center; gap:6px; min-inline-size:0;
  padding:var(--space-2) var(--space-3); }
.chat-fq { position:relative; flex:1 1 auto; min-inline-size:0; }
.chat-fq .chat-glass { position:absolute; inset-inline-start:9px; inset-block-start:50%;
  margin-block-start:-6px; color:var(--ink-2); pointer-events:none; }
.chat-fq input { inline-size:100%; min-inline-size:0; min-block-size:30px;
  padding:4px 8px; padding-inline-start:28px;
  border:1px solid transparent; border-radius:var(--chat-r-sm);
  background:color-mix(in oklch, var(--muted) 50%, var(--background));
  font:inherit; font-size:var(--text-xs); line-height:var(--lh-body); color:var(--ink); }
.chat-fq input::placeholder { color:var(--ink-2); }
.chat-fq input:focus { outline:none; border-color:var(--ring); background:var(--surface-sheet);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--ring) 16%, transparent); }
.chat-fbtn { flex:none; display:flex; align-items:center; gap:5px;
  min-block-size:30px; padding:4px 9px;
  border:1px solid color-mix(in oklch, var(--border-strong) 55%, transparent);
  border-radius:var(--chat-r-sm); background:transparent; color:var(--ink-2);
  font:var(--fw-bold) var(--text-xs)/1 var(--font-sans); }
.chat-fbtn:hover { background:color-mix(in oklch, var(--muted) 45%, transparent); color:var(--ink); }
.chat-fbtn[aria-expanded="true"] { background:var(--surface-sheet); color:var(--ink);
  border-color:var(--border-strong); }
.chat-fbtn__n { display:inline-grid; place-items:center; min-inline-size:16px; block-size:16px;
  padding-inline:4px; border-radius:999px; background:var(--primary);
  color:var(--primary-foreground); font-size:var(--text-micro); line-height:1; }
.chat-fbtn__n[hidden] { display:none; }
.chat-fcount { flex:none; color:var(--ink-2); font-size:var(--text-micro); line-height:1.6;
  white-space:nowrap; }
.chat-fchips { display:flex; flex-wrap:wrap; gap:4px; min-inline-size:0;
  padding:0 var(--space-3) var(--space-2); }
.chat-fchips[hidden] { display:none; }
/* The bar's own chip recipe, said softly: no caps, no hard frame, a rounded pill
   that reads as a removable word rather than a second control. */
.chat-fchip { display:inline-flex; align-items:center; gap:4px; max-inline-size:100%;
  padding:2px 4px 2px 8px; border-radius:999px;
  background:color-mix(in oklch, var(--muted) 55%, var(--background));
  border:1px solid color-mix(in oklch, var(--border) 70%, transparent);
  color:var(--ink-2); font-size:var(--text-micro); line-height:1.6; }
.chat-fchip__k { font-weight:var(--fw-bold); white-space:nowrap; }
.chat-fchip__v { min-inline-size:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  color:var(--ink); }
.chat-fchip__x { flex:none; inline-size:16px; block-size:16px; min-block-size:0; padding:0;
  display:grid; place-items:center; border:0; border-radius:999px; background:transparent;
  color:var(--ink-2); font-size:9px; line-height:1; }
.chat-fchip__x:hover { background:color-mix(in oklch, var(--primary) 12%, transparent);
  color:var(--primary); }

/* The editor: the dashboard's own bar, opened over the panel at its full width —
   elevated, rounded at the bottom corners like the rest of this mode, and out of
   flow so the list keeps the height the resting line gave it back. Height is
   deliberately unbounded: a control's own popover (Markets, Dates) must be able to
   hang past the sheet rather than be clipped inside it. */
/* The list's own sticky head is on the same ladder (--z-thead) and would otherwise
   paint over the sheet's first row; the bar and anything the bar opens outranks it,
   here exactly as on the page. */
#chatFilters { position:absolute; inset-inline:0; inset-block-start:100%;
  z-index:calc(var(--z-sticky-filters) + 1);
  min-inline-size:0; overflow:visible;
  background:var(--surface-sheet);
  border-block-end:1px solid var(--border-strong);
  border-end-start-radius:var(--chat-r); border-end-end-radius:var(--chat-r);
  box-shadow:0 18px 34px -20px color-mix(in oklch, var(--ink) 55%, transparent),
    0 2px 6px -4px color-mix(in oklch, var(--ink) 40%, transparent);
  animation:chatSheet var(--dur-small, 180ms) var(--ease-std, ease) both; }
#chatFilters[hidden] { display:none; }
@keyframes chatSheet { from { opacity:0; transform:translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { #chatFilters { animation:none; } }
/* The bar is the dashboard's own element, at panel width: not window-sticky here
   (the list scrolls inside its own pane below), wrapping to as many rows as it
   needs, and tightened so two controls sit on a line. */
body[data-chat-mode="on"] #chatFilters > .filters,
body[data-chat-mode="on"] #chatFilters > .filters.is-pinned {
  position:static; z-index:auto; background:transparent;
  padding:var(--space-3); border-block-end:0; }
/* The controls keep a shrink basis rather than a column count, so the bar packs
   three to a line at the panel's default width and opens up to four or five as the
   reader drags the panel wider — the same deal the full-width bar makes. */
body[data-chat-mode="on"] #chatFilters .filters__grid { gap:5px 6px; align-items:end; }
body[data-chat-mode="on"] #chatFilters .field { flex:1 1 116px; max-inline-size:none; gap:2px; }
body[data-chat-mode="on"] #chatFilters .field--q { flex:1 1 100%; }
body[data-chat-mode="on"] #chatFilters .field--view { flex:0 1 92px; }
body[data-chat-mode="on"] #chatFilters .field--star { flex:0 0 auto; }
body[data-chat-mode="on"] #chatFilters .field > label { font-size:10px; line-height:1; }
body[data-chat-mode="on"] #chatFilters .field input,
body[data-chat-mode="on"] #chatFilters .field select,
body[data-chat-mode="on"] #chatFilters .market-trigger { min-block-size:30px; padding:4px 6px;
  font-size:var(--text-xs); }
body[data-chat-mode="on"] #chatFilters .field--check { min-block-size:30px; }
body[data-chat-mode="on"] #chatFilters .star-button { min-block-size:30px; }
body[data-chat-mode="on"] #chatFilters .filters__grid > .btn--ghost { min-block-size:30px;
  padding-inline:var(--space-2); }
body[data-chat-mode="on"] #chatFilters .filters__meta { margin-block-start:var(--space-2);
  min-block-size:0; gap:var(--space-1) var(--space-2); }
body[data-chat-mode="on"] #chatFilters .sortread { display:none; }
body[data-chat-mode="on"] #chatFilters .count { font-size:var(--text-xs); }

#chatPanes { min-block-size:0; min-inline-size:0; display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:var(--chat-split, 45%) 7px minmax(0, 1fr); }
/* No lead selected: the list owns the whole pane rather than sitting under a void. */
#chatSide[data-detail="off"] #chatPanes { grid-template-rows:minmax(0, 1fr); }
#chatSide[data-detail="off"] #chatDetail, #chatSide[data-detail="off"] #chatSplit { display:none; }
#chatDetail { min-block-size:0; min-inline-size:0; overflow:hidden; display:flex; }
#chatDetail > #drawer { position:static; inline-size:100%; min-inline-size:0; max-inline-size:none;
  block-size:100%; border-inline-start:0; z-index:auto; }
/* A flex item's automatic minimum is its content height, so the drawer's own body
   grew past the pane instead of scrolling inside it and the last section was cut. */
#chatDetail > #drawer > .drawer__body { min-block-size:0; }
#chatListPane { min-block-size:0; min-inline-size:0; display:flex; flex-direction:column; }
/* The list scrolls inside its own pane, so its sticky head docks to the pane. */
.chat-listscroll { flex:1 1 auto; min-block-size:0; overflow:auto; overscroll-behavior:contain; }
body[data-chat-mode="on"] #list { margin:0; }
body[data-chat-mode="on"] #listHead { display:none; }
body[data-chat-mode="on"] .tablebox { border-inline:0; border-block-start:0; }
/* The 620px floor is a page-width table's floor. In the panel the column ladder
   has already traded the table down to what fits, so holding that floor here only
   pushed the last column off the edge behind a sideways scroll. */
body[data-chat-mode="on"] .chat-listscroll table.leads { min-inline-size:0; }

/* -- the two dividers -----------------------------------------------------
   Both are dragged, both remember where they were put, and both SAY so: a
   three-dot grip on a hairline, a wider invisible target than the rule it draws,
   the matching resize cursor, and a colour change under the pointer. */
#chatSplit, #chatVSplit { position:relative; display:grid; place-items:center;
  background:var(--border); touch-action:none;
  transition:background-color var(--dur-micro, 120ms) var(--ease-std, ease); }
#chatSplit { block-size:7px; cursor:row-resize; }
#chatVSplit { flex:0 0 7px; inline-size:7px; block-size:100%; cursor:col-resize; }
#chatSplit::after { content:""; position:absolute; inset-inline:0; inset-block:-4px; }
#chatVSplit::after { content:""; position:absolute; inset-block:0; inset-inline:-4px; }
.chat-grip { inline-size:3px; block-size:3px; border-radius:50%; background:var(--ink-2); }
#chatSplit .chat-grip { box-shadow:-7px 0 0 var(--ink-2), 7px 0 0 var(--ink-2); }
#chatVSplit .chat-grip { box-shadow:0 -7px 0 var(--ink-2), 0 7px 0 var(--ink-2); }
/* Under the pointer the rule becomes the action ground itself. (A color-mix
   between navy and the warm hairline travels through green in oklch; it is the
   brand colour or nothing.) */
#chatSplit:hover, #chatSide[data-dragging] #chatSplit,
#chatVSplit:hover, #chatStage[data-dragging] > #chatVSplit { background:var(--primary); }
#chatSplit:hover .chat-grip, #chatSide[data-dragging] #chatSplit .chat-grip {
  background:var(--primary-foreground);
  box-shadow:-7px 0 0 var(--primary-foreground), 7px 0 0 var(--primary-foreground); }
#chatVSplit:hover .chat-grip, #chatStage[data-dragging] > #chatVSplit .chat-grip {
  background:var(--primary-foreground);
  box-shadow:0 -7px 0 var(--primary-foreground), 0 7px 0 var(--primary-foreground); }
#chatSplit:focus-visible, #chatVSplit:focus-visible { outline:2px solid var(--ring); outline-offset:-2px; }
@media (forced-colors: active) {
  #chatSplit, #chatVSplit { background:CanvasText; }
  .chat-grip { background:Canvas; box-shadow:none; }
}

/* The detail pane keeps the drawer's own head; the one thing it adds is a plain
   way to say "this lead belongs in the conversation" without re-clicking the row. */
.chat-attach { margin-inline-start:var(--space-3); border:1px solid var(--border-strong);
  background:transparent; color:var(--primary); min-block-size:32px; padding:8px 10px;
  font:var(--fw-bold) var(--text-micro)/1 var(--font-sans); letter-spacing:var(--tracking-caps);
  text-transform:uppercase; }
.chat-attach[aria-pressed="true"] { background:var(--accent); color:var(--accent-foreground);
  border-color:var(--border); }
.chat-attach:hover { background:color-mix(in oklch, var(--primary) 8%, var(--surface-sheet)); }