/* ui.css — shared components for the routed views (UX overhaul P3).
 * Everything themes through base.css tokens, so light/dark just work. */

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.card--flush { padding: 0; overflow: hidden; }

/* Section headings inside views */
.section-title {
  font-weight: 600;
  font-size: var(--text-lg);
  margin: var(--space-4) 0 var(--space-2);
}

/* Chips & status badges */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: var(--text-xs); white-space: nowrap;
}
.chip--ok    { color: var(--color-success); border-color: var(--color-success-muted); background: var(--color-success-muted); }
.chip--warn  { color: var(--color-warning); border-color: var(--color-warning-muted); background: var(--color-warning-muted); }
.chip--err   { color: var(--color-error);   border-color: var(--color-error-muted);   background: var(--color-error-muted); }
.chip--rank  { font-weight: 700; color: var(--color-text); background: var(--color-primary-muted); border-color: transparent; }

/* Toolbars (filter rows etc.) */
.toolbar {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* View header strip */
.view-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* Tables that must scroll instead of squeezing */
.table-wrap { overflow-x: auto; }
.table-wrap > table { min-width: 640px; }

/* Textareas / raw editors (kills the white-box default) */
textarea.input, .raw-editor {
  width: 100%;
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}
textarea.input:focus, .raw-editor:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Toasts */
#toast-holder {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 20000; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--color-surface-3);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  display: flex; align-items: center; gap: var(--space-3);
  animation: toast-in var(--transition-slow);
}
.toast--err { border-color: var(--color-error); }
.toast .btn { margin: -4px -8px -4px 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Mission Control layout */
.mc-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-4);
}

/* Detail panel inside expanded Library rows */
.detail-box {
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-1) 0 var(--space-2);
}

/* Suggest-edits proposal box */
.proposal-box {
  border: 1px solid var(--color-primary);
  background: var(--color-primary-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

/* Responsive: the overhaul's P2 baseline */
@media (max-width: 900px) {
  /* minmax(0,1fr), not 1fr: `1fr` is `minmax(auto, 1fr)`, so the column takes
     its minimum from the widest thing inside it — the board table — and
     refused to shrink below 664px on a 375px screen. The page did not even
     scroll: `document.scrollWidth` stayed at the viewport, so the digest and
     half the board were clipped and unreachable rather than merely awkward. */
  .mc-grid { grid-template-columns: minmax(0, 1fr); }
  .view-head, .toolbar { padding-left: var(--space-3); padding-right: var(--space-3); }
}
@media (max-width: 700px) {
  .nav-tabs { overflow-x: auto; scrollbar-width: none; max-width: 45vw; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .topbar { flex-wrap: wrap; row-gap: 4px; }
}

/* ---- global health banner (app-health.js) -------------------------------
   Sits above every view. High severity is deliberately loud and cannot be
   dismissed: the August 2026 outage lasted 15 days behind a quiet card. */
.gbanner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid transparent;
  font-size: 0.85rem;
  line-height: 1.5;
}
.gbanner--high {
  background: color-mix(in srgb, var(--color-error) 12%, var(--color-bg));
  border-bottom-color: var(--color-error);
  color: var(--color-text);
}
.gbanner--medium {
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg));
  border-bottom-color: var(--color-warning);
  color: var(--color-text);
}
.gbanner__inner { flex: 1; min-width: 0; }
.gbanner__title {
  font-weight: 600;
  margin-bottom: var(--space-1);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.gbanner--high .gbanner__title { color: var(--color-error); }
.gbanner--medium .gbanner__title { color: var(--color-warning); }
.gbanner__when { font-weight: 400; font-size: 0.75rem; opacity: 0.7; }
.gbanner__row + .gbanner__row { margin-top: var(--space-2); }
.gbanner__fix {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}
.gbanner__fix code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.gbanner__copy, .gbanner__x {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  font-size: 0.72rem;
  padding: 2px 8px;
}
.gbanner__copy:hover, .gbanner__x:hover { background: var(--color-surface); }
.gbanner__x { align-self: flex-start; font-size: 1rem; line-height: 1; padding: 2px 7px; }
@media (max-width: 700px) {
  .gbanner { padding: var(--space-2) var(--space-3); font-size: 0.8rem; }
}

/* ---- settings panel (Agents view) --------------------------------------- */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.settings-field label { display: block; font-weight: 600; font-size: 0.8rem; margin-bottom: 2px; }
.settings-field .form-hint { margin-top: 2px; }

/* ---- Industries tree (app-industries.js) --------------------------------
   A folder view: parent industries alphabetical at the top level, their
   segments nested beneath. A parent holds no companies of its own, so its
   counts are branch roll-ups. */
.ind-wrap { max-width: 1100px; margin: 0 auto; padding: var(--space-4); }
.ind-head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-3); flex-wrap: wrap;
}
.ind-head a { text-decoration: none; border-bottom: 1px dotted var(--color-border); }
.ind-tree {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface);
}
.ind-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 7px var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 0.85rem;
}
.ind-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.ind-row--folder { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.ind-toggle {
  text-decoration: none; width: 16px; text-align: center;
  color: var(--color-text-muted, inherit); flex-shrink: 0;
}
.ind-name { font-weight: 500; }
.ind-name--folder { font-weight: 650; }
.ind-fresh--ok { color: var(--color-success, #2e7d32); }
.ind-fresh--warn { color: var(--color-warning); }
.ind-detail {
  padding-top: 2px; padding-bottom: var(--space-2); padding-right: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-text) 2%, transparent);
}
.ind-detail .form-hint { margin-top: 2px; }
.ind-msg:empty { display: none; }
@media (max-width: 700px) {
  .ind-row { flex-wrap: wrap; font-size: 0.8rem; }
}

/* ---- Library verdict column (tilt + conviction) ------------------------
   The analytical bottom line of a draft, surfaced so the board can be read
   without opening every document. Tilt carries the colour; conviction rides
   as weight, so the eye reads direction first. */
.lib-tilt {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  padding: 1px 6px; border-radius: 10px; border: 1px solid currentColor;
}
.lib-tilt--pos { color: var(--color-success, #2e7d32); }
.lib-tilt--neu { color: var(--color-text-muted, #7a7a7a); }
.lib-tilt--neg { color: var(--color-error, #c62828); }
.lib-conv {
  margin-left: 5px; font-size: 0.62rem; letter-spacing: 1px;
  opacity: 0.65; vertical-align: middle;
}

/* ---- Ladders screen (app-ladders.js) -----------------------------------
   Purpose-built: does NOT borrow .data-table, which carries white-space:
   nowrap for the screener's numeric grids and blew thesis prose out of the
   page. Three layers — ranked overview, the round-robin grid, and the route
   one idea took through it. */
.lad-wrap { max-width: 1080px; margin: 0 auto; padding: var(--space-4); }
.lad-title {
  display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-3);
}
.lad-title h2 { margin: 0; font-size: 1.2rem; }
.lad-back { text-decoration: none; font-size: 0.85rem; opacity: 0.8; }
.lad-spacer { flex: 1 1 auto; }
.lad-standard { font-style: italic; margin-bottom: var(--space-3); }

.lad-card { margin-bottom: var(--space-3); }
.lad-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.lad-style { font-size: 0.98rem; }
.lad-head a.btn { text-decoration: none; }

.lad-top { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.lad-top li {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 4px 0; border-bottom: 1px solid var(--color-border-subtle);
  font-size: 0.85rem;
}
.lad-top li:last-child { border-bottom: 0; }
.lad-top a { text-decoration: none; }
.lad-pos { width: 20px; opacity: 0.55; font-variant-numeric: tabular-nums; }
.lad-rec {
  font-variant-numeric: tabular-nums; font-size: 0.72rem;
  padding: 0 6px; border-radius: 9px; border: 1px solid var(--color-border); opacity: 0.8;
}
.lad-pin { font-size: 0.75rem; }

/* the round robin */
.lad-gridwrap { overflow-x: auto; }
.lad-grid { border-collapse: collapse; font-size: 0.75rem; }
.lad-grid th, .lad-grid td { border: 1px solid var(--color-border-subtle); }
.lad-grid thead th { padding: 3px 6px; font-weight: 600; opacity: 0.7; }
.lad-gcorner { border: 0 !important; }
.lad-gcol { width: 26px; text-align: center; }
.lad-gcol.is-focus { color: var(--color-primary, inherit); opacity: 1; }
.lad-grow {
  text-align: left; padding: 3px 10px 3px 6px; font-weight: 500; white-space: nowrap;
}
.lad-grow a { text-decoration: none; }
.lad-grid tr.is-focus { background: color-mix(in srgb, var(--color-primary, #1F4E79) 12%, transparent); }
.lad-cell {
  width: 26px; height: 24px; text-align: center; cursor: pointer;
  font-weight: 700; font-size: 0.7rem;
}
.lad-cell--w { color: var(--color-success, #2e7d32);
  background: color-mix(in srgb, var(--color-success, #2e7d32) 13%, transparent); }
.lad-cell--l { color: var(--color-error, #c62828);
  background: color-mix(in srgb, var(--color-error, #c62828) 10%, transparent); }
.lad-cell--self, .lad-cell--none { opacity: 0.3; cursor: default; }
.lad-cell.is-focus { outline: 2px solid var(--color-primary, #1F4E79); outline-offset: -2px; }
.lad-cell.is-mine { box-shadow: inset 0 0 0 2px var(--color-warning); }
.lad-gtot { padding: 3px 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lad-gridkey { margin-top: var(--space-2); }

.lad-cycle {
  margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-warning); font-size: 0.83rem;
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
}
.lad-pick { font-size: 0.85rem; }

/* one idea's route through the tournament */
.lad-path-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.lad-story { margin: var(--space-2) 0; }
.lad-thesis { font-size: 0.85rem; margin-bottom: var(--space-2); }
.lad-steps { list-style: none; margin: 0; padding: 0; }
.lad-step {
  padding: 7px 0 7px var(--space-3); margin-left: 6px;
  border-left: 3px solid var(--color-border);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 0.84rem;
}
.lad-step:last-child { border-bottom: 0; }
.lad-step.won { border-left-color: var(--color-success, #2e7d32); }
.lad-step.lost { border-left-color: var(--color-error, #c62828); }
.lad-step-res { font-weight: 600; }
.lad-step.won .lad-step-res { color: var(--color-success, #2e7d32); }
.lad-step.lost .lad-step-res { color: var(--color-error, #c62828); }
.lad-step-rank { opacity: 0.55; margin-left: 6px; font-size: 0.75rem; }
.lad-step-why { opacity: 0.85; margin: 3px 0 4px; }
.lad-step a { text-decoration: none; }
.lad-mine { font-size: 0.62rem; margin-left: 6px; }
.lad-msg:empty { display: none; }
@media (max-width: 700px) { .lad-wrap { padding: var(--space-2); } }

/* ---- drafter section picker -------------------------------------------- */
.ap-sections { flex-basis: 100%; margin-top: var(--space-2); }
.ap-section {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 var(--space-3) 4px 0; font-size: 0.8rem; cursor: pointer;
}

/* A ladder now holds every researched name, not just the 25 on the board, so
   the board members need to stay findable inside the wider field. */
.lad-grow.is-board a { font-weight: 600; }
.lad-board-dot {
  margin-left: .35em;
  font-size: .6em;
  vertical-align: middle;
  color: var(--color-primary, #1F4E79);
}

/* Company labels: the name is the label; a ticker, where shown, is secondary. */
/* One-pager affordance: present wherever a company is, quiet until hovered. */
.co-open { text-decoration: none; opacity: .55; font-size: .85em; padding: 0 .15em; }
.co-open:hover, .co-open:focus { opacity: 1; }

/* ── Company identity: name, hover card, route to the research ───────────── */
.co { border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
      cursor: help; }
.co:hover, .co:focus { border-bottom-style: solid; outline: none; }
.co-ticker { font-size: .8em; opacity: .6; margin-left: .35em; font-weight: 400; }
.co-open { text-decoration: none; opacity: .55; font-size: .85em; padding: 0 .15em; }
.co-open:hover { opacity: 1; }

.co-card {
  position: absolute; z-index: 9999; width: min(380px, calc(100vw - 24px));
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d8dde3);
  border-radius: 8px; padding: 12px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  font-size: .82rem; line-height: 1.45;
}
.co-card[hidden] { display: none; }
.co-card-head { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap;
                margin-bottom: 8px; font-size: .95rem; }
.co-card-board { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 10px;
  background: color-mix(in srgb, var(--color-primary, #1F4E79) 14%, transparent);
  color: var(--color-primary, #1F4E79); }
.co-card-ident { opacity: .75; margin-bottom: 6px; }
.co-card-standing { font-size: .76rem; opacity: .6; margin-bottom: 8px;
                    letter-spacing: .01em; }
.co-card-desc { margin-bottom: 8px; padding-bottom: 8px;
                border-bottom: 1px solid var(--color-border, #d8dde3); }
.co-card-thesis { margin-bottom: 6px; }
.co-card-risk { opacity: .8; margin-bottom: 8px; }
.co-fold-more, .co-fold-less {
  /* the fold control has to be findable: at .75 opacity in the theme's link
     colour it vanished into a dark card, which makes a collapsible card just
     a truncated one */
  text-decoration: underline; white-space: nowrap; font-size: .95em;
  font-weight: 500; color: var(--color-primary, #1F4E79); opacity: 1;
}
.co-fold-more:hover, .co-fold-less:hover { filter: brightness(1.25); }
.co-card-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
                margin-bottom: 8px; }
.co-card-row { display: contents; }
.co-card-k { opacity: .6; white-space: nowrap; }
.co-card-foot { display: flex; justify-content: flex-end; margin-top: 2px; }
/* The route to the research is this card's whole purpose, so it is a real
   action rather than the ghost style, which disappears against a dark card. */
.co-card-open, .co-card .co-card-open {
  background: var(--color-primary, #1F4E79); color: #fff; border: 0;
  padding: 4px 10px; border-radius: 5px; text-decoration: none;
  font-size: .78rem; font-weight: 500;
}
.co-card-open:hover { filter: brightness(1.12); color: #fff; }

/* Calibrated screener score: the economically-banded 1-10, with universe rank. */
.co-card-scores { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.co-score { display: inline-flex; align-items: baseline; gap: 5px;
  padding: 2px 8px; border-radius: 4px; font-size: .78rem;
  background: color-mix(in srgb, var(--color-primary, #1F4E79) 12%, transparent); }
.co-score-k { text-transform: capitalize; opacity: .7; }
.co-score b { font-size: .92rem; }
.co-score-of { opacity: .55; margin-left: -3px; }
.co-score-rank { opacity: .6; }

/* Tilt is the research verdict, so it reads as a verdict. */
.co-card-verdict { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.co-tilt { padding: 2px 9px; border-radius: 11px; font-size: .74rem; font-weight: 600;
           text-transform: capitalize; }
/* These chips deliberately do NOT use --color-success / --color-danger.
   Measured: the token as text gave 3.23:1 on the dark card (fails AA), and
   white on the token gave 5.62:1 for danger but 2.71:1 for success, because
   the dark theme overrides success to a LIGHT green. A chip carries its own
   background, so fixed mid-tones read correctly on a card of any lightness
   and cannot be broken by a future theme edit. Both clear AA against white. */
.co-tilt.is-pos { background: #2e7d32; color: #fff; }   /* 4.98:1 */
.co-tilt.is-neg { background: #c62828; color: #fff; }   /* 5.62:1 */
.co-tilt.is-neu { background: color-mix(in srgb, currentColor 14%, transparent); opacity: .85; }
.co-conv { font-size: .74rem; opacity: .65; }
/* In a ladder, the score for THAT ladder's style is the one being asked about. */
.co-score.is-ctx {
  background: color-mix(in srgb, var(--color-primary, #1F4E79) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary, #1F4E79) 45%, transparent);
}
.co-score.is-ctx .co-score-k { opacity: .9; font-weight: 500; }

/* ------------------------------------------------------------------------
   Ask-the-Library window (js/app-librarian.js)
   Every colour is a token, so the panel follows the app's own light/dark
   switch rather than carrying a second palette that drifts from it.
   ------------------------------------------------------------------------ */

/* Component-local tokens. --color-text-tertiary lands at 3.0:1 against these
   surfaces and --color-warning at 3.65:1 on the light background, so small
   text and the [web] marker take tuned values rather than inheriting a
   contrast failure from a token chosen for larger type. */
:root, [data-theme="dark"] {
  --lw-web: #e5a842;
  --lw-muted: #a2a9b3;
  --lw-tag: var(--color-primary);
}
[data-theme="light"] {
  --lw-web: #8a5a00;
  --lw-muted: #5b626c;
  --lw-tag: #23646b;      /* primary is 4.31:1 on the tinted chip in light */
}

/* The Ask tab is a button, not a route — it opens the overlay in place. It
   inherits .nav-tab so it sits flush with the real tabs. */
.nav-tab--ask { font: inherit; cursor: pointer; background: none; }
.nav-tab--ask::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary); margin-right: 7px; vertical-align: middle;
}

.lw-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
/* Near-fullscreen, because this is a place you WORK rather than a dialog you
   dismiss. The old 920x88vh modal made a 2,000-word report feel like it was
   arriving through a letterbox. */
.lw-dialog {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(1240px, 98vw);
  height: min(94vh, 1040px);
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);   /* bound the row, or it sizes to content */
  overflow: hidden;
}
.lw-dialog.is-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.lw-dialog.is-collapsed .lw-side { border-right-width: 0; }

/* --- left rail: past questions --- */
.lw-side {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
}
.lw-side__top { padding: var(--space-3); }
.lw-new {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; cursor: pointer;
  background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  font-size: 13px; font-weight: 500;
}
.lw-new:hover { background: var(--color-surface-hover); }
.lw-side__scroll { flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 var(--space-2) var(--space-3); }
.lw-side__empty { color: var(--lw-muted); font-size: 12px; line-height: 1.5;
  padding: 0 var(--space-2); }
.lw-saved__item {
  padding: 8px 10px; border-radius: var(--radius-md); margin-bottom: 2px;
}
.lw-saved__item:hover { background: var(--color-surface-2); }
.lw-saved__q {
  display: block; font-size: 13px; color: var(--color-text); text-decoration: none;
  line-height: 1.4; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lw-saved__q:hover { text-decoration: underline; }
.lw-saved__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  color: var(--lw-muted); font-size: 11px; margin-top: 4px; }

/* --- right side --- */
.lw-body { display: flex; flex-direction: column;
  min-width: 0; min-height: 0; background: var(--color-bg); }
.lw-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3); height: 52px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.lw-title { font-weight: 600; font-size: 14px; color: var(--color-text); }
.lw-sub { color: var(--lw-muted); font-size: 12px; }
.lw-spacer { flex: 1; }
.lw-icon {
  background: none; border: 0; cursor: pointer; color: var(--lw-muted);
  width: 30px; height: 30px; border-radius: var(--radius-md); font-size: 17px; line-height: 1;
}
.lw-icon:hover { background: var(--color-surface-hover); color: var(--color-text); }

/* One centred reading column, the width prose is actually readable at. */
.lw-scroll { flex: 1; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-5) var(--space-4) var(--space-4); }
.lw-turn, .lw-empty, .lw-dock > * { max-width: 46rem; margin-inline: auto; }
.lw-turn { margin-bottom: var(--space-5); }

.lw-row { display: flex; }
.lw-row--user { justify-content: flex-end; }
.lw-bubble {
  background: var(--color-surface-2); border: 1px solid var(--color-border-subtle);
  color: var(--color-text); border-radius: 18px 18px 4px 18px;
  padding: 10px 14px; max-width: 82%; line-height: 1.5; font-size: 14px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.lw-tags { display: flex; gap: 4px; justify-content: flex-end; margin-top: 6px; }
.lw-tag {
  font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--lw-tag); background: var(--color-primary-subtle);
  border-radius: 999px; padding: 2px 8px;
}
/* The answer is not a bubble. It is a document, and it reads like one — and
   a BLOCK, not a flex row: inheriting .lw-row's flex laid the prose, its meta
   line and its keyword chips out side by side in three columns. */
.lw-row--ai { display: block; margin-top: var(--space-4); }
.lw-a { color: var(--color-text); font-size: 15px; line-height: 1.68; min-width: 0; }
.lw-a h3, .lw-a h4, .lw-a h5 { color: var(--color-text); margin: 20px 0 8px; line-height: 1.3; }
.lw-a h3 { font-size: 17px; } .lw-a h4 { font-size: 15px; } .lw-a h5 { font-size: 14px; }
.lw-a ul { margin: 8px 0 8px 20px; } .lw-a li { margin: 4px 0; }
.lw-a code { background: var(--color-surface-3); padding: 1px 5px; border-radius: 3px; font-size: 13px; }
.lw-a--wait { color: var(--color-text-secondary); display: flex; align-items: center; gap: 8px; }
.lw-a--err {
  color: var(--color-danger, #e06c6c); background: var(--color-surface-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3);
}
.lw-cite { color: var(--color-primary); text-decoration: none; font-size: 0.92em; white-space: nowrap; }
.lw-cite:hover { text-decoration: underline; }
.lw-web {
  color: var(--lw-web); font-size: 0.85em; border: 1px solid currentColor;
  border-radius: 3px; padding: 0 3px; margin-left: 2px;
}
.lw-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--lw-muted); font-size: 12px; margin-top: var(--space-3);
}
.lw-cov { color: var(--color-text-secondary); }
.lw-meta a { color: var(--lw-muted); }
.lw-dot { opacity: 0.5; }
.lw-link {
  background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex;
  align-items: center; gap: 4px;
  color: var(--lw-muted); font-size: inherit; text-decoration: underline;
}
.lw-link:hover { color: var(--color-text); }
/* "kept" means the librarian may cite this answer, not that it is findable —
   an uncurated answer is still returned by search. */
.lw-keep.is-kept { color: var(--color-accent, #2f855a); font-weight: 600; }
.lw-kw { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-2); }
.lw-chip {
  border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--lw-muted); border-radius: 999px; padding: 2px 9px;
  font-size: 11px; cursor: pointer;
}
.lw-chip:hover { background: var(--color-surface-hover); color: var(--color-text); }
.lw-chip--sm { font-size: 10px; padding: 1px 7px; }

/* --- empty state --- */
.lw-empty { padding: 12vh 0 0; text-align: center; }
.lw-empty__h { font-size: 27px; font-weight: 600; color: var(--color-text);
  margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.lw-empty__lead { color: var(--lw-muted); font-size: 14px; margin-bottom: var(--space-5);
  line-height: 1.6; }
.lw-ideas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.lw-idea {
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius-lg); padding: 12px 14px; font-size: 13px;
}
.lw-idea:hover { background: var(--color-surface-hover); border-color: var(--color-primary-muted); }
.lw-idea__k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--lw-tag); }
.lw-idea__q { color: var(--color-text-secondary); line-height: 1.45; }

/* --- composer: one card, every control inside it --- */
.lw-dock { flex: 0 0 auto; padding: var(--space-3) var(--space-4) var(--space-4); }
.lw-box {
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: 22px; padding: 10px 12px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.lw-box:focus-within { border-color: var(--color-primary); }
.lw-input {
  width: 100%; border: 0; background: none; outline: none; resize: none;
  color: var(--color-text); font: inherit; font-size: 15px; line-height: 1.5;
  padding: 4px 4px 6px; max-height: 200px; overflow-y: auto;
}
.lw-input::placeholder { color: var(--color-text-tertiary); }
.lw-box__foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lw-seg { display: inline-flex; border: 1px solid var(--color-border);
  border-radius: 999px; overflow: hidden; }
.lw-seg__btn {
  background: none; border: 0; cursor: pointer; padding: 4px 11px;
  font-size: 12px; color: var(--lw-muted);
}
.lw-seg__btn.is-on { background: var(--color-primary-muted); color: var(--color-text); font-weight: 600; }
.lw-pill {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; color: var(--color-text-secondary);
}
.lw-pill:hover { background: var(--color-surface-2); }
.lw-pill:has(input:checked) {
  background: var(--color-primary-muted); border-color: var(--color-primary-muted);
  color: var(--color-text);
}
.lw-pill input { cursor: pointer; margin: 0; }
.lw-bare {
  background: none; border: 0; color: var(--lw-muted); font: inherit; font-size: 12px;
  cursor: pointer; padding: 3px 4px; border-radius: var(--radius-md);
}
.lw-bare:hover { background: var(--color-surface-2); color: var(--color-text); }
.lw-send {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-primary); color: var(--color-text-inverse);
  display: inline-flex; align-items: center; justify-content: center;
}
.lw-send:hover { background: var(--color-primary-hover); }
.lw-send:disabled { opacity: 0.45; cursor: default; }
.lw-send.is-busy svg { animation: lw-spin 0.9s linear infinite; }
@keyframes lw-spin { to { transform: rotate(360deg); } }
.lw-fineprint { color: var(--color-text-tertiary); font-size: 11px; text-align: center;
  margin-top: 8px; line-height: 1.5; }

/* --- the waiting indicator --- */
.lw-dots { display: inline-flex; gap: 3px; }
.lw-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-tertiary);
  animation: lw-pulse 1.2s infinite ease-in-out;
}
.lw-dots i:nth-child(2) { animation-delay: 0.15s; }
.lw-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes lw-pulse { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lw-dots i, .lw-send.is-busy svg { animation: none; opacity: 0.6; }
}

@media (max-width: 900px) {
  .lw-overlay { padding: 0; }
  .lw-dialog { width: 100vw; height: 100vh; border-radius: 0;
    grid-template-columns: 0 minmax(0, 1fr); }
  .lw-side { border-right-width: 0; }
  .lw-dialog.is-collapsed { grid-template-columns: 240px minmax(0, 1fr); }
  .lw-dialog.is-collapsed .lw-side { border-right-width: 1px; }
  .lw-ideas { grid-template-columns: 1fr; }
  .lw-empty { padding-top: 8vh; }
  .lw-sub { display: none; }          /* or the title wraps to two lines */
  .lw-title { white-space: nowrap; }
  .lw-scroll { padding-inline: var(--space-3); }
  .lw-dock { padding-inline: var(--space-3); }
}