/* Scoping Assistant 2.0 — design tokens (#66, ADR 0015 decision 9).
 *
 * Every value below is lifted from the approved prototype,
 * docs/design/insight-prototype.html (committed via DesignSync from Claude
 * Design project 3ea6f2bc). The mapping notes give the prototype evidence
 * for each token: usage counts come from a survey of the prototype's inline
 * styles (2026-09-04). Change the prototype first, then this file — never
 * the other way around.
 *
 * Loaded only when INSIGHT_MODE_ENABLED; legacy views never see these.
 * All tokens are namespaced --ins-* to stay out of style.css's way.
 */

:root, body.theme-dark {
  /* #555 (ADR 0037 D7): an alias resolves WHERE IT IS DECLARED, so the dark block (body.theme-dark in
     tokens_mockup.css) must re-declare every alias too, or <body> would inherit the finished light colours. */
  /* ADR 0037 (#454): every colour, radius and shadow here is an ALIAS of static/tokens_mockup.css
     (Per's mockup, verbatim; loaded before this file). Never type a value here: add an alias. */
  /* --- the mockup's semantics the app had no token for (appendix A) ----- */
  --ins-stat: var(--stat);           /* stat values (teal)                    */
  --ins-accent-h: var(--accent-h);   /* panel titles                          */
  --ins-tint: var(--tint);           /* tiles inside a white card             */
  --ins-chart-grid: var(--chart-grid);
  --ins-chart-tx: var(--chart-tx);
  --ins-track: var(--track);         /* bar tracks, future periods            */
  --ins-focus: var(--focus);         /* focus ring halo                       */
  --ins-link: var(--link);           /* links in text                         */
  --ins-link-hover: var(--link-h);
  --ins-ok-bg: var(--ok-bg); --ins-ok-line: var(--ok-line); --ins-ok-tx: var(--ok-tx);
  --ins-warn-line: var(--warn-line); --ins-warn-tx: var(--warn-tx);
  --ins-info-bg: var(--info-bg); --ins-info-line: var(--info-line); --ins-info-tx: var(--info-tx);
  --ins-sky-bg: var(--sky-bg); --ins-sky-line: var(--sky-line); --ins-sky-tx: var(--sky-tx);
  --ins-berry-bg: var(--berry-bg); --ins-berry-line: var(--berry-line); --ins-berry-tx: var(--berry-tx);
  --ins-flag: var(--berry);          /* #590: the feature-flag glyph ⚑ (the mockup's only red; a brand constant, same in both themes) */
  --ins-neutral-bg: var(--neutral-bg); --ins-neutral-line: var(--neutral-line); --ins-neutral-tx: var(--neutral-tx);
  /* #458 (S5): the rest of the shell. The mockup's dark top bar + its controls (the Rundown toolbar, dark tooltips) */
  --ins-topbar: var(--topbar); --ins-topbar-line: var(--topbar-line); --ins-topbar-div: var(--topbar-div);
  --ins-ctl: var(--ctl); --ins-ctl-line: var(--ctl-line); --ins-ctl-tx: var(--ctl-tx);
  --ins-border-soft: var(--line-3);  /* the faintest row rule (tables)      */
  --ins-on-accent: var(--surface);   /* text on a filled accent (white). The mockup writes #fff for it in
                                        both themes (.pf-mark, .tl .q); dark mode (#555) points this at #fff */
  --ins-on-status: var(--surface);   /* #555: text on a --ok-tx / --warn-tx FILL; dark = --bg (Per's dark status colours are light) */
  --ins-on-slate: var(--onyx);       /* #566: text on a --slate fill (slate is light in both themes: the mockup's #0B2530 on .seg.past) */
  --ins-text-shadow-on-accent: 0 0 3px var(--onyx);          /* #566: the mockup's ".tl .q" glow (its rgba(0,0,0,.45), from a token: D3), the today marker paints over it */
  --ins-text-shadow-on-slate: 0 0 3px var(--ins-on-accent);  /* #566: ".seg.past .q" — white in both themes */
  --ins-brand-text: var(--sapphire); /* #555: sapphire AS TEXT (links, active nav, labels). Fills keep --ins-brand; dark = --info-tx,
                                        Per's dark sapphire text, because #4D4DF0 cannot reach 4.5:1 on any dark background */
  --ins-brand-text-hover: var(--info-tx);
  --ins-chat-text: var(--sapphire);  /* #555: the chat accent as text (links, notes, the on-state of a mode button) */
  --ins-logo-plate: transparent;     /* #555: behind customer logos made for a white background; dark = #fff */
  /* D4: Inter, self-hosted (static/fonts/inter.css); the system sans while it loads or if it can't */
  --ins-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ins-fw-body: 300;                /* the mockup's body weight              */
  /* #131: the reading face for long-form prose (chat answers, composed ROM
     sections) — a system serif stack, no web font. Everything else (nav,
     buttons, labels, tables, evidence rows) stays on the app face. */
  --ins-font-reading: "Charter", "Georgia", "Iowan Old Style", "Source Serif Pro", serif;
  /* --- Surfaces (slate ramp; counts from the prototype survey) --------- */
  --ins-bg: var(--bg);           /* page background                         */
  --ins-surface: var(--surface); /* cards, header, nav                      */
  --ins-surface-muted: var(--tint); /* inset panels; tiles sit on it inside a white card (D5) */
  --ins-border: var(--line);     /* primary hairline                        */
  --ins-border-alt: var(--line-2); /* header/nav hairline                   */
  --ins-divider: var(--line-2);  /* stronger rules (the mockup's line-3 is lighter than line) */

  /* --- Text (slate ramp) ----------------------------------------------- */
  --ins-text: var(--tx);         /* one text colour; weight carries emphasis */
  --ins-text-strong: var(--tx);
  --ins-text-strongest: var(--tx);
  --ins-text-secondary: var(--muted);
  --ins-text-muted: var(--muted); /* metadata, timestamps                   */
  --ins-text-faint: var(--muted-2); /* section labels, placeholders (D8)   */

  /* --- Brand + accents -------------------------------------------------- */
  --ins-brand: var(--sapphire);  /* links, active nav, focus                */
  --ins-brand-hover: var(--info-tx);
  --ins-brand-bg: var(--hl);     /* selected/active tint                    */
  --ins-strip: 56px;            /* #136: the folded column's width in the Chat view */
  --ins-included: var(--ok-tx);  /* good                                   */
  --ins-included-bg: var(--ok-bg);
  --ins-included-chip: var(--ok-line);
  --ins-warn: var(--warn-tx);    /* watch                                  */
  --ins-warn-bg: var(--warn-bg);
  --ins-warn-chip: var(--warn-line);
  --ins-open: var(--sky-tx);     /* open question                          */
  --ins-open-strong: var(--cerulean);
  --ins-unread: var(--sky);      /* #144: the Chats list's "new answer" dot. Anton 09-25: never a warning colour, so
                                   not appendix A's --berry (the problem colour); the mockup has no soft orange */
  --ins-latest: var(--ins-unread); /* #493: the Latest view's favourite cards — the same "new" mark */
  --ins-chat: var(--sapphire);   /* chat accent (send button); ADR 0037 appendix A said surface: it is an accent */
  --ins-chat-alt: var(--info-tx); /* chat gradient partner / via-chat badge */
  --ins-chat-bg: var(--info-bg); /* chat bubble tint                        */
  /* Gong deep-link pill (#30): ADR 0037 appendix A moves it to the info-blue set (no purple). */
  --ins-gong: var(--info-tx);    /* pill text                                */
  --ins-gong-bg: var(--info-bg); /* pill fill                                */
  --ins-gong-border: var(--info-line); /* pill border                       */
  --ins-gong-bg-hover: var(--hl); /* pill fill, hover                        */
  --ins-gong-border-hover: var(--sapphire);

  /* --- Type scale (px, from the prototype's font-size survey) ----------- */
  --ins-fs-micro: 10px;         /* chip fine print                          */
  --ins-fs-label: 11px;         /* uppercase section labels (29 uses)      */
  --ins-fs-meta: 12px;          /* metadata rows (22 uses)                 */
  --ins-fs-body: 13px;          /* default body/insight text (20 uses)     */
  --ins-fs-emph: 14px;          /* emphasized body (10 uses)               */
  --ins-fs-subtitle: 15px;      /* card subtitles (3 uses)                 */
  --ins-fs-title: 18px;         /* view titles                              */
  /* #378: one weight for every heading and section label (pages without this file use the 700 fallback) */
  --ins-fw-heading: 700;
  --ins-fs-display: 24px;       /* summary numerals (22–24px singletons)   */

  /* --- Shape ------------------------------------------------------------ */
  --ins-radius-sm: 6px;         /* small controls (4 uses)                 */
  --ins-radius: var(--r);        /* the mockup's 10px                       */
  --ins-radius-lg: 14px;         /* modals (appendix A: an app value)       */
  --ins-radius-pill: 999px;     /* chips, pills (7 uses)                   */

  /* --- Elevation (the two shadows the prototype uses) ------------------- */
  --ins-shadow-header: var(--shadow);
  --ins-shadow-card: var(--shadow);
  --ins-shadow-pop: var(--shadow-lg); /* popovers */

  /* --- Layout ------------------------------------------------------------ */
  --ins-nav-width: 250px;       /* prototype left nav                       */
}

/* === Signals list (#67) — the ROM Summary curation panel ==================
 * Prototype reference: the "Signals" view of insight-prototype.html
 * (section groups → insight rows with evidence + include toggle).
 */

.ins-signals {
  background: var(--ins-surface);
  border: 1px solid var(--ins-border);
  border-radius: var(--ins-radius-lg);
  box-shadow: var(--ins-shadow-card);
  padding: 18px 20px;
  margin-bottom: 28px;
}

.ins-signals-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ins-signals-head h2 {
  font-size: var(--ins-fs-title);
  color: var(--ins-text-strongest);
  margin: 0;
}

/* One button shape; the modifiers below only change accent and size.
   The disabled treatment in particular was written three times. */
.ins-btn {
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--ins-radius);
  border: 1px solid transparent;
  background: var(--ins-surface);
}
.ins-btn:disabled { opacity: 0.6; cursor: default; }

.ins-extract-btn {
  border-color: var(--ins-brand);
  background: var(--ins-brand-bg);
  color: var(--ins-brand-text);
  font-size: var(--ins-fs-meta);
  padding: 6px 12px;
}
.ins-extract-btn:hover:not(:disabled) { background: var(--ins-surface-muted); }
/* #117: the view-level actions (compose / export / add source) — one size, three accents. */
.ins-btn-primary, .ins-btn-sow, .ins-action-btn { font-size: 13px; padding: 9px 16px; }
.ins-btn-primary { background: var(--ins-brand); border-color: var(--ins-brand); color: var(--ins-on-accent); }
.ins-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.ins-action-btn { border-color: var(--ins-border); background: var(--ins-surface); color: var(--ins-text-strong); }
.ins-action-btn:hover:not(:disabled) { background: var(--ins-surface-muted); }

.ins-source-status {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.ins-source-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ins-border);
  background: var(--ins-surface-muted);
  border-radius: var(--ins-radius-pill);
  padding: 3px 10px;
  font-size: var(--ins-fs-meta);
  color: var(--ins-text-secondary);
}
.ins-source-chip.is-ok { border-color: var(--ins-included-chip); background: var(--ins-included-bg); }
.ins-source-chip.is-ok .ins-source-state { color: var(--ins-included); }
.ins-source-chip.is-failed { border-color: var(--ins-warn-chip); background: var(--ins-warn-bg); }
.ins-source-chip.is-failed .ins-source-state { color: var(--ins-open); }
.ins-source-state { font-weight: 600; }
/* #105: extracted, but the block cap left rows unread — amber, not green,
   so the ✓ cannot be read as "everything was mined". */
.ins-source-chip.is-ok.is-capped { border-color: var(--ins-warn-chip); background: var(--ins-warn-bg); }
.ins-source-chip.is-ok.is-capped .ins-source-state { color: var(--ins-open); }

.ins-empty {
  font-size: var(--ins-fs-body);
  color: var(--ins-text-muted);
  margin: 4px 0;
}

.ins-error, .ins-stale-pill {
  color: var(--ins-open);
  background: var(--ins-warn-bg);
  border: 1px solid var(--ins-warn-chip);
  border-radius: var(--ins-radius);
}
.ins-error {
  font-size: var(--ins-fs-body);
  padding: 6px 10px;
  margin: 4px 0 10px;
}

.ins-hint {
  font-size: var(--ins-fs-meta);
  color: var(--ins-text-faint);
  margin: 4px 0 0;
}

/* --- The x-ray lens (#68, ADR 0015 d6) ----------------------------------
   Prose ⇄ Signals per section, plus the staleness pill. The pill replaces
   a silent recompose: text the SEM has read never changes under them. */

.ins-lens {
  display: inline-flex;
  border: 1px solid var(--ins-border);
  border-radius: var(--ins-radius-pill);
  overflow: hidden;
  margin-left: 10px;
}
.ins-lens-btn {
  border: none;
  border-radius: 0;
  color: var(--ins-text-muted);
  font-size: var(--ins-fs-label);
  letter-spacing: 0.03em;
  padding: 3px 12px;
}
.ins-lens-btn:hover { background: var(--ins-surface-muted); }
.ins-lens-btn.is-on {
  background: var(--ins-brand-bg);
  color: var(--ins-brand-text);
}

.ins-stale-pill {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 7px 12px;
  margin: 6px 0 10px;
  font-size: var(--ins-fs-meta);
}
.ins-recompose-btn {
  border-color: var(--ins-warn);
  color: var(--ins-open);
  font-size: var(--ins-fs-meta);
  border-radius: var(--ins-radius-sm);
  padding: 3px 10px;
}
.ins-recompose-btn:hover:not(:disabled) { background: var(--ins-warn-bg); }

.ins-signals-face { margin-top: 4px; }

.ins-row {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--ins-border);
  border-left: 3px solid var(--ins-included-chip);
  border-radius: var(--ins-radius);
  background: var(--ins-surface);
  padding: 10px 12px;
  margin-bottom: 6px;
}
.ins-row.is-excluded {
  border-left-color: var(--ins-divider);
  background: var(--ins-surface-muted);
}
/* The prototype's "ghost" row: struck through, still visible, still one
   click from coming back. An exclusion the SEM can't see is a decision
   they can't revisit. */
.ins-row.is-excluded .ins-row-text {
  color: var(--ins-text-muted);
  text-decoration: line-through;
}

/* #75: orphaned — the quote is gone from every source. Struck through like an
   excluded row, but dashed: this is not a curation state the SEM chose. */
.ins-row.is-orphan {
  border-style: dashed;
  border-left-color: var(--ins-divider);
  background: var(--ins-surface-muted);
}
.ins-row.is-orphan .ins-row-text,
.ins-row.is-orphan .ins-row-quote { color: var(--ins-text-muted); text-decoration: line-through; }
.ins-row.is-orphan .ins-row-text .ins-badge-orphan { text-decoration: none; }
.ins-badge-orphan {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: var(--ins-fs-micro); font-weight: 600; line-height: 1.6;
  color: var(--ins-text-muted); border: 1px dashed var(--ins-divider);
  border-radius: 999px; vertical-align: middle; white-space: nowrap;
}
.ins-prune-btn { margin-left: 8px; }

.ins-row-toggle { margin-top: 2px; cursor: pointer; }
.ins-row-main { flex: 1; min-width: 0; }
.ins-row-text {
  font-size: var(--ins-fs-body);
  color: var(--ins-text-strong);
  line-height: 1.45;
}
.ins-row-evidence {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin-top: 4px;
}
.ins-row-quote {
  font-size: var(--ins-fs-meta);
  font-style: italic;
  color: var(--ins-text-secondary);
}
.ins-row-meta {
  font-size: var(--ins-fs-meta);
  color: var(--ins-text-muted);
}
.ins-row-gong {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 4px; padding: 1px 6px;
  font-size: var(--ins-fs-micro); font-weight: 600; line-height: 1.4;
  color: var(--ins-gong); background: var(--ins-gong-bg);
  border: 1px solid var(--ins-gong-border); border-radius: 10px;
  text-decoration: none; vertical-align: baseline;
  transition: background 0.1s, border-color 0.1s;
}
.ins-row-gong:hover {
  background: var(--ins-gong-bg-hover);
  border-color: var(--ins-gong-border-hover);
}


/* --- Session chat (#69) --------------------------------------------------- */
.ins-chat {
  background: var(--ins-surface);
  border: 1px solid var(--ins-border);
  border-radius: var(--ins-radius-lg);
  box-shadow: var(--ins-shadow-card);
  padding: 16px 20px;
  margin: 0 0 20px;
}
.ins-chat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.ins-chat-head h2 { font-size: var(--ins-fs-title); color: var(--ins-text-strongest); margin: 0; }
.ins-chat-sub { font-size: var(--ins-fs-meta); color: var(--ins-text-muted); }

.ins-chat-log {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 420px; overflow-y: auto;
  padding: 4px 2px;
}
.ins-chat-turn { display: flex; }
.ins-chat-turn.is-user { justify-content: flex-end; }
.ins-chat-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--ins-radius-lg);
  font-size: var(--ins-fs-body);
  color: var(--ins-text);
  background: var(--ins-surface-muted);
  border: 1px solid var(--ins-border);
}
.ins-chat-turn.is-user .ins-chat-bubble {
  background: var(--ins-chat-bg);
  border-color: transparent;
  color: var(--ins-text-strong);
}
.ins-chat-turn.is-refused .ins-chat-bubble {
  color: var(--ins-text-secondary);
  font-style: italic;
  border-style: dashed;
}
.ins-chat-turn.is-pending .ins-chat-bubble {
  color: var(--ins-text-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.ins-chat-text { white-space: pre-wrap; }
/* #131 prose-first: the answer reads as prose; a footnote numeral marks a
   sentence a checked quote backs; the evidence sits one layer down behind a
   barely visible toggle. */
/* An assistant answer is a document, not a speech bubble: no box, full width,
   the page's own text colour. User turns keep their bubble. */
.ins-chat-turn.is-assistant .ins-chat-bubble:has(.ins-chat-prose) {
  max-width: 100%; width: 100%; padding: 4px 0 0; background: none; border: 0; border-radius: 0;
  color: var(--ins-text-strong);
}
.ins-chat-prose { font-family: var(--ins-font-reading); line-height: 1.6; font-size: 17px; max-width: 70ch; text-align: left; }
.ins-chat-prose > :first-child { margin-top: 0; }
.ins-chat-prose > :last-child { margin-bottom: 0; }
.ins-chat-prose p { margin: 0 0 1.15em; }
.ins-chat-prose ul, .ins-chat-prose ol { margin: 0 0 12px; padding-left: 22px; }
.ins-chat-prose li { margin: 0 0 4px; }
.ins-chat-prose li > p { margin: 0; }
.ins-chat-prose li > ul, .ins-chat-prose li > ol { margin: 4px 0 0; }
.ins-chat-prose h1, .ins-chat-prose h2 {
  font-size: 1.15em; font-weight: var(--ins-fw-heading, 700); margin: 20px 0 8px; color: var(--ins-text-strongest); line-height: 1.3;
}
.ins-chat-prose h3 { font-size: 1.03em; font-weight: var(--ins-fw-heading, 700); margin: 16px 0 6px; color: var(--ins-text-strongest); line-height: 1.3; }
.ins-chat-prose h4 { font-size: 1em; font-weight: var(--ins-fw-heading, 700); margin: 12px 0 4px; color: var(--ins-text-strongest); }
.ins-chat-prose strong { font-weight: 650; color: var(--ins-text-strongest); }
.ins-chat-prose hr { border: 0; border-top: 1px solid var(--ins-border); margin: 14px 0; }
.ins-chat-prose blockquote { margin: 0 0 12px; padding: 2px 12px; border-left: 3px solid var(--ins-border); color: var(--ins-text-secondary); }
.ins-chat-prose table { border-collapse: collapse; margin: 6px 0 12px; font-size: var(--ins-fs-meta); max-width: 100%; font-family: inherit; }
.ins-chat-prose th, .ins-chat-prose td { border: 1px solid var(--ins-border); padding: 4px 8px; text-align: left; vertical-align: top; }
.ins-chat-prose th { background: var(--ins-surface-muted); font-weight: 600; }
.ins-chat-prose code { font-size: 0.92em; }
/* Citation markers: a quiet superscript number — muted, no pill, no border,
   consecutive markers grouped as 1,2 with a thin separator. Hover raises it
   to full strength; click opens the footnote popover. */
.ins-chat-fns { line-height: 0; vertical-align: super; font-size: 0.68em; margin-left: 1px; white-space: nowrap; }
.ins-chat-fn {
  display: inline; padding: 0 1px; margin: 0; border: 0; border-radius: 0; background: none;
  font-weight: 500; color: var(--ins-text-strong); opacity: 0.55; cursor: pointer; user-select: none;
}
.ins-chat-fns:hover .ins-chat-fn { opacity: 0.8; }
.ins-chat-fn:hover { opacity: 1; text-decoration: underline; }
.ins-chat-fn-sep { opacity: 0.35; padding: 0 1px; }
/* #235: a ≥24px-tall invisible hit box per mark (a real mouse missed "9,10" twice);
   the mark looks the same. Grouped marks split the space at the commas, so the
   boxes never overlap; the group's outer edges and a lone mark reach 24px wide. */
.ins-chat-fn { position: relative; }
.ins-chat-fn::before { content: ""; position: absolute; top: 50%; left: -3px; right: -3px; height: 24px;
  transform: translateY(-50%); }
.ins-chat-fn:first-child::before { left: -8px; }
.ins-chat-fn:last-child::before { right: -8px; }
.ins-chat-fn:only-child::before { left: 50%; right: auto; width: max(24px, calc(100% + 6px)); transform: translate(-50%, -50%); }
.ins-chat-fn-pop {
  position: fixed; z-index: 60; padding: 12px 14px;
  background: var(--ins-surface, #fff); border: 1px solid var(--ins-border);
  border-radius: var(--ins-radius-lg); box-shadow: var(--ins-shadow-card);
  font-size: var(--ins-fs-meta); color: var(--ins-text);
  max-height: calc(100vh - 24px); overflow-y: auto;   /* the add dialog inside can outgrow the quote list */
}
/* The compact section chooser inside the popover: a small card of its own under
   the claim — the quotes below it stay visible. */
.ins-chat-fn-pop .ins-chat-add-dialog.is-compact { margin: 0 0 10px; padding: 8px 10px; gap: 4px;
  background: var(--ins-chat-bg); border-color: var(--ins-chat); }
.ins-chat-fn-pop .ins-chat-add-dialog.is-compact .ins-chat-add-label { margin-top: 0; }
.ins-chat-fn-pop .ins-chat-add-dialog.is-compact .ins-chat-add-actions { margin-top: 2px; }
.ins-chat-fn-pop-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.ins-chat-fn-pop-claim { flex: 1; font-weight: 600; color: var(--ins-text-strongest); }
.ins-chat-fn-pop-anchor + .ins-chat-fn-pop-anchor { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ins-border); }
.ins-chat-fn-pop-quote {
  display: block; width: 100%; text-align: left; padding: 0; margin: 0 0 4px; border: 0; background: none;
  font: inherit; font-style: italic; color: var(--ins-text-secondary); cursor: pointer; line-height: 1.45;
}
.ins-chat-fn-pop-quote:hover:not(:disabled) { color: var(--ins-text-strongest); text-decoration: underline; }
.ins-chat-fn-pop-quote:disabled { cursor: default; opacity: 0.6; }
.ins-chat-fn-pop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ins-chat-evidence-toggle {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 0 4px;
  border: 0; background: none; font: inherit; font-size: var(--ins-fs-micro);
  color: var(--ins-text-muted); opacity: 0.45; cursor: pointer;
}
.ins-chat-evidence-toggle:hover, .ins-chat-evidence-toggle.is-open { opacity: 1; }
.ins-chat-evidence { margin-top: 6px; }
/* The layer panel only under a prose answer (a class, not a sibling selector:
   the hidden prose element is still a sibling inside a USER bubble). */
.ins-chat-evidence.is-layer { padding: 10px 12px 4px; border-top: 1px dashed var(--ins-border); background: var(--ins-surface-muted); border-radius: var(--ins-radius-lg); }
.ins-chat-prose ~ .ins-chat-evidence-toggle { margin-top: 10px; }
/* #131: the greeting above the log — the chat's one line of chrome. */
/* #131: the greeting sits inside the centred hero (sized by `.ins-chat-hero h2`) and leaves with it. */
.ins-chat-greeting { text-align: center; margin: 0 0 6px; }
/* #131: reply-style toggle in the composer row, beside Ask. */
.ins-chat-mode { display: inline-flex; margin: 0 10px 0 auto; }
.ins-chat-mode + .ins-chat-send { margin-left: 0; }
.ins-chat-mode-btn {
  font: inherit; font-size: var(--ins-fs-label); font-weight: 600; line-height: 1;
  padding: 6px 14px; border: 1px solid var(--ins-border); background: var(--ins-surface, #fff);
  color: var(--ins-text-muted); cursor: pointer;
}
.ins-chat-mode-btn:first-child { border-radius: 999px 0 0 999px; }
.ins-chat-mode-btn:last-child { border-radius: 0 999px 999px 0; margin-left: -1px; }
.ins-chat-mode-btn.is-on { color: var(--ins-chat-text); background: var(--ins-chat-bg); border-color: var(--ins-chat); position: relative; z-index: 1; }
.ins-chat-mode-btn:hover:not(.is-on) { color: var(--ins-text-strong); }
.ins-chat-evidence-summary { font-size: var(--ins-fs-micro); color: var(--ins-text-muted); margin-bottom: 6px; }
textarea.ins-chat-input { resize: vertical; min-height: 42px; font: inherit; line-height: 1.4; }
.ins-chat-bubble .ins-row-evidence { margin-top: 6px; }
/* #80: one block per claim — its sentence, then ONLY its own quotes, so a
   ▶ reads as backing the line above it and nothing else. */
.ins-chat-claim + .ins-chat-claim {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--ins-border);
}
.ins-chat-claim-head { display: flex; align-items: flex-start; gap: 8px; }
/* #119: the claim is the bold line, its quotes the evidence; the source chip is
 * colour-coded by anchor type (the Table view's source colours) and jumps to
 * the signal in its source view without touching its include state. */
.ins-chat-claim-text { font-weight: 600; color: var(--ins-text-strongest); }
.ins-src-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  font: inherit; font-size: var(--ins-fs-micro); font-weight: 600; line-height: 1.4;
  padding: 1px 8px 1px 6px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ins-text-muted); background: var(--ins-surface-muted); border-color: var(--ins-border);
}
.ins-src-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ins-src-chip.is-gong { color: var(--ins-gong); background: var(--ins-gong-bg); border-color: var(--ins-gong-border); }
.ins-src-chip.is-rfp  { color: var(--ins-ok-tx); background: var(--ins-ok-bg); border-color: var(--ins-ok-line); }
.ins-src-chip.is-doc  { color: var(--ins-warn); background: var(--ins-warn-bg); border-color: var(--ins-warn-chip); }
.ins-src-chip.is-web  { color: var(--ins-brand-text); background: var(--ins-info-bg); border-color: var(--ins-info-line); }
.ins-src-chip.is-c360 { color: var(--ins-ok-tx); background: var(--ins-ok-bg); border-color: var(--ins-ok-line); }   /* #257 */
.ins-src-chip:hover:not(:disabled) { filter: brightness(0.96); text-decoration: underline; }
.ins-src-chip:disabled { opacity: 0.5; cursor: default; }
/* #120: a chat quote shown in its call card while it is not a signal. */
.ins-gong-row.is-ghost { border-style: dashed; }
.ins-gong-tag.is-ghost { color: var(--ins-chat-alt); border-color: var(--ins-chat-bg); background: var(--ins-chat-bg); }
.ins-chat-claim-head .ins-chat-text { flex: 1; }
.ins-chat-add {
  flex: none; padding: 2px 8px;
  font-size: var(--ins-fs-micro); font-weight: 600; white-space: nowrap;
  color: var(--ins-chat-text); border-color: var(--ins-chat);
}
.ins-chat-add.is-added { color: var(--ins-text-muted); border-color: var(--ins-border); }
.ins-chat-add.is-excluded { color: var(--ins-text-secondary); border-style: dashed; }
/* #70 inline add dialog: humans narrow the evidence, never author it —
   the sentence is displayed, not editable. */
.ins-chat-add-dialog {
  margin-top: 8px; padding: 10px 12px;
  border: 1px solid var(--ins-chat); border-radius: var(--ins-radius-lg);
  background: var(--ins-surface);
  display: flex; flex-direction: column; gap: 6px;
}
/* #224 Add all to ROM: a quiet text link (no chip) and the summary overlay after it. */
.ins-chat-addall-link { border: 0; background: none; padding: 0; font: inherit; color: var(--ins-chat-text);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ins-chat-addall-link:disabled { color: var(--ins-text-muted); cursor: default; }
.ins-chat-addall-pop { margin: 0 0 8px; font-size: var(--ins-fs-micro); }
.ins-chat-addall-err { display: block; color: var(--ins-open); font-size: var(--ins-fs-micro); }
.ins-batch-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 23, 42, 0.28); }
.ins-batch { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 20px;
  background: var(--ins-surface); border: 1px solid var(--ins-border); border-radius: var(--ins-radius-lg);
  box-shadow: var(--ins-shadow-card); display: flex; flex-direction: column; gap: 8px; }
.ins-batch-title { margin: 0; font-size: var(--ins-fs-body); font-weight: var(--ins-fw-heading, 700); color: var(--ins-text-strong); }
.ins-batch-note { margin: 0; font-size: var(--ins-fs-meta); color: var(--ins-text-muted); }
.ins-batch-note.is-warn { color: var(--ins-open); }
.ins-batch-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px;
  font-size: var(--ins-fs-meta); }
.ins-batch-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; }
.ins-batch-item-text { color: var(--ins-text); }
.ins-batch-item-section { color: var(--ins-text-muted); font-size: var(--ins-fs-micro); white-space: nowrap; }
.ins-batch-item-actions:empty { display: none; }
/* #228: Move / Remove on the rows this add created */
.ins-batch-item-change { display: inline-flex; gap: 6px; align-items: center; }
.ins-batch-item-move, .ins-batch-item-remove { font-size: var(--ins-fs-micro); padding: 2px 6px; }
.ins-batch-item-move { width: auto; max-width: 9.5em; }
@media (max-width: 480px) {
    .ins-batch-item { grid-template-columns: minmax(0, 1fr) auto; }
    .ins-batch-item-actions { grid-column: 1 / -1; }
}
.ins-batch-skipped { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px;
  font-size: var(--ins-fs-meta); }
.ins-batch-skipped-text { display: block; color: var(--ins-text); }
.ins-batch-skipped-why { display: block; color: var(--ins-text-muted); font-size: var(--ins-fs-micro); }
.ins-batch-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* #235: Undo all / Accept stay in view however long the list is (sticky footer
   over the panel's own scroll); it spans the padding so the list scrolls under it. */
.ins-batch-actions { position: sticky; bottom: -18px; z-index: 1; margin: 4px -20px -18px; padding: 10px 20px 18px;
  background: var(--ins-surface); border-top: 1px solid var(--ins-border); }
/* Coverage chart (dataviz rules): horizontal bars ≤ 24px thick with a 4px rounded
   data end, square at the baseline; a 2px surface gap between the two segments;
   text in text tokens, never the series colour; a zero row is marked, not hidden. */
.ins-cov { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: var(--ins-fs-meta); }
.ins-cov-legend { display: flex; gap: 14px; color: var(--ins-text-muted); font-size: var(--ins-fs-micro); }
.ins-cov-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ins-cov-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.ins-cov-row { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 10px; align-items: center; }
.ins-cov-name { color: var(--ins-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-cov-row.is-zero .ins-cov-name { color: var(--ins-text-muted); }
.ins-cov-track { display: flex; align-items: center; gap: 2px; min-width: 0; }
.ins-cov-bar { display: block; height: 12px; min-width: 3px; }
.ins-cov-bar.is-prior, .ins-cov-swatch.is-prior { background: var(--slate); }   /* #458: series 2 (D9) */
.ins-cov-bar.is-added, .ins-cov-swatch.is-added { background: var(--sapphire); }   /* #458: series 1 (D9) */
.ins-cov-bar.is-end { border-radius: 0 4px 4px 0; }
.ins-cov-val { margin-left: 6px; color: var(--ins-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ins-cov-row.is-zero .ins-cov-val { font-weight: 600; color: var(--ins-text); }
.ins-chat-add-label { font-size: var(--ins-fs-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ins-text-muted); margin-top: 4px; }
.ins-chat-add-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.ins-chat-add-text { font-size: var(--ins-fs-body); color: var(--ins-text-strong); }
.ins-chat-add-anchor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; cursor: pointer; }
.ins-chat-add-anchor input { margin: 0; align-self: center; }
.ins-chat-add-section { font-size: var(--ins-fs-body); padding: 4px 6px;
  border: 1px solid var(--ins-border); border-radius: 6px; background: var(--ins-surface); }
.ins-chat-add-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* #227 which ROM: the Add all picker in place, and "Added to <ROM>" after an add elsewhere */
.ins-chat-rom-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.ins-chat-rom-pick .ins-chat-add-label { margin-top: 0; }
.ins-chat-add-wrap { display: contents; }   /* #236: a single root for x-if, no box of its own */
.ins-chat-rom-note { margin: 4px 0; font-size: var(--ins-fs-micro); color: var(--ins-chat-text); }
/* "via chat" provenance badge (ADR 0016 d4) — curation + Signals only. */
.ins-badge-chat {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: var(--ins-fs-micro); font-weight: 600; line-height: 1.6; vertical-align: baseline;
  color: var(--ins-chat-alt); background: var(--ins-chat-bg);
  border: 1px solid transparent; border-radius: 10px;
}
/* #249: "Tacton proposed" (#263's delivery plan) — Tacton blue, outlined, so it never
 * reads as one of the customer's statements. Same pill as "via chat". */
.ins-badge-proposed {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: var(--ins-fs-micro); font-weight: 600; line-height: 1.6; vertical-align: baseline;
  color: var(--ins-brand-text); background: var(--ins-brand-bg);
  border: 1px solid var(--ins-brand); border-radius: 10px;
}
/* #249 (ADR 0025 D5): an empty workstream is one faint line under a faint heading. */
.rd-section-empty .rd-section-head h2, .rd-empty-line { opacity: 0.55; }

.ins-chat-spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--ins-border); border-top-color: var(--ins-chat);
  animation: ins-chat-spin 0.8s linear infinite;
}
@keyframes ins-chat-spin { to { transform: rotate(360deg); } }

.ins-chat-form { display: flex; gap: 8px; margin-top: 12px; }
.ins-chat-input {
  flex: 1; min-width: 0;
  font: inherit; font-size: var(--ins-fs-body);
  padding: 8px 12px;
  border: 1px solid var(--ins-border);
  border-radius: var(--ins-radius);
  color: var(--ins-text-strong);
  background: var(--ins-surface);
}
.ins-chat-input:focus { outline: none; border-color: var(--ins-chat); }
.ins-chat-send {
  padding: 8px 16px;
  font-size: var(--ins-fs-body);
  color: var(--ins-on-accent);
  background: var(--ins-chat);
  border-color: var(--ins-chat);
}
.ins-chat-send:hover:not(:disabled) { background: var(--ins-chat-alt); border-color: var(--ins-chat-alt); }
/* #73a: open-question marker on RFP rows (the workbook left it unanswered). */
.ins-badge-open {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: var(--ins-fs-micro); font-weight: 600; line-height: 1.6; vertical-align: baseline;
  color: var(--ins-warn); background: var(--ins-warn-bg); border: 1px solid transparent; border-radius: 10px;
}


/* --- #73b: RFP sheet view (prototype "RFP") ------------------------------- */
.ins-rfp { margin: 0 0 24px; }
.ins-rfp-banner { display: flex; align-items: flex-start; gap: 12px; background: var(--ins-included-bg);
                  border: 1px solid var(--ins-included-chip); border-radius: 10px; padding: 14px 18px; margin: 0 0 16px; }
.ins-rfp-icon { color: var(--ins-included); font-size: 18px; line-height: 1; margin-top: 1px; }
.ins-rfp-title { font-size: 14px; font-weight: var(--ins-fw-heading, 700); color: var(--ins-included); }
.ins-rfp-sub { font-size: 12px; color: var(--ins-text-muted); margin-top: 2px; line-height: 1.5; }
.ins-rfp-spacer { flex: 1; }
.ins-rfp-card { background: var(--ins-surface); border: 1px solid var(--ins-border-alt); border-radius: 12px;
                box-shadow: var(--ins-shadow-card); overflow: hidden; }
.ins-rfp-head { display: flex; align-items: center; gap: 10px; background: var(--ins-included-bg);
                border-bottom: 1px solid var(--ins-border-alt); padding: 10px 18px; flex-wrap: wrap; }
.ins-rfp-file { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; color: var(--ins-included); }
.ins-rfp-sheetname { font-size: 13px; color: var(--ins-text-secondary); }
.ins-rfp-count { font-size: 12px; color: var(--ins-text-muted); }
.ins-rfp-scroll { max-height: 72vh; overflow: auto; }
.ins-rfp-table { width: 100%; border-collapse: collapse; }
.ins-rfp-table th { position: sticky; top: 0; background: var(--ins-surface-muted); font-size: 11px; font-weight: 700;
                    text-transform: uppercase; letter-spacing: 0.05em; color: var(--ins-text-muted); text-align: left;
                    padding: 10px 14px; border-bottom: 1px solid var(--ins-border); }
.ins-rfp-table td { padding: 12px 14px; border-bottom: 1px solid var(--ins-border-soft); font-size: 13px; vertical-align: top; line-height: 1.55; }
.ins-rfp-num { width: 44px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ins-text-faint);
               border-right: 1px solid var(--ins-border-soft); }
.ins-rfp-cells { width: 42%; color: var(--ins-text-strong); }
.ins-rfp-cell { display: inline-block; margin: 0 8px 4px 0; padding-right: 8px; border-right: 1px solid var(--ins-border); }
.ins-rfp-cell:last-child { border-right: none; }
.ins-rfp-table tr.is-context td { background: var(--ins-surface-muted); color: var(--ins-text-faint); }
.ins-rfp-table tr.is-context .ins-rfp-cells { color: var(--ins-text-faint); }
.ins-rfp-table tr.is-open td { background: var(--ins-warn-bg); }
.ins-rfp-none { font-style: italic; color: var(--ins-text-faint); }
.ins-rfp-text { color: var(--ins-text); }
.ins-rfp-text + .ins-rfp-text { margin-top: 8px; }
.ins-rfp-text.is-excluded { text-decoration: line-through; color: var(--ins-text-faint); }
.ins-rfp-inrom { width: 190px; }
.ins-rfp-inrom-row { display: flex; align-items: center; gap: 8px; }
.ins-rfp-inrom-row + .ins-rfp-inrom-row { margin-top: 8px; }
.ins-rfp-section { font-size: 11px; font-weight: 600; color: var(--ins-text-secondary); background: var(--ins-surface-muted);
                   border: 1px solid var(--ins-border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.ins-rfp-tabs { display: flex; gap: 6px; padding: 0 18px; border-top: 1px solid var(--ins-border-alt);
                background: var(--ins-surface-muted); overflow-x: auto; }
.ins-rfp-tab { display: inline-flex; align-items: center; font-family: inherit; font-size: 13px; font-weight: 600;
               padding: 9px 16px; cursor: pointer; background: transparent; border: 1px solid transparent; border-top: none;
               border-radius: 0 0 8px 8px; color: var(--ins-text-muted); margin-top: -1px; white-space: nowrap; }
.ins-rfp-tab.is-active { background: var(--ins-surface); border-color: var(--ins-included); color: var(--ins-included); font-weight: 700; }
.ins-rfp-tab-count { font-size: 11px; opacity: 0.7; margin-left: 6px; }
.ins-rfp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ins-warn); margin-left: 7px; }

/* --- Workspace left nav (#111, prototype <nav> 250px, buttons 10px 12px) --
 * #118: no top bar — three columns (nav · paper · rail) run top to bottom
 * across the whole window; the nav and the rail stick and scroll on their
 * own. Document-like views cap their content width below so prose keeps
 * paper proportions; the spreadsheet-like views (rfp, table, chat) use it all. */
.rd-layout.has-ins-nav { max-width: none; margin: 0; padding: 0; gap: 0; align-items: stretch; min-height: 100vh; }
.rd-layout.has-ins-nav .rd-paper { border-radius: 0; box-shadow: none; padding: 32px 48px 64px; min-height: 100vh; }
.rd-layout.has-ins-nav .rd-rail {
  width: 320px; box-sizing: border-box; align-self: flex-start; position: sticky; top: 0;
  height: 100vh; overflow-y: auto; padding: 20px 16px 32px;
  background: var(--ins-surface-muted); border-left: 1px solid var(--ins-border-alt);
}
.rd-layout.has-ins-nav.is-view-rom .rd-paper > *,
.rd-layout.has-ins-nav.is-view-size .rd-paper > *,
.rd-layout.has-ins-nav.is-view-signals .rd-paper > *,
.rd-layout.has-ins-nav.is-view-export .rd-paper > * { max-width: 920px; margin-left: auto; margin-right: auto; }
.rd-layout.has-ins-nav.is-view-export .rd-paper > .ins-view-export { max-width: 720px; }
/* #113 (QA): the RFP view is a spreadsheet — the paper's margins shrink and
 * the rail narrows so the sheet gets the room. */
.rd-layout.has-ins-nav.is-view-rfp .rd-paper { padding: 28px 32px; }
.rd-layout.has-ins-nav.is-view-rfp .rd-rail { width: 260px; }
/* #115 (QA): the Table Summary must fit the window without a horizontal
 * scroll — the paper's margins shrink and the rail is hidden (the view carries
 * its own source panel; the rail's chips would only repeat it). */
.rd-layout.has-ins-nav.is-view-table .rd-paper { padding: 20px 24px; }
.rd-layout.has-ins-nav.is-view-table .rd-rail { display: none; }
.rd-layout.has-ins-nav.is-view-size .rd-rail { display: none; }   /* #142a tweak (Anton): no rail beside the matrix, as in Table */
.ins-nav {
  width: 280px; flex-shrink: 0; align-self: flex-start; position: sticky; top: 0;
  background: var(--ins-surface); border-right: 1px solid var(--ins-border-alt);
  padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 2px;
  height: 100vh; box-sizing: border-box; overflow-y: auto;
}
.ins-nav-brand { padding: 4px 12px 14px; border-bottom: 1px solid var(--ins-surface-muted); margin-bottom: 12px; }
.ins-nav-brand-logo { line-height: 0; }   /* #324: the official logo (static/tacton-logo.svg) */
.ins-nav-brand-logo img { display: block; height: 20px; width: auto; }
.ins-nav-brand-sub { font-size: 11px; color: var(--ins-text-faint); margin-top: 1px; }
.ins-nav-brand-opp { font-size: 12.5px; font-weight: 600; color: var(--ins-text-strong); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-nav-brand-customer { font-size: 12px; font-weight: 600; color: var(--ins-text-strong); margin-top: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-nav-account { margin-top: auto; position: relative; padding-top: 10px; border-top: 1px solid var(--ins-surface-muted); }
.ins-nav-account-btn { font-weight: 600; }
.ins-nav-account-btn[aria-expanded="true"] { background: var(--ins-surface-muted); }
.ins-nav-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ins-brand-bg); color: var(--ins-brand-text); font-size: 12px; font-weight: 700; }
.ins-nav-account-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.ins-nav-gear { color: var(--ins-text-faint); }
.ins-nav-menu { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 4px); z-index: 30; padding: 6px;
  background: var(--ins-surface); border: 1px solid var(--ins-border); border-radius: var(--ins-radius-lg);
  box-shadow: var(--ins-shadow-pop); }
.ins-nav-menu-user { font-size: 11px; color: var(--ins-text-faint); padding: 6px 10px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--ins-surface-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-nav-menu-item { display: block; width: 100%; box-sizing: border-box; text-align: left; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ins-text-strong); background: transparent; border: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.ins-nav-menu-item:hover { background: var(--ins-surface-muted); }
.ins-nav-menu-item.is-danger { color: var(--ins-berry-tx); }
.ins-nav-menu-form { margin: 0; }
/* --- #137: the opportunity's chats, listed under the source views -----------
 * A row = the title (a button that opens the thread) + a ⋯ button that shows on
 * hover / focus and opens a small menu below it: Rename (inline input in the row)
 * or Delete (a second click inside the same menu confirms). Never .ins-nav-item. */
.ins-nav-thread {
  position: relative; display: flex; align-items: center; width: 100%; box-sizing: border-box;
  border-radius: 8px; border-left: 3px solid transparent; background: transparent;
}
.ins-nav-thread:hover, .ins-nav-thread.is-menu-open { background: var(--ins-surface-muted); }
.ins-nav-thread.is-active { border-left-color: var(--ins-chat); background: var(--ins-brand-bg); }
.ins-nav-thread.is-active .ins-nav-thread-title, .ins-nav-thread.is-active .ins-nav-thread-plus { color: var(--ins-brand-text); }
.ins-nav-thread-btn {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-align: left;
  padding: 6px 12px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ins-text-strong);
  background: transparent; border: none; border-radius: 8px; cursor: pointer;
}
/* "+ New chat" is text, not a row: no surface, no border, sits at the top of the list; the
 * rows follow directly beneath, newest first (the server sorts). */
.ins-nav-thread-new {
  display: block; width: auto; align-self: flex-start; text-align: left; margin: -4px 0 2px; padding: 2px 12px 4px 15px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ins-text-secondary);
  background: transparent; border: none; cursor: pointer;
}
.ins-nav-thread-new:hover { color: var(--ins-text-strong); text-decoration: underline; }
.ins-nav-thread-new.is-active { color: var(--ins-brand-text); }
.ins-nav-thread-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* #144: to the right of the title — a small spinner while the chat answers, then an orange dot
 * (a soft orange, --ins-unread) once the answer is in and the SEM has not opened the chat yet. */
.ins-nav-thread-spin {
  flex-shrink: 0; margin-left: auto; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--ins-border); border-top-color: var(--ins-chat);
  animation: ins-chat-spin 0.8s linear infinite;
}
.ins-nav-thread-dot {
  flex-shrink: 0; margin-left: auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ins-unread);
}
.ins-nav-thread-failed { flex-shrink: 0; margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ins-berry-tx); }
.ins-nav-thread-dots {
  flex-shrink: 0; width: 26px; height: 26px; margin-right: 4px; border: none; border-radius: 6px;
  background: transparent; color: var(--ins-text-faint); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0;
}
.ins-nav-thread:hover .ins-nav-thread-dots, .ins-nav-thread:focus-within .ins-nav-thread-dots,
.ins-nav-thread.is-menu-open .ins-nav-thread-dots { opacity: 1; }
.ins-nav-thread-dots:hover, .ins-nav-thread-dots[aria-expanded="true"] { background: var(--ins-surface); color: var(--ins-text-strong); }
.ins-nav-thread-menu {
  position: absolute; right: 6px; top: calc(100% + 2px); z-index: 30; min-width: 168px; padding: 6px;
  background: var(--ins-surface); border: 1px solid var(--ins-border); border-radius: var(--ins-radius-lg);
  box-shadow: var(--ins-shadow-pop);
}
.ins-nav-thread-confirm { font-size: 12px; font-weight: 600; color: var(--ins-text-strong); padding: 6px 10px 8px; }
.ins-nav-thread-rename {
  flex: 1; min-width: 0; margin: 3px 4px 3px 9px; padding: 5px 7px; font: inherit; font-size: 13px;
  color: var(--ins-text-strong); background: var(--ins-surface); border: 1px solid var(--ins-brand); border-radius: 6px; outline: none;
}
.ins-nav-group {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ins-text-faint); padding: 0 12px 8px;
}
.ins-nav-rule { border-top: 1px solid var(--ins-surface-muted); margin: 12px 4px; }
.ins-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-family: inherit;
  border: none; border-left: 3px solid transparent; background: transparent;
  font-size: 13.5px; font-weight: 600; color: var(--ins-text-strong);
}
.ins-nav-item:hover { background: var(--ins-surface-muted); }
.ins-nav-item.is-active { border-left-color: var(--ins-chat); background: var(--ins-brand-bg); color: var(--ins-brand-text); }
.ins-nav-icon { flex-shrink: 0; }
/* #544: the nav icons that were the old indigo (#4F46E5) stroke currentColor = the brand token (ADR 0037: sapphire);
   the gear keeps its own faint colour (.ins-nav-gear) */
.ins-nav-icon:not(.ins-nav-gear) { color: var(--ins-brand-text); }
.ins-nav-label { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* the badge always fits; the label gives way */
.ins-nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ins-text-secondary);
  background: var(--ins-bg); border: 1px solid var(--ins-border); border-radius: 999px;
  padding: 3px 9px; white-space: nowrap; flex-shrink: 0;
}
.ins-rfp-pick { margin: 0 0 24px; }
.ins-rfp-pick-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  margin-top: 8px; padding: 12px 16px; text-align: left; font-family: inherit; cursor: pointer;
  background: var(--ins-surface); border: 1px solid var(--ins-border); border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--ins-text-strong);
}
.ins-rfp-pick-item:hover:not(:disabled) { border-color: var(--ins-included); background: var(--ins-included-bg); }
.ins-rfp-pick-meta { font-size: 12px; font-weight: 500; color: var(--ins-text-muted); white-space: nowrap; }
/* --- Chat view (#118, chat-first): nav left, sources right, the composer in
 * the middle with one "Add source" tray under it. The chat card loses its
 * frame here — the view IS the card. The hero sits low so the composer stays
 * near the middle of the window until the first answer pushes it down. */
/* The layout opens up like the RFP view so the conversation gets the window's
 * width; the composer sits in the vertical middle of the container until the
 * first answer, then the log fills upward and the composer drops to the foot. */
.rd-layout.has-ins-nav.is-view-chat .rd-paper { padding: 28px 48px 36px; }
.ins-view-chat { width: 100%; max-width: none; display: flex; flex-direction: column; min-height: calc(100vh - 190px); }
.ins-view-chat .ins-chat { display: flex; flex-direction: column; justify-content: center; flex: 1; min-height: 0;
  background: transparent; border: none; box-shadow: none; padding: 0; margin: 0; }
.ins-chat-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0 22px; }
.ins-chat-hero h2 { font-size: 26px; font-weight: var(--ins-fw-heading, 700); letter-spacing: -0.01em; color: var(--ins-text-strongest); margin: 0 0 8px; }
.ins-chat-hero .ins-chat-sub { display: block; max-width: 540px; line-height: 1.5; }
.ins-chat-try { font-size: var(--ins-fs-meta); color: var(--ins-text-faint); margin: 8px 0 0; }
.ins-view-chat .ins-chat-log { flex: 1; max-height: none; min-height: 0; padding: 8px 4px 16px; }
.ins-chat-composer { flex-direction: column; gap: 0; margin-top: 8px; position: relative; z-index: 1;
  background: var(--ins-surface); border: 1px solid var(--ins-border); border-radius: 22px;
  box-shadow: var(--ins-shadow-pop); padding: 14px 16px 12px; }
.ins-chat-composer .ins-chat-input { border: none; padding: 4px 4px 12px; font-size: 15px; background: transparent; }
.ins-chat-composer .ins-chat-input:focus { border: none; box-shadow: none; }
.ins-chat-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ins-chat-composer-hint { font-size: var(--ins-fs-meta); color: var(--ins-text-faint); min-width: 0; }
.ins-chat-composer .ins-chat-send { border-radius: var(--ins-radius-pill); padding: 8px 18px; flex-shrink: 0; }
/* #250: Stop sits where Ask was, same size; quiet, so it never reads as the main action. */
.ins-chat-composer .ins-chat-stop { background: var(--ins-surface); color: var(--ins-text-strong); border-color: var(--ins-border); }
.ins-chat-composer .ins-chat-stop:hover { border-color: var(--ins-text-muted); }
.ins-chat-notice { margin: 8px 4px 0; font-size: var(--ins-fs-meta); color: var(--ins-text-muted); }
.ins-chat-tray { display: flex; align-items: center; gap: 14px; margin: -16px 14px 0; padding: 24px 14px 10px; position: relative;
  background: var(--ins-surface-muted); border: 1px solid var(--ins-border); border-top: none; border-radius: 0 0 16px 16px; }
.ins-chat-tray-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ins-text-strong); background: transparent; border: none; cursor: pointer; padding: 4px 8px; border-radius: var(--ins-radius); }
.ins-chat-tray-btn:hover:not(:disabled) { background: var(--ins-surface); color: var(--ins-brand-text); }
.ins-chat-tray-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ins-chat-tray-meta { margin-left: auto; font: inherit; font-size: var(--ins-fs-meta); color: var(--ins-text-muted); white-space: nowrap;
  background: transparent; border: none; padding: 4px 8px; border-radius: var(--ins-radius); cursor: pointer; }
.ins-chat-tray-meta:hover:not(:disabled), .ins-chat-tray-meta.is-open { background: var(--ins-surface); color: var(--ins-text-strong); }
.ins-chat-tray-meta:disabled { cursor: default; }
/* #257: "Chat can use Customer 360 data" — chat only, beside Add source. */
.ins-chat-c360 { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ins-fs-meta);
  color: var(--ins-text-muted); cursor: pointer; white-space: nowrap; }
.ins-chat-c360 input { margin: 0; }
/* #247: a website that could not be read, under the tray, with Retry / paste. */
.ins-website-failed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 14px 0; padding: 10px 14px;
  font-size: 13px; line-height: 1.5; color: var(--ins-text-strong); background: var(--ins-warn-bg); border: 1px solid var(--ins-warn);
  border-radius: var(--ins-radius); }
.ins-website-failed-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.ins-website-failed-actions .ins-btn { font-size: 13px; padding: 5px 12px; border-color: var(--ins-border); color: var(--ins-text-strong); }
.ins-website-failed-actions .ins-btn:hover:not(:disabled) { border-color: var(--ins-brand); color: var(--ins-brand-text); }
/* #145: the sources popover — anchored to the tray's right edge, opens upward over the composer. */
.ins-sources-pop {
  position: absolute; right: 10px; bottom: calc(100% - 14px); z-index: 30; width: 360px; max-width: calc(100vw - 48px);
  max-height: 60vh; overflow-y: auto; padding: 6px;
  background: var(--ins-surface); border: 1px solid var(--ins-border); border-radius: var(--ins-radius-lg);
  box-shadow: var(--ins-shadow-pop);
}
.ins-sources-pop-head { font-size: 11px; font-weight: var(--ins-fw-heading, 700); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ins-text-faint); padding: 6px 10px 4px; }
.ins-sources-pop-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--ins-radius); }
.ins-sources-pop-row:hover, .ins-sources-pop-row.is-armed { background: var(--ins-surface-muted); }
.ins-sources-pop-kind { flex-shrink: 0; cursor: default; }
.ins-sources-pop-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ins-sources-pop-name { font-size: 13px; color: var(--ins-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-sources-pop-meta { font-size: 11px; color: var(--ins-text-faint); }
.ins-sources-pop-remove { flex-shrink: 0; font: inherit; font-size: 15px; line-height: 1; color: var(--ins-text-faint); background: transparent;
  border: 1px solid transparent; border-radius: var(--ins-radius); padding: 3px 7px; cursor: pointer; }
.ins-sources-pop-remove:hover:not(:disabled) { color: var(--ins-berry-tx); background: var(--ins-berry-bg); border-color: var(--ins-berry-line); }
.ins-sources-pop-row.is-armed .ins-sources-pop-remove { font-size: 12px; font-weight: 600; color: var(--ins-berry-tx); background: var(--ins-berry-bg); border-color: var(--ins-berry-line); }
.ins-sources-pop-remove:disabled { opacity: 0.5; cursor: not-allowed; }
.ins-sources-pop-note { font-size: 11px; color: var(--ins-text-faint); padding: 6px 10px 4px; margin: 0; }
/* The "Add source" overlay — one option card per source type. */
.ins-add-src-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.ins-add-src-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  padding: 12px 14px; background: var(--ins-surface); border: 1px solid var(--ins-border); border-radius: var(--ins-radius-lg); }
.ins-add-src-opt:hover:not(:disabled) { border-color: var(--ins-chat); background: var(--ins-brand-bg); }
.ins-add-src-opt:disabled { opacity: 0.5; cursor: not-allowed; }
.ins-add-src-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--ins-surface-muted); }
.ins-add-src-opt.is-gong .ins-add-src-icon { background: var(--ins-gong-bg); }
.ins-add-src-opt.is-files .ins-add-src-icon { background: var(--ins-brand-bg); }
.ins-add-src-opt.is-website .ins-add-src-icon { background: var(--ins-ok-bg); }
.ins-add-src-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-add-src-text strong { font-size: 14px; color: var(--ins-text-strongest); }
.ins-add-src-text span { font-size: var(--ins-fs-meta); color: var(--ins-text-muted); line-height: 1.45; }
/* --- Signals view: sources summary (#117) ---------------------------------- */
.ins-view-signals { max-width: 960px; }
.ins-src-summary {
  background: var(--ins-surface); border: 1px solid var(--ins-border); border-radius: var(--ins-radius-lg);
  box-shadow: var(--ins-shadow-card); padding: 18px 20px; margin-bottom: 20px;
}
.ins-src-summary-count { font-size: var(--ins-fs-label); color: var(--ins-text-muted); }
.ins-src-list { list-style: none; margin: 0 0 14px; padding: 0; }
.ins-src-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px;
  border-top: 1px solid var(--ins-surface-muted); font-size: var(--ins-fs-body);
}
.ins-src-item:first-child { border-top: none; }
.ins-src-item-name { font-weight: 600; color: var(--ins-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-src-item-meta { color: var(--ins-text-faint); font-size: var(--ins-fs-label); white-space: nowrap; }
.ins-src-item-count { margin-left: auto; font-size: var(--ins-fs-label); color: var(--ins-text-secondary); white-space: nowrap; }
.ins-src-add { display: flex; flex-wrap: wrap; gap: 8px; }
/* --- ROM Summary header: the compose action (#117, was the toolbar) -------- */
.ins-rom-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; margin-bottom: 24px;
  background: var(--ins-brand-bg); border: 1px solid var(--ins-border); border-radius: var(--ins-radius-lg);
}
.ins-rom-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-rom-head-title { font-size: var(--ins-fs-title); font-weight: var(--ins-fw-heading, 700); color: var(--ins-text-strongest); }
.ins-rom-head-sub { font-size: var(--ins-fs-label); color: var(--ins-text-muted); }
.ins-rom-head .ins-btn { flex-shrink: 0; }
/* #226: the ROM switcher — the header title is the button; a small menu drops below it. */
.ins-rom-switch { position: relative; align-self: stretch; min-width: 0; }
.ins-rom-switch-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 6px; margin-left: -6px;
  font: inherit; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; text-align: left; }
.ins-rom-switch-btn:hover, .ins-rom-switch-btn:focus-visible, .ins-rom-switch-btn[aria-expanded="true"] { border-color: var(--ins-border); background: var(--ins-surface); }
.ins-rom-switch-btn .ins-rom-head-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-rom-switch-caret { color: var(--ins-text-muted); font-size: 12px; }
.ins-rom-menu { position: absolute; left: -6px; top: calc(100% + 4px); z-index: 40; width: 280px; max-width: calc(100vw - 32px); padding: 6px;
  box-sizing: border-box; background: var(--ins-surface); border: 1px solid var(--ins-border); border-radius: var(--ins-radius-lg);
  box-shadow: var(--ins-shadow-pop); }
.ins-rom-menu-rom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-rom-menu-rom.is-current { font-weight: 700; background: var(--ins-surface-muted); }
.ins-rom-menu-sep { height: 1px; margin: 4px 0; background: var(--ins-surface-muted); }
.ins-rom-menu-form { display: flex; flex-direction: column; gap: 6px; padding: 6px; margin: 0; }
.ins-rom-menu-label { font-size: var(--ins-fs-label); color: var(--ins-text-muted); }
.ins-rom-menu-input { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--ins-border); border-radius: 8px; }
.ins-rom-menu-error { margin: 0; font-size: var(--ins-fs-label); color: var(--ins-berry-tx); }
.ins-rom-menu-actions { display: flex; gap: 8px; }
.ins-rom-menu-confirm { font-size: 12px; font-weight: 600; color: var(--ins-text-strong); padding: 6px 10px 8px; }
/* --- Export view (#117) ------------------------------------------------------ */
.ins-view-export { max-width: 720px; }
.ins-export-card {
  background: var(--ins-surface); border: 1px solid var(--ins-border); border-radius: var(--ins-radius-lg);
  box-shadow: var(--ins-shadow-card); padding: 20px 22px; margin-bottom: 20px;
}
.ins-export-card h2 { font-size: var(--ins-fs-title); color: var(--ins-text-strongest); margin: 0 0 6px; }
.ins-export-card p { font-size: var(--ins-fs-body); color: var(--ins-text-muted); margin: 0 0 14px; line-height: 1.55; }
.ins-btn-sow { background: var(--ins-ok-tx); border-color: var(--ins-ok-tx); color: var(--ins-on-status); }
.ins-btn-sow:hover:not(:disabled) { filter: brightness(.9); }
.ins-export-drafts { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
/* --- Table Summary view (#114, prototype "Table Summary": 250px source
 * filter + a sticky-first-column pivot, sources × ROM sections) ------------- */
.ins-table-wrap {
  display: flex; background: var(--ins-surface); border: 1px solid var(--ins-border-alt);
  border-radius: 12px; box-shadow: var(--ins-shadow-header); overflow: hidden; min-height: 60vh;
}
.ins-table-side {
  width: 220px; flex-shrink: 0; border-right: 1px solid var(--ins-border-alt);
  padding: 16px 14px; background: var(--ins-bg);
}
.ins-table-intro { font-size: var(--ins-fs-body); color: var(--ins-text-muted); line-height: 1.5; margin: 0 0 14px; }
.ins-table-side-rule { border-top: 1px solid var(--ins-surface-muted); margin: 8px 0; }
.ins-table-src {
  display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none;
  padding: 7px 4px; cursor: pointer; font-family: inherit; text-align: left; border-radius: 6px;
}
.ins-table-src:hover { background: var(--ins-surface-muted); }
.ins-table-src.is-all .ins-table-src-name { font-size: var(--ins-fs-body); }
.ins-table-box {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 4px; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ins-on-accent);
  background: var(--ins-surface); border: 1px solid var(--ins-border);
}
.ins-table-box.is-on { background: var(--ins-text-strongest); border-color: var(--ins-text-strongest); }
.ins-table-src-icon { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ins-text-faint); }
.is-gong .ins-table-src-icon { background: var(--ins-chat-alt); }
.is-rfp  .ins-table-src-icon { background: var(--ins-included); }
.is-doc  .ins-table-src-icon { background: var(--ins-warn); }
.is-web  .ins-table-src-icon { background: var(--ins-brand); }
.is-lost .ins-table-src-icon { background: var(--ins-border); }
.ins-table-src-name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ins-text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ins-table-src-count { font-size: var(--ins-fs-label); color: var(--ins-text-faint); flex-shrink: 0; }
.ins-table-none, .ins-table-empty { font-size: var(--ins-fs-body); color: var(--ins-text-faint); font-style: italic; margin: 0; padding: 14px 16px; }
.ins-table-scroll { flex: 1; min-width: 0; overflow-x: auto; }   /* #249: the 14 columns scroll here */
/* #115: fixed layout — the section columns share the width equally, the source
 * column is fixed, chips wrap. #249: 14 columns no longer fit a laptop, so the
 * table is at least source 140 + 14 × 110 px and scrolls inside .ins-table-scroll. */
.ins-table { border-collapse: collapse; width: 100%; min-width: 1680px; table-layout: fixed; }
.ins-table-th {
  background: var(--ins-bg); font-size: var(--ins-fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ins-text-muted); text-align: left; padding: 10px 8px;
  border-bottom: 1px solid var(--ins-border); border-right: 1px solid var(--ins-surface-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ins-table-th-src { width: 140px; border-right-color: var(--ins-border); }
.ins-table-td {
  padding: 8px; border-bottom: 1px solid var(--ins-surface-muted); border-right: 1px solid var(--ins-surface-muted);
  vertical-align: top;
}
.ins-table-td-src { background: var(--ins-surface); padding: 12px 10px; border-right-color: var(--ins-border); }
.ins-table-src-title { display: inline-flex; align-items: center; gap: 7px; }
.ins-table-src-title .ins-table-src-name { font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.ins-table-src-meta { font-size: var(--ins-fs-label); color: var(--ins-text-faint); margin-top: 2px; padding-left: 15px; }
.ins-table-chip {
  display: flex; align-items: flex-start; gap: 6px; padding: 6px 7px; margin-bottom: 6px; min-width: 0;
  border-radius: 7px; background: var(--ins-included-bg); border: 1px solid var(--ins-included-chip);
}
.ins-table-chip:last-child { margin-bottom: 0; }
.ins-table-chip.is-excluded { background: var(--ins-surface-muted); border-color: var(--ins-border); }
.ins-table-chip.is-excluded .ins-table-chip-text { color: var(--ins-text-muted); text-decoration: line-through; }
.ins-table-chip.is-orphan { border-style: dashed; background: var(--ins-surface-muted); }
.ins-table-chip.is-orphan .ins-table-chip-text { color: var(--ins-text-muted); text-decoration: line-through; }
.ins-table-chip .ins-badge-orphan, .ins-table-chip .ins-badge-chat, .ins-table-chip .ins-badge-proposed { text-decoration: none; }
.ins-table-chip .ins-row-toggle { margin-top: 0; }
.ins-table-chip-text {
  background: none; border: none; padding: 0; margin: 0; font-family: inherit; font-size: 11.5px;
  color: var(--ins-text); line-height: 1.45; text-align: left; cursor: pointer; flex: 1; min-width: 0;
  overflow-wrap: anywhere;
}
.ins-table-chip-text:hover span:first-child { text-decoration: underline; }
/* #116: the chip text is a jump into the source view; the target row flashes. */
.ins-table-chip-text.is-jump:hover span:first-child { color: var(--ins-brand-text); }
@keyframes ins-focus-fade {
  0%   { background: var(--ins-warn-bg); box-shadow: 0 0 0 2px var(--ins-warn); }
  70%  { background: var(--ins-warn-bg); box-shadow: 0 0 0 2px var(--ins-warn); }
  100% { background: transparent; box-shadow: none; }
}
.ins-gong-row.is-focus { animation: ins-focus-fade 2.5s ease-out forwards; border-radius: 8px; }
.ins-rfp-table tr.is-focus td { animation: ins-focus-fade 2.5s ease-out forwards; }
.ins-table-foot { font-size: var(--ins-fs-meta); color: var(--ins-text-faint); padding: 12px 16px; margin: 0; }
/* --- Gong Calls view (#112, prototype "Gong Calls": purple accent, one card
 * per call, rows = ts / speaker + role / quote / INSIGHT box) ---------------- */
.ins-view-gong { max-width: 920px; margin: 0 auto; }   /* #123: centred like the prose views */
/* #123: call cards are collapsed by default — the head is the toggle; the chevron turns when open. */
.ins-gong-call-head { cursor: pointer; user-select: none; }
.ins-gong-call-head:hover { background: var(--ins-surface-muted); }
.ins-gong-call-head:focus-visible { outline: 2px solid var(--ins-chat); outline-offset: -2px; }
.ins-gong-call.is-collapsed .ins-gong-call-head { border-bottom: none; }
.ins-gong-chevron { margin-left: 10px; color: var(--ins-text-faint); font-size: 14px; line-height: 1; flex-shrink: 0; transition: transform 0.15s; }
.ins-gong-call:not(.is-collapsed) .ins-gong-chevron { transform: rotate(90deg); }
.ins-gong-banner {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 14px 18px;
  background: var(--ins-gong-bg); border: 1px solid var(--ins-chat-bg); border-radius: 10px;
}
.ins-gong-banner-icon { color: var(--ins-chat-alt); flex-shrink: 0; margin-top: 1px; }
.ins-gong-banner-title { font-size: 14px; font-weight: var(--ins-fw-heading, 700); color: var(--ins-text-strongest); }
.ins-gong-banner-sub { font-size: 12px; color: var(--ins-text-muted); margin-top: 2px; line-height: 1.5; }
.ins-gong-call {
  background: var(--ins-surface); border: 1px solid var(--ins-border-alt); border-radius: 12px;
  box-shadow: var(--ins-shadow-header); margin-bottom: 24px; overflow: hidden;
}
.ins-gong-call-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--ins-surface-muted); }
.ins-gong-call-title-row { display: flex; align-items: center; gap: 10px; }
.ins-gong-call-icon { color: var(--ins-chat-alt); flex-shrink: 0; }
.ins-gong-call-title { font-size: var(--ins-fs-subtitle); font-weight: var(--ins-fw-heading, 700); color: var(--ins-text-strongest); }
.ins-gong-call-count {
  margin-left: auto; font-size: var(--ins-fs-label); font-weight: 600; color: var(--ins-text-secondary);
  background: var(--ins-bg); border: 1px solid var(--ins-border); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.ins-gong-call-meta { font-size: var(--ins-fs-meta); color: var(--ins-text-faint); margin: 3px 0 10px; padding-left: 26px; }
.ins-gong-people { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-left: 26px; }
.ins-gong-person { display: inline-flex; align-items: center; gap: 6px; }
.ins-gong-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ins-border); color: var(--ins-text-secondary);
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.ins-gong-person-name { font-size: var(--ins-fs-meta); font-weight: 600; color: var(--ins-text-strong); }
/* Role chip — the prototype's two colourways: customer green, everyone else purple. */
.ins-role {
  font-size: var(--ins-fs-micro); font-weight: 600; padding: 2px 8px; border-radius: 5px; white-space: nowrap;
  color: var(--ins-gong); background: var(--ins-chat-bg); border: 1px solid var(--ins-gong-border);
}
.ins-role.is-customer { color: var(--ins-included); background: var(--ins-ok-bg); border-color: var(--ins-included-chip); }
.ins-role.is-unknown { color: var(--ins-text-muted); background: var(--ins-surface-muted); border-color: var(--ins-border); }
.ins-gong-none { font-size: var(--ins-fs-body); color: var(--ins-text-faint); font-style: italic; margin: 0; padding: 14px 20px; }
.ins-gong-row { display: flex; gap: 16px; padding: 18px 20px; border-top: 1px solid var(--ins-surface-muted); }
.ins-gong-ts {
  font-family: ui-monospace, Menlo, monospace; font-size: var(--ins-fs-label); font-weight: 600;
  color: var(--ins-text-muted); background: var(--ins-surface-muted); border-radius: 5px; padding: 3px 6px;
  height: fit-content; flex-shrink: 0; margin-top: 1px;
}
.ins-gong-row-main { flex: 1; min-width: 0; }
.ins-gong-speaker { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ins-gong-speaker-name { font-size: 12.5px; font-weight: 700; color: var(--ins-text-strong); }
.ins-gong-quote {
  margin: 0; border: 1px solid var(--ins-border); border-radius: var(--ins-radius); padding: 11px 14px;
  font-size: var(--ins-fs-body); font-style: italic; color: var(--ins-text-secondary); line-height: 1.65;
}
.ins-gong-insight {
  margin-top: 8px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: var(--ins-included-bg); border: 1px solid var(--ins-included-chip); border-radius: var(--ins-radius);
}
.ins-gong-row.is-excluded .ins-gong-insight { background: var(--ins-surface-muted); border-color: var(--ins-border); }
.ins-gong-row.is-excluded .ins-gong-insight-text { color: var(--ins-text-muted); text-decoration: line-through; }
.ins-gong-row.is-orphan .ins-gong-insight { border-style: dashed; background: var(--ins-surface-muted); }
.ins-gong-row.is-orphan .ins-gong-insight-text,
.ins-gong-row.is-orphan .ins-gong-quote { color: var(--ins-text-muted); text-decoration: line-through; }
.ins-gong-row.is-orphan .ins-badge-orphan { text-decoration: none; }
.ins-gong-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--ins-gong); background: var(--ins-gong-bg);
  border: 1px solid var(--ins-gong-border); border-radius: 4px; padding: 2px 6px; flex-shrink: 0; margin-top: 2px;
}
.ins-gong-insight-text { flex: 1; min-width: 0; font-size: var(--ins-fs-body); color: var(--ins-text); line-height: 1.55; }
/* #171: a FROM CHAT ghost (Gong, Documents, Website, RFP) carries its claim and the add — the same box as a
   signal's insight, the popover's claim weight; the compact add dialog opens under it. */
.ins-ghost-add-box {
  margin-top: 8px; padding: 10px 12px;
  background: var(--ins-included-bg); border: 1px solid var(--ins-included-chip); border-radius: var(--ins-radius);
}
.ins-ghost-claim-row { display: flex; align-items: flex-start; gap: 10px; }
.ins-ghost-claim { flex: 1; min-width: 0; font-size: var(--ins-fs-body); font-weight: 600; color: var(--ins-text-strongest); line-height: 1.55; }
.ins-ghost-add-box .ins-chat-add-dialog { margin-top: 10px; }
.ins-rfp-ghost .ins-ghost-add-box { margin-top: 0; }   /* #173: the RFP cell has its own padding … */
.ins-rfp-ghost .ins-ghost-claim-row { flex-direction: column; align-items: flex-start; gap: 6px; }   /* … and is too narrow for a row */
.ins-rfp-ghost .ins-ghost-claim { flex: none; width: 100%; }
.ins-gong-section {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
  color: var(--ins-brand-text); background: var(--ins-info-bg); border: 1px solid var(--ins-info-line); border-radius: 999px; padding: 3px 9px;
}
@media (max-width: 1100px) {
  .rd-layout.has-ins-nav { flex-wrap: wrap; }
  .ins-nav { position: static; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid var(--ins-border-alt); }
  .ins-nav-group, .ins-nav-rule, .ins-nav-brand-sub, .ins-nav-brand-customer, .ins-nav-thread, .ins-nav-thread-new { display: none; }   /* #137: no chat list in the top-row nav */
  .ins-nav-brand { border: none; margin: 0; padding: 4px 12px; }
  .ins-nav-item { width: auto; }
  .ins-nav-account { margin-top: 0; margin-left: auto; border-top: none; padding-top: 0; }
  .ins-nav-menu { left: auto; right: 0; min-width: 220px; }
  .rd-layout.has-ins-nav .rd-paper { min-height: 0; }
  .ins-shell { flex-direction: column; }   /* QA 09-29: the list + form pages stack the top-row nav too */
  /* #242: style.css pins body to ≥1200px for the legacy dashboard; in this top-row
     layout the ROM page fits the window instead. Desktop (≥1101px) is untouched. */
  body:has(> .rd-layout.has-ins-nav) { min-width: 0; }
}

/* --- #136: the Chat view folds both columns into floating strips ------------
 * Anton, 2026-09-24: "a clean and possible chat experience from the
 * beginning". Desktop only (the ≤1100px layout puts the nav in a top row and
 * is untouched). Both columns leave the flow (fixed) and slide away so exactly
 * one strip width stays on screen; the paper keeps that much room on each
 * side, so nothing reflows when a column comes out over it on hover or
 * keyboard focus. Folded, a column has no surface and no border — the hexagon,
 * the cogwheel and the customer's initial float in the corners. */
.ins-nav-strip, .rd-rail-strip { display: none; }
@media (min-width: 1101px) {
  .rd-layout.has-ins-nav.is-view-chat .ins-nav,
  .rd-layout.has-ins-nav.is-view-chat .rd-rail,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav,
  .rd-layout.has-ins-nav.is-sizing-chat .rd-rail {
    position: fixed; top: 0; bottom: 0; height: 100vh; z-index: 40;
    transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
    background: transparent; box-shadow: none;
  }
  .rd-layout.has-ins-nav.is-view-chat .ins-nav,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav { left: 0; border-right: none; transform: translateX(calc(-100% + var(--ins-strip))); }
  .rd-layout.has-ins-nav.is-view-chat .rd-rail,
  .rd-layout.has-ins-nav.is-sizing-chat .rd-rail { right: 0; border-left: none; transform: translateX(calc(100% - var(--ins-strip))); }
  /* folded: the column's own content is invisible (it sits off-screen anyway), the strip shows */
  .rd-layout.has-ins-nav.is-view-chat .ins-nav > :not(.ins-nav-strip),
  .rd-layout.has-ins-nav.is-view-chat .rd-rail > :not(.rd-rail-strip),
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav > :not(.ins-nav-strip),
  .rd-layout.has-ins-nav.is-sizing-chat .rd-rail > :not(.rd-rail-strip) { opacity: 0; transition: opacity 120ms ease; }
  .rd-layout.has-ins-nav.is-view-chat .ins-nav-strip,
  .rd-layout.has-ins-nav.is-view-chat .rd-rail-strip,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav-strip,
  .rd-layout.has-ins-nav.is-sizing-chat .rd-rail-strip {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    position: absolute; top: 0; bottom: 0; width: var(--ins-strip); padding: 18px 0 16px; box-sizing: border-box;
    opacity: 1; transition: opacity 120ms ease; pointer-events: none;
  }
  /* #569: the nav is a scroll box (a long Chats list), and an absolute strip scrolled with it: the
   * cogwheel rode up. Sticky keeps the strip on the nav's visible box; the margins cancel the nav's
   * padding (16px 12px) and its 2px gap so the strip takes no room and sits exactly where it did. */
  .rd-layout.has-ins-nav.is-view-chat .ins-nav-strip,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav-strip,
  .ins-shell .ins-nav-strip {
    position: sticky; top: -16px; bottom: auto; flex: none; align-self: flex-end;
    height: 100vh; margin: -16px -12px calc(-100vh + 14px) 0;
  }
  /* #571: the gear was dead. Pointing at it slides the nav out, so what ends up under the pointer is
   * the open nav's bottom-left corner, which was whatever the scroll put there (a Recent link, a chat row's ⋯).
   * Now the account row sticks to the nav's foot, so that corner is always the account button. The strip
   * paints above the folded content (z-index), the folded content takes no clicks, and the folded
   * nav shows no scrollbar. */
  .rd-layout.has-ins-nav.is-view-chat .ins-nav-strip,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav-strip,
  .ins-shell .ins-nav-strip { z-index: 1; }
  .rd-layout.has-ins-nav.is-view-chat .ins-nav:not(:hover):not(:focus-within),
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav:not(:hover):not(:focus-within),
  .ins-shell .ins-nav:not(:hover):not(:focus-within) { scrollbar-width: none; }
  .rd-layout.has-ins-nav.is-view-chat .ins-nav:not(:hover):not(:focus-within) > :not(.ins-nav-strip),
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav:not(:hover):not(:focus-within) > :not(.ins-nav-strip),
  .ins-shell .ins-nav:not(:hover):not(:focus-within) > :not(.ins-nav-strip) { pointer-events: none; }
  .rd-layout.has-ins-nav.is-view-chat .ins-nav:hover .ins-nav-strip-gear,
  .rd-layout.has-ins-nav.is-view-chat .ins-nav:focus-within .ins-nav-strip-gear,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav:hover .ins-nav-strip-gear,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav:focus-within .ins-nav-strip-gear,
  .ins-shell .ins-nav:hover .ins-nav-strip-gear,
  .ins-shell .ins-nav:focus-within .ins-nav-strip-gear { pointer-events: none; }
  .rd-layout.has-ins-nav.is-view-chat .ins-nav-account,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav-account,
  .ins-shell .ins-nav-account {
    position: sticky; bottom: -12px; z-index: 1; margin-bottom: -12px; padding-bottom: 12px; background: var(--ins-surface);
  }
  .rd-layout.has-ins-nav.is-view-chat .rd-rail-strip,
  .rd-layout.has-ins-nav.is-sizing-chat .rd-rail-strip { left: 0; justify-content: flex-start; }
  .ins-hexagon { color: var(--ins-brand-text); }
  .ins-nav-strip-gear { border: none; background: transparent; padding: 6px; border-radius: 8px; cursor: pointer; color: var(--ins-text-faint); pointer-events: auto; }
  .ins-nav-strip-gear:hover { color: var(--ins-text-strong); background: var(--ins-surface-muted); }
  .rd-rail-strip-letter { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ins-text-strongest); line-height: 1; }
  /* out: the column slides over the paper with its surface and a shadow */
  .rd-layout.has-ins-nav.is-view-chat .ins-nav:hover,
  .rd-layout.has-ins-nav.is-view-chat .ins-nav:focus-within,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav:hover,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav:focus-within {
    transform: translateX(0); background: var(--ins-surface); border-right: 1px solid var(--ins-border-alt); box-shadow: var(--ins-shadow-pop);
  }
  .rd-layout.has-ins-nav.is-view-chat .rd-rail:hover,
  .rd-layout.has-ins-nav.is-view-chat .rd-rail:focus-within,
  .rd-layout.has-ins-nav.is-sizing-chat .rd-rail:hover,
  .rd-layout.has-ins-nav.is-sizing-chat .rd-rail:focus-within {
    transform: translateX(0); background: var(--ins-surface-muted); border-left: 1px solid var(--ins-border-alt); box-shadow: var(--ins-shadow-pop);
  }
  .rd-layout.has-ins-nav.is-view-chat .ins-nav:hover > :not(.ins-nav-strip),
  .rd-layout.has-ins-nav.is-view-chat .ins-nav:focus-within > :not(.ins-nav-strip),
  .rd-layout.has-ins-nav.is-view-chat .rd-rail:hover > :not(.rd-rail-strip),
  .rd-layout.has-ins-nav.is-view-chat .rd-rail:focus-within > :not(.rd-rail-strip),
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav:hover > :not(.ins-nav-strip),
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav:focus-within > :not(.ins-nav-strip),
  .rd-layout.has-ins-nav.is-sizing-chat .rd-rail:hover > :not(.rd-rail-strip),
  .rd-layout.has-ins-nav.is-sizing-chat .rd-rail:focus-within > :not(.rd-rail-strip) { opacity: 1; }
  .rd-layout.has-ins-nav.is-view-chat .ins-nav:hover .ins-nav-strip,
  .rd-layout.has-ins-nav.is-view-chat .ins-nav:focus-within .ins-nav-strip,
  .rd-layout.has-ins-nav.is-view-chat .rd-rail:hover .rd-rail-strip,
  .rd-layout.has-ins-nav.is-view-chat .rd-rail:focus-within .rd-rail-strip,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav:hover .ins-nav-strip,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-nav:focus-within .ins-nav-strip,
  .rd-layout.has-ins-nav.is-sizing-chat .rd-rail:hover .rd-rail-strip,
  .rd-layout.has-ins-nav.is-sizing-chat .rd-rail:focus-within .rd-rail-strip { opacity: 0; pointer-events: none; }
  /* the paper: no title (the opportunity's name is in the brand block), room for the two strips, a reading width */
  .rd-layout.has-ins-nav.is-view-chat .rd-paper-title { display: none; }
  .rd-layout.has-ins-nav.is-view-chat .rd-paper,
  .rd-layout.has-ins-nav.is-sizing-chat .rd-paper { padding-left: calc(var(--ins-strip) + 24px); padding-right: calc(var(--ins-strip) + 24px); }
  .rd-layout.has-ins-nav.is-view-chat .ins-view-chat .ins-chat { max-width: 860px; width: 100%; margin: 0 auto; }
}

/* --- #121: readable type in every view except the Table Summary ---------
 * Anton, 2026-09-23 (QA of #118–#120): "the text is a little small and hard
 * to read in the views". One step up the scale, scoped to the paper through
 * the layout's view class, so the nav, the rail and the Table Summary (dense
 * by design) keep the prototype sizes. First the tokens — every --ins-fs-*
 * consumer inside the paper follows — then the sizes that were written in px. */
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper {
  --ins-fs-micro: 11px;
  --ins-fs-label: 12px;
  --ins-fs-meta: 13px;
  --ins-fs-body: 14px;
  --ins-fs-emph: 15px;
  --ins-fs-subtitle: 16px;
  --ins-fs-title: 20px;
}
/* ROM Summary / T-shirt Sizing prose (rules live in the template's <style>). */
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-section-head h2 { font-size: 17px; }
/* #131: the composed ROM prose reads like the chat prose — a comfortable
   measure, 1.6 leading, paragraph gaps wider than line gaps, labels bold and
   nothing else. */
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body { font-size: 17px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body { font-family: var(--ins-font-reading); line-height: 1.6; max-width: 70ch; text-align: left; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body p { margin: 0 0 1.15em; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body ul,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body ol { margin: 0 0 1.15em; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body li { margin: 0 0 4px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body > :last-child { margin-bottom: 0; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body strong { font-weight: 650; color: var(--ins-text-strongest); }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body h1,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body h2,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body h3 { font-size: 16px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-body code { font-size: 14px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-empty,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-skip-note,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-hint,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-size-bands,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-size-pending { font-size: 14px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-editor textarea { font-size: 14px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-citation,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-rubric th,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .rd-rubric td { font-size: 13px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-btn-primary,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-btn-sow,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-action-btn { font-size: 14px; }
/* Gong Calls view. */
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-gong-banner-title { font-size: 15px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-gong-banner-sub { font-size: 13px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-gong-speaker-name { font-size: 13.5px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-gong-section { font-size: 11.5px; }
/* RFP view. */
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-title { font-size: 15px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-sub,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-count,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-num,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-pick-meta { font-size: 13px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-file,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-sheetname,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-tab { font-size: 14px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-pick-item { font-size: 14.5px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-table th,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-section,
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-tab-count { font-size: 12px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-rfp-table td { font-size: 14px; }
/* Chat view. */
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-chat-composer .ins-chat-input { font-size: 16px; }
.rd-layout.has-ins-nav:not(.is-view-table) .rd-paper .ins-chat-tray-btn { font-size: 14px; }

/* --- #122: the shell for the pages outside an opportunity ----------------
 * The sessions list and the create form wear the dashboard's chrome: the same
 * left nav (templates/_ins_shell_nav.html), no top bar, content on a white
 * paper capped like the prose views. Flag-off pages never load this file. */
/* ADR 0037 D1/D4 (#454): every page that loads this file is a 2.0 page: Inter at the mockup's
   body weight. Chat answer prose keeps its serif reading face (.ins-chat-prose, below). */
body { font-family: var(--ins-font); font-weight: var(--ins-fw-body); -webkit-font-smoothing: antialiased; }
.ins-shell { display: flex; align-items: stretch; min-height: 100vh; background: var(--ins-surface); }
/* QA 09-29: style.css pins body to ≥1200px for the dashboard; these two one-column pages fit any width */
body:has(> .ins-shell) { min-width: 0; }
.ins-shell [x-cloak] { display: none !important; }
.ins-shell-main { flex: 1; min-width: 0; padding: 40px 48px 64px; background: var(--ins-surface); }
.ins-shell-content { max-width: 920px; margin: 0 auto; }
.ins-shell-content.is-narrow { max-width: 720px; }
a.ins-nav-item { text-decoration: none; }
.ins-shell .session-row, .ins-shell .new-opp-card { border-color: var(--ins-border); }
.ins-shell h2 { color: var(--ins-text-strongest); }

/* --- #172: both pages match the opportunity view's Chat look -------------
 * The nav folds to the Chat view's strip (the #136 rules, keyed on the shell
 * instead of the view), the list page opens on the chat's greeting hero, and
 * the list and the form lose their card chrome. Below 1101px the nav stays
 * open, as it does in the dashboard. */
@media (min-width: 1101px) {
  .ins-shell .ins-nav {
    position: fixed; top: 0; bottom: 0; left: 0; height: 100vh; z-index: 40;
    border-right: none; background: transparent; box-shadow: none;
    transform: translateX(calc(-100% + var(--ins-strip)));
    transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  }
  .ins-shell .ins-nav > :not(.ins-nav-strip) { opacity: 0; transition: opacity 120ms ease; }
  .ins-shell .ins-nav-strip {   /* placed sticky by the #569 rule above */
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    width: var(--ins-strip); padding: 18px 0 16px; box-sizing: border-box;
    opacity: 1; transition: opacity 120ms ease; pointer-events: none;
  }
  .ins-shell .ins-nav:hover, .ins-shell .ins-nav:focus-within {
    transform: translateX(0); background: var(--ins-surface); border-right: 1px solid var(--ins-border-alt); box-shadow: var(--ins-shadow-pop);
  }
  .ins-shell .ins-nav:hover > :not(.ins-nav-strip), .ins-shell .ins-nav:focus-within > :not(.ins-nav-strip) { opacity: 1; }
  .ins-shell .ins-nav:hover .ins-nav-strip, .ins-shell .ins-nav:focus-within .ins-nav-strip { opacity: 0; pointer-events: none; }
  .ins-shell .ins-shell-main { padding-left: calc(var(--ins-strip) + 24px); padding-right: calc(var(--ins-strip) + 24px); }
}
.ins-shell .ins-shell-content { max-width: 760px; }
.ins-shell .ins-shell-content.is-narrow { max-width: 680px; }

/* the list page: greeting hero, then the opportunities as one quiet list */
.ins-home-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 0 44px; }
.ins-home-greeting { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--ins-text-strongest); margin: 0 0 22px; }
.ins-home-new {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--ins-radius-pill);
  background: var(--ins-chat); color: var(--ins-on-accent); font-size: var(--ins-fs-emph); font-weight: 600; text-decoration: none;
  box-shadow: var(--ins-shadow-card); transition: background-color 150ms ease;
}
.ins-home-new:hover { background: var(--ins-chat-alt); }
.ins-home-list-title { font-size: 16px; font-weight: var(--ins-fw-heading, 700); margin: 0 0 10px; padding: 0 4px; color: var(--ins-text-strong); }
.ins-shell .session-list { gap: 0; border: 1px solid var(--ins-border); border-radius: var(--ins-radius-lg); overflow: hidden; }
.ins-shell .session-row-wrapper + .session-row-wrapper { border-top: 1px solid var(--ins-border); }
.ins-shell .session-row { border: none; border-radius: 0; padding: 18px 20px 18px 14px; }
.ins-shell .session-row-shared { border-left: 3px solid var(--ins-warn); }   /* #181: the reset above hid the shared marker */
.ins-shell .session-row:hover { box-shadow: none; transform: none; background: var(--ins-surface-muted); }
.ins-shell .session-name { font-size: 17px; color: var(--ins-text-strongest); }   /* #182: a step bigger, easier to read */
.ins-shell .session-name-row { margin-bottom: 4px; }
.ins-shell .session-meta { font-size: 14px; color: var(--ins-text-muted); gap: 6px; }
.ins-shell .variant-pill { display: none; }
.ins-shell .session-row-arrow { display: none; }
.ins-shell .session-row-expand-toggle.is-empty { visibility: hidden; }
.ins-shell .session-delete-btn { opacity: 0; width: 28px; height: 28px; font-size: 18px; }
.ins-shell .session-row:hover .session-delete-btn, .ins-shell .session-delete-btn:focus-visible { opacity: 1; }
.ins-shell .session-children { margin: 0; padding: 0 14px 12px 44px; gap: 2px; }
.ins-shell .session-child-row { background: transparent; border: none; padding: 10px 12px; }
.ins-shell .session-child-row .session-name { font-size: 16px; }
.ins-shell .session-child-row .session-meta { font-size: 13.5px; }
.ins-shell .session-child-row:hover { background: var(--ins-surface-muted); }
.ins-shell .verification-details { margin: 0 12px 12px; }

/* the create form: the hero's heading, no card, sentence-case labels, quiet fields */
.ins-shell .new-opp-heading { text-align: center; padding: 32px 0 8px; }
.ins-shell .new-opp-heading h2 { font-size: 26px; font-weight: var(--ins-fw-heading, 700); letter-spacing: -0.01em; margin: 0 0 8px; }
.ins-shell .new-opp-heading p { font-size: var(--ins-fs-emph); color: var(--ins-text-muted); margin: 0 0 36px; }
.ins-shell .new-opp-card { background: transparent; border: none; border-radius: 0; padding: 0; }
.ins-shell .field-label {
  text-transform: none; letter-spacing: 0; font-size: var(--ins-fs-emph); font-weight: 600;
  color: var(--ins-text-strong); margin-bottom: 8px;
}
.ins-shell .name-input {
  font-size: 15px; padding: 11px 14px; background: var(--ins-surface); border: 1px solid var(--ins-border);
  border-radius: var(--ins-radius-lg); box-shadow: var(--ins-shadow-card);
}
.ins-shell .name-input:focus { border-color: var(--ins-chat); box-shadow: 0 0 0 3px var(--ins-chat-bg); }
.ins-shell .upload-hint { font-size: var(--ins-fs-meta); color: var(--ins-text-muted); line-height: 1.5; }
.ins-shell .variant-section, .ins-shell .upload-section { margin-top: 28px; }
.ins-shell .gong-section { margin-top: 28px; }
.ins-shell .upload-dropzone { border: 1.5px dashed var(--ins-divider); background: var(--ins-surface); padding: 28px 24px; }
.ins-shell .upload-dropzone:hover, .ins-shell .upload-dropzone.dragging { border-color: var(--ins-chat); background: var(--ins-surface-muted); }
.ins-shell .upload-dropzone.has-file { border-color: var(--ins-included); background: var(--ins-included-bg); }
.ins-shell .upload-icon { font-size: 28px; margin-bottom: 8px; color: var(--ins-text-faint); }
.ins-shell .upload-text { font-size: var(--ins-fs-emph); color: var(--ins-text-strong); margin-bottom: 4px; }
.ins-shell .actions { border-top: none; padding-top: 0; margin-top: 32px; }
.ins-shell .submit-btn { background: var(--ins-chat); border-radius: var(--ins-radius-pill); padding: 11px 24px; font-size: var(--ins-fs-emph); }
.ins-shell .submit-btn:hover:not(:disabled) { background: var(--ins-chat-alt); }
/* phone width: a 16px gutter and a smaller hero (after the rules above so it wins) */
@media (max-width: 640px) {
  /* #224: the coverage chart's section names take a narrower column */
  .ins-cov-row { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); }
  .ins-shell .ins-shell-main { padding: 20px 16px 48px; }
  .ins-home-hero { padding: 28px 0 28px; }
  .ins-home-greeting { font-size: 21px; }
  .ins-shell .new-opp-heading { padding-top: 12px; }
  .ins-shell .new-opp-heading h2 { font-size: 22px; }
  .ins-shell .session-row { padding: 14px 12px 14px 8px; }
  /* #242: the ROM page — the same 16px gutter, and the ROM header card puts its
     button under the name and note instead of squeezing them to one word a line */
  .rd-layout.has-ins-nav .rd-paper { flex-basis: 100%; padding: 20px 16px 48px; }
  .rd-layout.has-ins-nav .rd-rail { width: 100%; height: auto; position: static; border-left: none;
    border-top: 1px solid var(--ins-border-alt); }   /* the rail follows the paper, full width */
  .ins-rom-head { flex-wrap: wrap; }
  .ins-rom-head-text { flex: 1 1 100%; }
  .rd-layout.has-ins-nav .rd-section-head { flex-wrap: wrap; row-gap: 6px; }   /* Prose | Signals is never cut */
  .rd-layout.has-ins-nav .rd-section-head .ins-lens { flex-shrink: 0; }
}

/* --- #72b: Website view (prototype "Website") ----------------------------
 * One card per crawled page in a responsive grid; the page's own og:image
 * (no external rendering) or a striped fallback; the page's signals beneath.
 * Row states (excluded / orphan / focus / ghost) mirror the Gong view. */
.ins-view-web { max-width: 1100px; margin: 0 auto; }
.ins-web-site + .ins-web-site { margin-top: 32px; }
/* #157: Pages | Products tabs and the plain product list (ADR 0020 d11; #158 grows the rows). */
.ins-web-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--ins-border); }
.ins-web-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 14px;
  font: inherit; font-size: var(--ins-fs-meta); font-weight: 600; color: var(--ins-text-muted); cursor: pointer; }
.ins-web-tab:hover { color: var(--ins-text-strong); }
.ins-web-tab.is-active { color: var(--ins-brand-text); border-bottom-color: var(--ins-brand); }
.ins-cat-head { margin: 0 0 10px; font-size: var(--ins-fs-meta); color: var(--ins-text-muted); }
.ins-cat-count { font-weight: 600; color: var(--ins-text-strong); }
.ins-cat-asof { color: var(--ins-text-muted); font-size: 0.85em; }
.ins-cat-hint { color: var(--ins-text-secondary); font-size: 0.85em; }
.ins-cat-update { border: 0; background: none; padding: 0; font: inherit; color: var(--ins-brand-text); cursor: pointer; }
.ins-cat-update:hover { color: var(--ins-brand-text-hover); text-decoration: underline; }
.ins-cat-update.is-on { text-decoration: underline; }
/* #167: a product the last update added, and a ROM item whose product page has left the website. */
.ins-cat-new { font-size: var(--ins-fs-micro); font-weight: 600; color: var(--ins-brand-text); flex: 0 0 auto; }
.ins-badge-gone { display: inline-block; margin-left: 6px; font-size: var(--ins-fs-micro); color: var(--ins-text-muted);
  font-style: italic; white-space: nowrap; }
.ins-cat-message { margin: 0 0 14px; font-size: var(--ins-fs-meta); color: var(--ins-text-secondary); line-height: 1.5; }
.ins-cat-list { list-style: none; margin: 0; padding: 0; background: var(--ins-surface); border: 1px solid var(--ins-border-alt);
  border-radius: 12px; overflow: hidden; }
.ins-cat-list:empty { display: none; }
.ins-cat-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--ins-border); min-width: 0; }
.ins-cat-row:first-child { border-top: 0; }
/* QA 09-29: a long name wraps instead of running out of the row (Xylem "Standard Xchange Brazepak…"); the path gets what is left */
.ins-cat-name { font-weight: 600; color: var(--ins-brand-text); text-decoration: none; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ins-cat-name:hover { text-decoration: underline; color: var(--ins-brand-text-hover); }
.ins-cat-path { font-size: var(--ins-fs-label); color: var(--ins-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 0; }
/* #158: family groups, thumbnail + name + variant chips + spec lines + datasheets. */
.ins-cat-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ins-cat-filter { margin-left: auto; min-width: 200px; padding: 6px 10px; border: 1px solid var(--ins-border-alt);
  border-radius: var(--ins-radius, 6px); font: inherit; font-size: var(--ins-fs-meta); background: var(--ins-surface); color: var(--ins-text); }
.ins-cat-family { margin: 0 0 18px; }
.ins-cat-family-name { margin: 0 0 6px; font-size: var(--ins-fs-meta); font-weight: 600; color: var(--ins-text-strong); }
.ins-cat-family-n { font-weight: 400; color: var(--ins-text-faint); }
.ins-cat-family .ins-cat-row { align-items: flex-start; }
/* #159: the In ROM tick on each product, the family tick in its header, picks gone from the site. */
.ins-cat-focus { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--ins-fs-label);
  color: var(--ins-text-secondary); cursor: pointer; white-space: nowrap; padding-top: 2px; }
.ins-cat-focus input, .ins-cat-family-focus input { margin: 0; cursor: pointer; }
.ins-cat-row.is-focus .ins-cat-focus { color: var(--ins-brand-text); font-weight: 600; }
.ins-cat-family-focus { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ins-cat-family-focus input { order: -1; }   /* the box first; the name stays first in the text */
.ins-cat-family-rom { margin-left: 8px; font-weight: 400; color: var(--ins-brand-text); }
.ins-cat-gone .ins-cat-name { color: var(--ins-text-muted); text-decoration: line-through; }
.ins-badge-products { color: var(--ins-brand-text); background: var(--ins-brand-bg); }
.ins-cat-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--ins-surface-muted);
  display: flex; align-items: center; justify-content: center; }
.ins-cat-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ins-cat-thumb-tile { font-size: 20px; font-weight: 600; color: var(--ins-text-faint); text-transform: uppercase; }
.ins-cat-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ins-cat-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ins-cat-mark { border: 0; background: none; padding: 0 2px; margin: 0; cursor: pointer; line-height: 1; vertical-align: super;
  font-size: 0.8em; color: var(--ins-text-strong); opacity: 0.5; text-decoration: none; }
.ins-cat-mark:hover { opacity: 1; }
.ins-cat-variants { display: flex; flex-wrap: wrap; gap: 4px; }
.ins-cat-chip { border: 1px solid var(--ins-border-alt); background: var(--ins-surface-muted); color: var(--ins-text);
  border-radius: 999px; padding: 1px 8px; font: inherit; font-size: var(--ins-fs-label); cursor: pointer; text-decoration: none; }
.ins-cat-chip:hover { border-color: var(--ins-brand); color: var(--ins-brand-text); }
.ins-cat-specs { margin: 0; padding: 0 0 0 16px; font-size: var(--ins-fs-meta); color: var(--ins-text-secondary); line-height: 1.5; }
.ins-cat-docs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--ins-fs-label); }
.ins-cat-docs-more { border: 0; background: none; padding: 0; font: inherit; color: var(--ins-text-faint); cursor: pointer; }
.ins-cat-docs-more:hover { color: var(--ins-brand-text); }
.ins-cat-fam-tag { margin: 1px 0 3px; font-size: var(--ins-fs-label); color: var(--ins-text-faint); }
/* #160: "Suggested focus · Mentioned in 2 calls · 1 RFP row" + one quote mark per mention */
.ins-cat-mention { margin: 2px 0 4px; font-size: var(--ins-fs-label); color: var(--ins-text-secondary); }
.ins-cat-suggested { font-size: var(--ins-fs-micro); font-weight: 600; color: var(--ins-brand-text); margin-right: 6px; }
.ins-cat-doc { color: var(--ins-brand-text); text-decoration: none; }
.ins-cat-doc::before { content: "PDF "; font-weight: 600; color: var(--ins-text-faint); }
.ins-cat-doc:hover { text-decoration: underline; }
.ins-web-banner { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 14px 18px;
  background: var(--ins-brand-bg); border: 1px solid var(--ins-info-line); border-radius: 10px; color: var(--ins-brand-text); }
.ins-web-banner-icon { flex-shrink: 0; margin-top: 1px; }
.ins-web-banner-text { flex: 1; min-width: 0; }
.ins-web-banner-title { font-size: var(--ins-fs-emph); font-weight: var(--ins-fw-heading, 700); color: var(--ins-brand-text); }
.ins-web-banner-sub { font-size: var(--ins-fs-meta); color: var(--ins-text-muted); margin-top: 1px; line-height: 1.5; }
.ins-web-banner-badge { font-size: var(--ins-fs-label); font-weight: 600; color: var(--ins-brand-text); background: var(--ins-surface);
  border: 1px solid var(--ins-info-line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; flex-shrink: 0; }
.ins-web-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; align-items: start; }
.ins-web-card { background: var(--ins-surface); border: 1px solid var(--ins-border-alt); border-radius: 12px;
  box-shadow: var(--ins-shadow-header); overflow: hidden; }
.ins-web-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.ins-web-favicon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--ins-chat); color: var(--ins-on-accent); font-size: 11px; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.ins-web-favicon img { width: 16px; height: 16px; object-fit: contain; display: block; }
.ins-web-url { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--ins-text-muted);
  background: var(--ins-surface-muted); border: 1px solid var(--ins-border-soft); border-radius: 999px; padding: 5px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ins-web-url:hover { color: var(--ins-brand-text); border-color: var(--ins-info-line); }
.ins-web-hero { position: relative; height: 130px; background: linear-gradient(135deg, var(--ins-info-bg), var(--ins-sky-bg)); }
.ins-web-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-web-hero-note { position: absolute; right: 8px; bottom: 8px; font-size: 10px; color: var(--ins-text-muted);
  background: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 2px 9px; }
.ins-web-hero-none { height: 52px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--ins-text-faint);
  background: repeating-linear-gradient(45deg, var(--ins-bg) 0 12px, var(--ins-surface-muted) 12px 24px); }
.ins-web-card-body { padding: 14px 16px 16px; }
.ins-web-page-title { font-size: var(--ins-fs-subtitle); font-weight: var(--ins-fw-heading, 700); color: var(--ins-text-strongest); line-height: 1.4;
  margin-bottom: 10px; overflow-wrap: anywhere; }
.ins-web-row { padding: 10px 0 4px; }
.ins-web-row + .ins-web-row { border-top: 1px solid var(--ins-surface-muted); }
.ins-web-row.is-focus { animation: ins-focus-fade 2.5s ease-out forwards; border-radius: 8px; }
.ins-web-row.is-ghost .ins-web-quote { border-style: dashed; }
.ins-web-quote { margin: 0 0 8px; padding: 11px 13px; background: var(--ins-surface-muted); border: 1px solid var(--ins-border-soft); border-radius: 8px;
  font-size: var(--ins-fs-body); font-style: italic; color: var(--ins-text-secondary); line-height: 1.65; }
.ins-web-insight { display: flex; align-items: flex-start; gap: 9px; background: var(--ins-brand-bg); border-radius: 10px; padding: 12px 13px; margin-bottom: 10px; }
.ins-web-insight-text { flex: 1; min-width: 0; font-size: var(--ins-fs-body); color: var(--ins-text-strong); line-height: 1.55; }
.ins-web-row.is-excluded .ins-web-insight { background: var(--ins-surface-muted); }
.ins-web-row.is-excluded .ins-web-insight-text { color: var(--ins-text-muted); text-decoration: line-through; }
.ins-web-row.is-orphan .ins-web-insight { border: 1px dashed var(--ins-border); background: var(--ins-surface-muted); }
.ins-web-row.is-orphan .ins-web-quote { color: var(--ins-text-muted); text-decoration: line-through; }
.ins-web-row.is-orphan .ins-badge-orphan { text-decoration: none; }
.ins-web-row-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ins-web-text-btn { background: none; border: none; padding: 0; font-family: inherit; font-size: var(--ins-fs-meta); font-weight: 600;
  color: var(--ins-text-secondary); cursor: pointer; text-decoration: underline; }
.ins-web-text-btn:hover { color: var(--ins-brand-text); }
.ins-web-none { font-size: var(--ins-fs-body); font-style: italic; color: var(--ins-text-faint); margin: 0; }
.ins-web-foot { font-size: var(--ins-fs-meta); color: var(--ins-text-faint); margin: 16px 4px 0; line-height: 1.5; }

/* --- #71b: Documents view (prototype "Documents") ------------------------
 * One card per upload: the page column (serif passages behind each signal,
 * the verbatim quote highlighted) beside the margin column (one note per
 * insight). Note states (excluded / orphan / focus / ghost) mirror the Gong
 * and Website views. Accent = the open-question orange the Table view
 * already uses for document chips (--ins-open / --ins-open-strong). */
.ins-view-docs { max-width: 1060px; margin: 0 auto; }
.ins-doc-banner { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 14px 18px;
  background: var(--ins-warn-bg); border: 1px solid var(--ins-warn-chip); border-radius: 10px; color: var(--ins-open); }
.ins-doc-banner-icon { flex-shrink: 0; margin-top: 1px; }
.ins-doc-banner-text { flex: 1; min-width: 0; }
.ins-doc-banner-title { font-size: var(--ins-fs-emph); font-weight: var(--ins-fw-heading, 700); color: var(--ins-open); }
.ins-doc-banner-sub { font-size: var(--ins-fs-meta); color: var(--ins-text-muted); margin-top: 1px; line-height: 1.5; }
.ins-doc-banner-badge { font-size: var(--ins-fs-label); font-weight: 600; color: var(--ins-open); background: var(--ins-surface);
  border: 1px solid var(--ins-warn-chip); border-radius: 999px; padding: 3px 10px; white-space: nowrap; flex-shrink: 0; }
.ins-doc-card { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--ins-surface);
  border: 1px solid var(--ins-border-alt); border-radius: 12px; box-shadow: var(--ins-shadow-header); overflow: hidden; }
.ins-doc-card + .ins-doc-card { margin-top: 24px; }
.ins-doc-pages { flex: 1 1 420px; min-width: 0; padding: 28px 32px; }
.ins-doc-file { display: flex; align-items: center; gap: 9px; color: var(--ins-text-strong); }
.ins-doc-filename { font-family: ui-monospace, Menlo, monospace; font-size: var(--ins-fs-emph); font-weight: 700;
  color: var(--ins-text-strongest); word-break: break-all; min-width: 0; }
.ins-doc-file-meta { font-size: var(--ins-fs-meta); color: var(--ins-text-faint); margin: 4px 0 26px; padding-left: 25px; }
.ins-doc-loading, .ins-doc-none { font-size: var(--ins-fs-body); font-style: italic; color: var(--ins-text-faint); margin: 0 0 12px; }
.ins-doc-page { margin-bottom: 30px; }
.ins-doc-page-rule { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ins-doc-page-label { font-size: var(--ins-fs-label); font-weight: var(--ins-fw-heading, 700); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ins-open); white-space: nowrap; }
.ins-doc-page-line { flex: 1; border-top: 1px solid var(--ins-border-alt); }
.ins-doc-page-dots { font-size: var(--ins-fs-meta); color: var(--ins-text-faint); letter-spacing: 0.2em; }
.ins-doc-passage { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; color: var(--ins-text-strongest);
  line-height: 1.95; margin: 0; }
.ins-doc-passage + .ins-doc-passage { margin-top: 18px; }
.ins-doc-passage.is-focus { animation: ins-focus-fade 2.5s ease-out forwards; border-radius: 8px; }
.ins-doc-hit { background: var(--ins-warn-bg); border-bottom: 1px dashed var(--ins-warn); padding: 0 1px; color: inherit; cursor: pointer; }
.ins-doc-hit:hover, .ins-doc-hit:focus-visible { background: var(--ins-warn-chip); outline: none; }
.ins-doc-hit.is-ghost { background: var(--ins-chat-bg); border-bottom-style: dotted; border-color: var(--ins-chat-alt); }
.ins-doc-hit.is-excluded { background: var(--ins-surface-muted); border-color: var(--ins-border); text-decoration: line-through; }
.ins-doc-margin { flex: 1 1 280px; max-width: 100%; background: var(--ins-surface-muted); border-left: 1px solid var(--ins-border-alt);
  border-top: 1px solid var(--ins-border-alt); padding: 24px 20px; }
.ins-doc-margin-head { font-size: var(--ins-fs-label); font-weight: var(--ins-fw-heading, 700); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ins-text-faint); margin-bottom: 14px; }
.ins-doc-note { background: var(--ins-surface); border: 1px solid var(--ins-warn-chip); border-left: 3px solid var(--ins-open-strong);
  border-radius: 8px; padding: 13px 14px; margin-bottom: 14px; }
.ins-doc-note.is-focus { animation: ins-focus-fade 2.5s ease-out forwards; }
.ins-doc-note.is-ghost { border-style: dashed; border-left-style: solid; border-color: var(--ins-chat-bg); border-left-color: var(--ins-chat-alt); }
.ins-doc-note-label { font-size: 10px; font-weight: var(--ins-fw-heading, 700); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ins-open);
  margin-bottom: 6px; overflow-wrap: anywhere; }
.ins-doc-note.is-ghost .ins-doc-note-label { color: var(--ins-chat-alt); }
.ins-doc-note-quote { margin: 0 0 8px; font-size: var(--ins-fs-meta); font-style: italic; color: var(--ins-text-secondary); line-height: 1.5; }
.ins-doc-note-body { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.ins-doc-note-text { flex: 1; min-width: 0; font-size: var(--ins-fs-body); color: var(--ins-text-strongest); line-height: 1.55; }
.ins-doc-note.is-excluded .ins-doc-note-text { color: var(--ins-text-muted); text-decoration: line-through; }
.ins-doc-note.is-orphan { border-style: dashed; background: var(--ins-surface-muted); }
.ins-doc-note.is-orphan .ins-badge-orphan { text-decoration: none; }
.ins-doc-note-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ins-doc-text-btn { background: none; border: none; padding: 0; font-family: inherit; font-size: var(--ins-fs-meta); font-weight: 600;
  color: var(--ins-text-secondary); cursor: pointer; text-decoration: underline; }
.ins-doc-text-btn:hover { color: var(--ins-brand-text); }

/* --- #127: the auto-run on load, seen from the empty Chat view ------------- */
.ins-chat-extracting { font-size: var(--ins-fs-meta); color: var(--ins-text-muted); margin: 14px 0 0; line-height: 1.5; }
.ins-chat-extracting::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px;
  background: var(--ins-chat-alt); animation: ins-pulse 1.4s ease-in-out infinite; }
@keyframes ins-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* --- #142a: the chat beside the sizing matrix ---------------------------------
 * Anton, 2026-09-25: the matrix and the chat in view at the same time. The rail
 * and nav fold to their strips as in the Chat view (the selectors above); the
 * paper becomes a grid — matrix left ~55%, the ONE chat block right ~45%,
 * sticky, its log scrolling on its own. The chat block precedes the sizing
 * section in the DOM, so dense flow puts both on one row. */
.ins-sizing-chat-head { display: none; }
.rd-layout.has-ins-nav.is-sizing-chat .ins-sizing-chat-head {
  display: flex; align-items: center; gap: 10px; padding: 0 0 10px; margin-bottom: 6px; border-bottom: 1px solid var(--ins-border);
}
.ins-sizing-chat-title { font-weight: var(--ins-fw-heading, 700); color: var(--ins-text-strongest); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-sizing-chat-switch { font: inherit; font-size: var(--ins-fs-meta); color: var(--ins-text-strong); border: 1px solid var(--ins-border); border-radius: var(--ins-radius); background: var(--ins-surface); padding: 3px 6px; }
.ins-sizing-chat-close { border: none; background: transparent; font-size: 20px; line-height: 1; color: var(--ins-text-faint); cursor: pointer; padding: 2px 6px; border-radius: var(--ins-radius); }
.ins-sizing-chat-close:hover { color: var(--ins-text-strong); background: var(--ins-surface-muted); }
.rd-layout.has-ins-nav.is-sizing-chat .rd-paper { display: flex; flex-direction: column; }
.rd-layout.has-ins-nav.is-sizing-chat .rd-paper > .ins-view-chat { order: 1; min-height: 70vh; }
@media (min-width: 1101px) {
  .rd-layout.has-ins-nav.is-sizing-chat .rd-paper {
    /* the chat's share is the SEM's to drag (--sizing-chat-w, set on the paper); 38% by default */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--sizing-chat-w, 38%)); column-gap: 32px;
    grid-auto-flow: row dense; align-items: start; padding: 28px 40px 36px calc(var(--ins-strip) + 24px);
  }
  .rd-layout.has-ins-nav.is-sizing-chat .rd-paper > * { grid-column: 1 / -1; max-width: none; margin-left: 0; margin-right: 0; }
  .rd-layout.has-ins-nav.is-sizing-chat .rd-paper > .rd-size-section { grid-column: 1; }
  .rd-layout.has-ins-nav.is-sizing-chat .rd-paper > .ins-view-chat {
    grid-column: 2; order: 0; position: sticky; top: 16px; height: calc(100vh - 32px); min-height: 0;
  }
}
.rd-layout.has-ins-nav.is-sizing-chat .ins-view-chat .ins-chat-log { overflow-y: auto; }
/* the divider: a handle in the gap left of the chat — drag, arrow keys, double-click resets */
.ins-sizing-chat-drag { display: none; }
@media (min-width: 1101px) {
  .rd-layout.has-ins-nav.is-sizing-chat .ins-sizing-chat-drag {
    display: block; position: absolute; top: 0; bottom: 0; left: -22px; width: 12px; cursor: col-resize; z-index: 2;
    border-radius: 6px; touch-action: none;
  }
  .rd-layout.has-ins-nav.is-sizing-chat .ins-sizing-chat-drag::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: var(--ins-border); transition: background-color 120ms ease;
  }
  .rd-layout.has-ins-nav.is-sizing-chat .ins-sizing-chat-drag:hover::after,
  .rd-layout.has-ins-nav.is-sizing-chat .ins-sizing-chat-drag:focus-visible::after,
  body.is-dragging-col .ins-sizing-chat-drag::after { background: var(--ins-brand); }
  .rd-layout.has-ins-nav.is-sizing-chat .ins-sizing-chat-drag:focus-visible { outline: none; }
}
body.is-dragging-col { cursor: col-resize; user-select: none; }
.ins-sizing-verdict { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
/* #148: a real button shape (bare .ins-btn read as bold text in prod QA) */
.ins-sizing-verdict-btn { font-size: 13px; padding: 6px 14px; border-color: var(--ins-brand); background: var(--ins-brand-bg); color: var(--ins-brand-text); }
.ins-sizing-verdict-btn:hover:not(:disabled) { background: var(--ins-surface-muted); }
.ins-sizing-verdict-btn.is-done { color: var(--ins-text-muted); border-color: var(--ins-border); background: var(--ins-surface); cursor: default; }
/* the row's "Ask why", the open row, and the rationale tags (flag-on markup only, so insight mode) */
.rd-ask-why { display: block; margin-top: 4px; font: inherit; font-size: 11px; font-weight: 600; color: var(--ins-brand-text);
  background: transparent; border: none; padding: 0; cursor: pointer; }
.rd-ask-why:hover, .rd-ask-why:focus-visible { text-decoration: underline; }
.rd-rubric tr.rd-row-open > th.rd-fn { box-shadow: inset 3px 0 0 var(--ins-brand); background: var(--ins-surface-muted); }
/* #142c: the picked cell says where its last change came from */
.rd-pick-source { display: block; margin-top: 6px; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  background: transparent; border: none; padding: 0; text-align: left; color: var(--ins-text-muted); }
.rd-pick-source:disabled { cursor: inherit; opacity: 1; }
.rd-pick-source.is-chat { color: var(--ins-brand-text); cursor: pointer; }
.rd-pick-source.is-chat:hover { text-decoration: underline; }
.rd-pick-source.is-rom { color: var(--ins-text-faint); }
/* #148: a label only ever shows on its picked cell, which is brand blue — brand-blue
   text there was invisible (prod QA). Light text for ROM / manual, a white pill for chat. */
.rd-level.rd-picked .rd-pick-source { color: rgba(255, 255, 255, 0.8); }
.rd-level.rd-picked .rd-pick-source.is-chat { display: inline-block; color: var(--ins-brand-text); background: var(--ins-surface);
  border-radius: var(--ins-radius-pill); padding: 2px 8px; }
/* #142c: the chat's pick changes under its answer */
.ins-sizing-changes { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 2px; }
.ins-sizing-change { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px;
  border: 1px solid var(--ins-border); border-radius: var(--ins-radius); font-size: 14px; color: var(--ins-text-strong); }
.ins-sizing-change.is-applied { border-color: var(--ins-brand); }
.ins-sizing-change.is-contradicted { background: var(--ins-surface-muted); }
.ins-sizing-change-text { font-weight: 600; }
.ins-sizing-change-quote { flex-basis: 100%; font-size: 13px; color: var(--ins-text-muted); font-style: italic; }
/* #142a tweak: the sizing view's actions — centred above the matrix, always visible */
.ins-size-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 6px 0 22px; }
.rd-layout.has-ins-nav .rd-paper .ins-size-action { font-size: 15px; padding: 11px 22px; border-radius: var(--ins-radius-pill); }
.ins-size-action:not(.ins-btn-primary) { border-color: var(--ins-brand); color: var(--ins-brand-text); }
.ins-size-action:not(.ins-btn-primary):hover:not(:disabled) { background: var(--ins-surface-muted); }

/* #158: the Website row's badge can carry a product count — the label never shrinks, the badge truncates. */
.ins-nav-label-web { flex-shrink: 0; }
.ins-nav-badge-web { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* #407 (ADR 0035 D2, D3): the live line while a chat answers, and the closed "How this was answered"
   fold under the answer, on all three chats. Quiet: meta size, muted; an empty visit quieter still. */
.ins-chat-trail-sep, .ins-chat-trail-step.is-empty { color: var(--ins-text-muted); }
.ins-chat-fold { margin-top: 8px; font-size: var(--ins-fs-micro); color: var(--ins-text-muted); }
.ins-chat-fold > summary { cursor: pointer; }
.ins-chat-fold-steps { margin: 4px 0 0; padding-left: 18px; }
.ins-chat-fold-steps li.is-empty { font-style: italic; }
/* #547 (ADR 0035 D2): the web step in the web style of ADR 0034's web marks (customer360.css .ins-chat-fn.is-web) */
.ins-chat-trail-step.is-web:not(.is-empty), .ins-chat-fold-steps li.is-web:not(.is-empty) { color: var(--ins-brand-text); }
.ins-chat-trail-step.is-web::after, .ins-chat-fold-steps li.is-web::after { content: " ↗"; font-size: .8em; }
.ins-chat-fold-search p { margin: 4px 0 0; }   /* #427: the All/My customers search, after the steps */

/* #515 (ADR 0029 D10): a draft the answer wrote, boxed, with Copy; the "Based on:" line is the answer under it.
   The draft keeps its line breaks and reads as the e-mail it will be. */
.ins-chat-draft { margin: 0 0 10px; border: 1px solid var(--ins-border); border-radius: 8px; background: var(--ins-surface); }
.ins-chat-draft-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px; border-bottom: 1px solid var(--ins-border); background: var(--ins-surface-muted);
    border-radius: 8px 8px 0 0; }
.ins-chat-draft-title { font-size: var(--ins-fs-label); font-weight: 600; color: var(--ins-text-strong); }
.ins-chat-draft-fail { margin: 0; padding: 6px 12px 0; font-size: var(--ins-fs-label); color: var(--ins-text-muted); }   /* #532 */
.ins-chat-draft-text { padding: 10px 12px; white-space: pre-wrap; font-family: var(--ins-font-reading);
    font-size: var(--ins-fs-body); line-height: 1.6; max-width: 70ch; color: var(--ins-text-strongest); }

/* #555 (ADR 0037 D7): dark mode. The ONE hook is body.theme-dark (Per's dark block in tokens_mockup.css); the alias
   block above re-resolves under it, so everything token-based follows. Below: the few aliases whose dark value is not
   "the same token, dark", the brand mark, and the switch in the account menu. */
body.theme-dark {
  color-scheme: dark;                       /* native controls + scrollbars follow */
  --ins-on-accent: #fff;                    /* the mockup's literal for text on a fill, both themes */
  --ins-on-status: var(--bg);               /* dark text on Per's light dark-status fills (#45DCC0, #E8B855) */
  --ins-brand-text: var(--info-tx);         /* Per's dark sapphire text … */
  --ins-brand-text-hover: var(--tx);
  --ins-chat-text: var(--info-tx);
  --ins-brand-bg: var(--info-bg);           /* … on Per's dark sapphire tint (active nav, selected rows) */
  --ins-logo-plate: #fff;
}
/* #577: the dark logo is its own file now (style.css .tacton-logo-dark), no invert filter */
.ins-theme-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ins-theme-knob { position: relative; flex: none; width: 28px; height: 16px; border-radius: 999px; background: var(--ins-border-alt); transition: background-color 150ms ease; }
.ins-theme-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ins-surface); transition: left 150ms ease; }
.ins-theme-toggle[aria-checked="true"] .ins-theme-knob { background: var(--ins-brand); }
.ins-theme-toggle[aria-checked="true"] .ins-theme-knob::after { left: 14px; background: var(--ins-on-accent); }