/* Reasonix dashboard styles — anchored to docs/design/agent-dashboard.html.
 * Re-import: extract the <style> block from the design mockup verbatim.
 * Doc-chrome selectors (.page / .toc / .section / .subsec / .mock) are
 * unused in the live dashboard but kept so the CSS stays in lockstep
 * with the mockup; they cost nothing at runtime.
 */
/* ============================================================================
   Reasonix Dashboard — design anchor for the web companion to the TUI.

   Positioning: NOT a TUI mirror. Does what the TUI cannot:
     - long-form session reading
     - real charts (usage / cost / latency)
     - multi-file editing
     - browsing inventories (tools, MCP servers, skills, memory)

   Aesthetic: TUI heritage (palette, glyph icons, sharp edges) + web fluency
     (sans-serif body, real form controls, hover states, modal dialogs).
     NOT slavish terminal mimicry — that's a portfolio gimmick, not a tool.
   ============================================================================ */
:root {
  /* Surfaces — same family as TUI, slightly lifted for screen comfort */
  --bg:         #0a0c10;
  --bg-elev:    #11141a;
  --bg-elev-2:  #161a22;
  --bg-input:   #0d1015;
  --bg-code:    #06080c;
  --bg-hover:   #1a1f29;

  /* Text */
  --fg-0:       #e6edf3;   /* primary */
  --fg-1:       #c9d1d9;   /* body */
  --fg-2:       #8b949e;   /* secondary */
  --fg-3:       #6e7681;   /* dim */
  --fg-4:       #484f58;   /* very dim, separators in text */

  /* Accents — TUI lineage, unchanged */
  --c-brand:    #79c0ff;   /* sky      — in-progress, links */
  --c-accent:   #d2a8ff;   /* purple   — reasoning, plan */
  --c-violet:   #b395f5;   /* violet   — sub-agent */
  --c-ok:       #7ee787;   /* green    — success */
  --c-warn:     #f0b07d;   /* amber    — warning, approval */
  --c-err:      #ff8b81;   /* coral    — error */
  --c-info:     #79c0ff;

  /* Chart spectrum — for series; 6-stop gradient that reads in dark mode */
  --s1: #79c0ff;  /* sky */
  --s2: #56d4dd;  /* teal */
  --s3: #7ee787;  /* mint */
  --s4: #f0b07d;  /* amber */
  --s5: #ff8b81;  /* coral */
  --s6: #d2a8ff;  /* purple */

  /* Borders */
  --bd:         #1a1d24;
  --bd-strong:  #232831;

  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  /* Spacing / radius — tiny radius (2px) keeps web feel without going SaaS */
  --r:    2px;
  --r-sm: 4px;
  --r-md: 4px;

  /* Inline elevation step above --bg-elev-2 for nested cards/dropdowns. */
  --bg-elev-3: #1d2230;

  /* Brand sweep — used by .md hr and the mini status bar fill. */
  --gradient-rule: linear-gradient(90deg, var(--c-brand), var(--c-accent));
}

* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg-1); margin: 0; padding: 0; }

* { scrollbar-width: thin; scrollbar-color: var(--bd-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--bd); border: 2px solid var(--bg); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--fg-4); }
*::-webkit-scrollbar-corner { background: transparent; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
code, .mono { font-family: var(--font-mono); }

a { color: var(--c-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Doc chrome ─────────────────────────────────────────────────────────── */
.page {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  max-width: 1320px;
  margin: 0 auto;
  min-height: 100vh;
}
.toc {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--bd);
  padding: 28px 16px;
  background: var(--bg);
}
.toc h1 { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--fg-0); letter-spacing: .03em; font-family: var(--font-mono); }
.toc h1 .dot { color: var(--c-brand); margin-right: 8px; }
.toc .sub { font-size: 12px; color: var(--fg-3); margin: 0 0 18px; letter-spacing: .04em; }
.toc-section { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-4); margin: 22px 0 6px; font-weight: 700; }
.toc-section:first-of-type { margin-top: 0; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li a {
  display: block; padding: 4px 10px; margin: 1px 0;
  color: var(--fg-2); font-size: 14px; line-height: 1.4;
  border-radius: var(--r); overflow-wrap: anywhere;
}
.toc li a:hover { color: var(--fg-0); background: var(--bg-elev); text-decoration: none; }

main { padding: 32px 40px 60px 32px; min-width: 0; }
.section { padding: 28px 0 36px; border-bottom: 1px solid #14171e; }
.section:last-child { border-bottom: none; }
.section > h2 {
  font-size: 22px; font-weight: 700; color: var(--fg-0);
  margin: 0 0 4px; letter-spacing: -.005em; font-family: var(--font-mono);
}
.section > h2 .num { color: var(--fg-4); margin-right: 10px; font-weight: 500; }
.section > .lede {
  color: var(--fg-2); margin: 0 0 22px; font-size: 15px; max-width: 720px; line-height: 1.6;
}
.subsec { margin-bottom: 22px; }
.subsec > h3 {
  font-size: 13px; font-weight: 700; color: var(--fg-1);
  margin: 24px 0 4px; letter-spacing: .04em; text-transform: uppercase;
  font-family: var(--font-mono);
}
.subsec > h3 .desc { color: var(--fg-3); font-weight: 400; margin-left: 10px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.subsec > p { color: var(--fg-3); font-size: 15px; margin: 0 0 12px; max-width: 720px; line-height: 1.6; }

/* "Mock" — a faux-window frame to display dashboard pieces inside the design doc */
.mock {
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  margin: 14px 0;
  overflow: hidden;
}
.mock-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  margin: 18px 0 6px;
  letter-spacing: .06em;
}

/* ── §1 Tokens display ─────────────────────────────────────────────────── */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.swatch {
  background: var(--bg-elev); border: 1px solid var(--bd); padding: 10px 12px; border-radius: var(--r);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px;
}
.swatch .chip { width: 22px; height: 22px; border-radius: var(--r); flex-shrink: 0; border: 1px solid rgba(255,255,255,.04); }
.swatch .meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.swatch .name { color: var(--fg-1); font-size: 11.5px; }
.swatch .hex { color: var(--fg-3); font-size: 11.5px; }

.scale-row { display: flex; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px dashed #181b22; }
.scale-row:last-child { border-bottom: none; }
.scale-row .lbl { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); width: 76px; flex-shrink: 0; }
.scale-row .ex { color: var(--fg-1); }

.glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.glyph-cell {
  background: var(--bg-elev); border: 1px solid var(--bd); padding: 8px 10px; border-radius: var(--r);
  display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px;
}
.glyph-cell .g { color: var(--c-brand); font-size: 16px; width: 18px; text-align: center; }
.glyph-cell .n { color: var(--fg-2); font-size: 11px; }

/* ── App shell — sidebar / topbar / statusrow ──────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: 44px 1fr 26px;
  grid-template-areas:
    "side  top"
    "side  body"
    "side  status";
  height: 100vh;
  background: var(--bg);
  font-size: 13px;
}
.app.collapsed { grid-template-columns: 56px minmax(0, 1fr); }

/* Sidebar */
.app-side {
  grid-area: side;
  background: var(--bg-elev);
  border-right: 1px solid var(--bd);
  display: flex; flex-direction: column;
}
.app-side .brand {
  padding: 14px 16px 12px; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--fg-0);
  letter-spacing: .08em;
}
.app-side .brand .glyph { color: var(--c-brand); font-size: 16px; }
.app-side .brand .ver { color: var(--fg-4); font-size: 10.5px; margin-left: auto; font-weight: 400; letter-spacing: .04em; }
.app.collapsed .app-side .brand .label,
.app.collapsed .app-side .brand .ver { display: none; }

.side-tabs { padding: 6px 8px; flex: 1; overflow-y: auto; }
.side-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; margin: 1px 0;
  color: var(--fg-2); font-family: var(--font-mono); font-size: 12px;
  border-radius: var(--r); cursor: pointer;
  border-left: 2px solid transparent;
  letter-spacing: .02em;
}
.side-tab .g { font-family: var(--font-mono); font-size: 13px; width: 16px; text-align: center; color: var(--fg-3); flex-shrink: 0; }
.side-tab:hover { background: var(--bg-hover); color: var(--fg-0); }
.side-tab:hover .g { color: var(--fg-1); }
.side-tab.active { background: var(--bg-hover); color: var(--fg-0); border-left-color: var(--c-brand); }
.side-tab.active .g { color: var(--c-brand); }
.side-tab .badge { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); background: var(--bg-elev-2); padding: 1px 5px; border-radius: 8px; }
.app.collapsed .side-tab .label,
.app.collapsed .side-tab .badge { display: none; }
.app.collapsed .side-tab { justify-content: center; padding: 8px; }

.side-section { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); padding: 14px 14px 4px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.app.collapsed .side-section { display: none; }

.side-foot {
  padding: 8px; border-top: 1px solid var(--bd); display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
}
.side-foot .toggle { margin-left: auto; cursor: pointer; color: var(--fg-3); padding: 2px 6px; border-radius: var(--r); }
.side-foot .toggle:hover { color: var(--fg-1); background: var(--bg-hover); }
.app.collapsed .side-foot .label { display: none; }

/* Top bar */
.app-top {
  grid-area: top;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--bd);
  font-family: var(--font-mono); font-size: 12px;
}
.app-top .ws { color: var(--fg-1); display: flex; align-items: center; gap: 6px; }
.app-top .ws .path { color: var(--fg-2); }
.app-top .ws .branch { color: var(--c-ok); padding: 1px 5px; background: rgba(126,231,135,.08); border-radius: var(--r); font-size: 10.5px; }
.app-top .sep { color: var(--fg-4); margin: 0 4px; }
.app-top .session { color: var(--c-accent); }
.app-top .grow { flex: 1; }
.app-top .meter { display: flex; align-items: center; gap: 6px; color: var(--fg-2); }
.app-top .meter .v { color: var(--fg-0); font-weight: 600; }
.app-top .meter .lbl { color: var(--fg-4); font-size: 10.5px; }

/* Body / panel content slot */
.app-body {
  grid-area: body;
  overflow-y: auto;
  padding: 24px 28px;
}

/* Status row */
.app-status {
  grid-area: status;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  background: var(--bg-elev);
  border-top: 1px solid var(--bd);
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
}
.app-status .item { display: flex; align-items: center; gap: 4px; }
.app-status .item .v { color: var(--fg-1); }
.app-status .item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ok); }
.app-status .item .dot.warn { background: var(--c-warn); }
.app-status .item .dot.err { background: var(--c-err); }
.app-status .grow { flex: 1; }

/* ── §3 Components ─────────────────────────────────────────────────────── */

/* Card */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 14px 16px;
}
.card.accent-brand   { border-left: 2px solid var(--c-brand); }
.card.accent-accent  { border-left: 2px solid var(--c-accent); }
.card.accent-warn    { border-left: 2px solid var(--c-warn); }
.card.accent-err     { border-left: 2px solid var(--c-err); }
.card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card-h .glyph { font-family: var(--font-mono); color: var(--c-brand); font-size: 14px; }
.card-h .title { color: var(--fg-0); font-weight: 600; font-size: 13px; }
.card-h .meta { margin-left: auto; color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; }
.card-b { color: var(--fg-1); font-size: 13px; line-height: 1.55; }

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--bg-elev-2);
  color: var(--fg-2);
  letter-spacing: .04em;
}
.pill .g { font-size: 9px; }
.pill.ok   { color: var(--c-ok);     background: rgba(126,231,135,.08); }
.pill.warn { color: var(--c-warn);   background: rgba(240,176,125,.10); }
.pill.err  { color: var(--c-err);    background: rgba(255,139,129,.10); }
.pill.info { color: var(--c-brand);  background: rgba(121,192,255,.10); }
.pill.acc  { color: var(--c-accent); background: rgba(210,168,255,.10); }

/* Table */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: auto; }
.tbl th, .tbl td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--bd); }
.tbl th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; background: var(--bg-elev); }
.tbl th.num, .tbl td.num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.tbl td { color: var(--fg-1); }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl td.num { color: var(--fg-0); }
.tbl td.dim { color: var(--fg-3); }
.tbl td.path { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); }

/* Toast */
.toast-wrap { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast {
  background: var(--bg-elev-2); border: 1px solid var(--bd);
  border-left: 2px solid var(--c-brand);
  padding: 10px 12px; border-radius: var(--r);
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: var(--fg-1);
}
.toast .g { font-family: var(--font-mono); color: var(--c-brand); font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.toast.ok { border-left-color: var(--c-ok); } .toast.ok .g { color: var(--c-ok); }
.toast.warn { border-left-color: var(--c-warn); } .toast.warn .g { color: var(--c-warn); }
.toast.err  { border-left-color: var(--c-err); }  .toast.err .g  { color: var(--c-err); }
.toast .x { margin-left: auto; color: var(--fg-3); cursor: pointer; }
.toast .x:hover { color: var(--fg-0); }

/* Code block */
.code {
  background: var(--bg-code);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-1);
  white-space: pre;
  overflow-x: auto;
  line-height: 1.6;
}
.code .ln { color: var(--fg-4); user-select: none; padding-right: 14px; }
.code .kw { color: var(--c-accent); }
.code .str { color: var(--c-ok); }
.code .com { color: var(--fg-3); font-style: italic; }
.code .num { color: var(--c-warn); }

/* Diff */
.diff {
  background: var(--bg-code); border: 1px solid var(--bd); border-radius: var(--r);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
  overflow: hidden;
}
.diff-h { padding: 6px 12px; background: var(--bg-elev); color: var(--fg-2); font-size: 11px; border-bottom: 1px solid var(--bd); display: flex; gap: 12px; align-items: center; }
.diff-h .file { color: var(--fg-1); }
.diff-h .stat { margin-left: auto; }
.diff-h .stat .add { color: var(--c-ok); }
.diff-h .stat .rem { color: var(--c-err); }
.diff-row { display: grid; grid-template-columns: 32px 32px 1fr; }
.diff-row .gut { color: var(--fg-4); padding: 0 8px; text-align: right; user-select: none; }
.diff-row .txt { padding: 0 10px; white-space: pre; }
.diff-row.add { background: rgba(126,231,135,.06); }
.diff-row.add .gut { color: var(--c-ok); }
.diff-row.add .txt { color: var(--c-ok); }
.diff-row.rem { background: rgba(255,139,129,.05); }
.diff-row.rem .gut { color: var(--c-err); }
.diff-row.rem .txt { color: var(--c-err); }
.diff-row.ctx .txt { color: var(--fg-2); }
.diff-row.hunk { background: var(--bg-elev); color: var(--fg-3); }
.diff-row.hunk .txt, .diff-row.hunk .gut { color: var(--fg-3); }

/* Inline syntax tokens inherit color from .kw/.str/.com defined in .code; intra-line word diff. */
.diff-row .word-add { background: rgba(126,231,135,.22); color: var(--c-ok); border-radius: 2px; padding: 0 2px; }
.diff-row .word-rem { background: rgba(255,139,129,.20); color: var(--c-err); border-radius: 2px; padding: 0 2px; text-decoration: line-through; text-decoration-color: rgba(255,139,129,.55); }

/* Expand-context chevron row sits between hunks; clicking loads the gap. */
.diff-row.expand { grid-template-columns: 1fr; cursor: pointer; user-select: none; background: transparent; }
.diff-row.expand .txt { padding: 4px 12px; color: var(--fg-3); text-align: center; font-size: 11px; border-top: 1px dashed var(--bd); border-bottom: 1px dashed var(--bd); }
.diff-row.expand:hover .txt { color: var(--fg-1); border-color: var(--c-brand); }

/* Side-by-side variant — content split into two cells, no shared gutter strip. */
.diff.split .diff-row { grid-template-columns: 32px 1fr 32px 1fr; }
.diff.split .diff-row .pane { padding: 0 10px; white-space: pre; }
.diff.split .diff-row.add .pane.l, .diff.split .diff-row.rem .pane.r { background: var(--bg-elev); color: var(--fg-4); }

/* Edit-review panel — multi-file aggregator card list. */
.review-summary {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r);
  font-family: var(--font-mono); font-size: 12px; margin-bottom: 12px;
}
.review-summary .count { color: var(--fg-0); font-weight: 600; }
.review-summary .stat .add { color: var(--c-ok); }
.review-summary .stat .rem { color: var(--c-err); }
.review-summary .actions { margin-left: auto; display: flex; gap: 6px; }
.review-mode { display: inline-flex; gap: 0; border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; }
.review-mode button {
  background: transparent; border: 0; color: var(--fg-3); padding: 4px 10px;
  font-family: var(--font-mono); font-size: 11px; cursor: pointer;
}
.review-mode button.on { background: var(--bg-input); color: var(--fg-0); }

.review-file { border: 1px solid var(--bd); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; }
.review-file-h {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--bg-elev); cursor: pointer; user-select: none;
  font-family: var(--font-mono); font-size: 12px;
}
.review-file-h .chev { color: var(--fg-3); width: 12px; }
.review-file-h .file { color: var(--fg-1); }
.review-file-h .stat { color: var(--fg-3); }
.review-file-h .stat .add { color: var(--c-ok); }
.review-file-h .stat .rem { color: var(--c-err); }
.review-file-h .acts { margin-left: auto; display: flex; gap: 6px; }
.review-file.collapsed .review-file-body { display: none; }
.review-file.collapsed .review-file-h .chev::before { content: "▸"; }
.review-file:not(.collapsed) .review-file-h .chev::before { content: "▾"; }

/* Chart frame */
.chart {
  background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r); padding: 14px 16px;
}
.chart-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.chart-h .title { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.chart-h .delta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; }
.chart-h .delta.up { color: var(--c-ok); }
.chart-h .delta.down { color: var(--c-err); }
.chart-v { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--fg-0); margin-bottom: 4px; letter-spacing: -.01em; }
.chart-v .unit { color: var(--fg-3); font-size: 13px; font-weight: 400; margin-left: 4px; }
.chart-spark svg { width: 100%; height: 38px; display: block; }

/* Form */
.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.form-row .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; }
.form-row .help { color: var(--fg-3); font-size: 11.5px; margin-top: 2px; }
.input, .select, .textarea {
  background: var(--bg-input); border: 1px solid var(--bd); border-radius: var(--r);
  padding: 6px 10px; color: var(--fg-0); font-family: var(--font-mono); font-size: 12.5px;
  outline: none; width: 100%;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-brand); }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-1); }
.checkbox-row .box { width: 13px; height: 13px; border: 1px solid var(--bd-strong); border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center; background: var(--bg-input); }
.checkbox-row .box.on { background: var(--c-brand); border-color: var(--c-brand); color: var(--bg); font-family: var(--font-mono); font-size: 10px; font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-elev-2); border: 1px solid var(--bd-strong); color: var(--fg-1);
  padding: 5px 12px; border-radius: var(--r);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; cursor: pointer;
  letter-spacing: .02em;
}
.btn:hover { background: var(--bg-hover); color: var(--fg-0); border-color: var(--fg-4); }
.btn.primary { background: var(--c-brand); color: var(--bg); border-color: var(--c-brand); }
.btn.primary:hover { background: #94cdff; border-color: #94cdff; color: var(--bg); }
.btn.ghost { background: transparent; }
.btn .g { font-size: 11px; }

/* ── Progress ─────────────────────────────────────────────────────────── */
/* Linear bar */
.progress {
  width: 100%; height: 6px; background: var(--bg-input);
  border-radius: 3px; overflow: hidden; position: relative;
}
.progress-fill {
  height: 100%; background: var(--c-brand);
  transition: width .3s ease; border-radius: 3px;
}
.progress.thin  { height: 3px; }
.progress.thick { height: 10px; }
.progress.ok   .progress-fill { background: var(--c-ok); }
.progress.warn .progress-fill { background: var(--c-warn); }
.progress.err  .progress-fill { background: var(--c-err); }
.progress.acc  .progress-fill { background: var(--c-accent); }

/* Indeterminate — shimmer slice loops left-to-right */
.progress.indet .progress-fill {
  width: 30%; animation: progress-indet 1.4s linear infinite;
}
@keyframes progress-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Segmented — multiple fills side by side, e.g. cache-hit / cache-miss split */
.progress.segmented { display: flex; gap: 1px; background: transparent; padding: 0; height: 6px; }
.progress.segmented .progress-seg { height: 100%; }
.progress.segmented .progress-seg.s1 { background: var(--s1); }
.progress.segmented .progress-seg.s2 { background: var(--s2); }
.progress.segmented .progress-seg.s3 { background: var(--s3); }
.progress.segmented .progress-seg.s4 { background: var(--s4); }
.progress.segmented .progress-seg.s5 { background: var(--s5); }
.progress.segmented .progress-seg.dim { background: var(--bg-input); }

/* Progress with caption row */
.progress-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.progress-row .lbl { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); flex-shrink: 0; min-width: 110px; }
.progress-row .v   { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-0); flex-shrink: 0; min-width: 60px; text-align: right; }
.progress-row .progress { flex: 1; }

/* Step progress — numbered dots connected by lines */
.steps { display: flex; align-items: center; gap: 0; padding: 4px 0; }
.step-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-input); border: 1px solid var(--bd-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); font-weight: 600;
}
.step-dot.done   { background: var(--c-ok);    border-color: var(--c-ok);    color: var(--bg); }
.step-dot.active { background: var(--c-brand); border-color: var(--c-brand); color: var(--bg); }
.step-dot.fail   { background: var(--c-err);   border-color: var(--c-err);   color: var(--bg); }
.step-line { flex: 1; height: 1px; background: var(--bd-strong); margin: 0 -1px; }
.step-line.done   { background: var(--c-ok); }
.step-line.active { background: linear-gradient(90deg, var(--c-ok), var(--c-brand)); }

/* Ring — circular progress, anchors its own value text */
.ring { position: relative; display: inline-block; line-height: 0; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring-bg { fill: none; stroke: var(--bg-input); }
.ring-fill { fill: none; stroke: var(--c-brand); stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.ring.ok   .ring-fill { stroke: var(--c-ok); }
.ring.warn .ring-fill { stroke: var(--c-warn); }
.ring.err  .ring-fill { stroke: var(--c-err); }
.ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; line-height: 1.1; }
.ring-label .v { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--fg-0); }
.ring-label .u { font-family: var(--font-mono); font-size: 9px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; }

/* ── Modal / Overlay ──────────────────────────────────────────────────── */
.overlay {
  position: relative;
  background: rgba(6,8,12,.78);
  padding: 28px;
  border-radius: var(--r);
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.overlay::before {
  /* Box-drawing corner ticks at the four corners — TUI signature */
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid #14171e;
  pointer-events: none;
  border-radius: var(--r);
}
.dialog {
  background: var(--bg-elev);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r);
  width: 100%; max-width: 540px;
  box-shadow: 0 18px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02);
}
.dialog-h {
  padding: 11px 16px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 10px; font-family: var(--font-mono);
}
.dialog-h .glyph { font-size: 14px; color: var(--c-brand); }
.dialog-h .title { color: var(--fg-0); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.dialog-h .meta  { margin-left: auto; font-size: 11px; color: var(--fg-3); }
.dialog-b { padding: 14px 16px; }
.dialog-f { padding: 10px 16px; border-top: 1px solid var(--bd); display: flex; align-items: center; gap: 8px; }
.dialog-f .grow { flex: 1; }
.dialog-f .hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); }

.dialog.warn .dialog-h .glyph,
.dialog.warn .dialog-h .title { color: var(--c-warn); }
.dialog.warn { border-top: 2px solid var(--c-warn); }

.dialog.acc .dialog-h .glyph,
.dialog.acc .dialog-h .title { color: var(--c-accent); }
.dialog.acc { border-top: 2px solid var(--c-accent); }

/* Command palette — centered, larger, search-driven */
.cmd-palette {
  background: var(--bg-elev);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r);
  width: 100%; max-width: 560px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  overflow: hidden;
}
.cmd-palette .cmd-input-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--bd);
}
.cmd-palette .cmd-input-row .g { font-family: var(--font-mono); color: var(--c-brand); font-size: 14px; }
.cmd-palette .cmd-input-row input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--fg-0); font-family: var(--font-mono); font-size: 14px;
}
.cmd-palette .cmd-input-row .kbd {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3);
  border: 1px solid var(--bd); padding: 1px 5px; border-radius: var(--r); background: var(--bg-input);
}
.cmd-palette .cmd-list { padding: 4px 0; max-height: 320px; overflow-y: auto; }
.cmd-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 16px;
  cursor: pointer; font-size: 13px; color: var(--fg-1);
}
.cmd-row:hover, .cmd-row.sel { background: var(--bg-hover); }
.cmd-row.sel { border-left: 2px solid var(--c-brand); padding-left: 14px; }
.cmd-row .g { font-family: var(--font-mono); color: var(--c-brand); font-size: 12px; width: 14px; flex-shrink: 0; }
.cmd-row .name { font-family: var(--font-mono); color: var(--fg-0); }
.cmd-row .desc { color: var(--fg-3); font-size: 12px; margin-left: auto; }
.cmd-row .kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); border: 1px solid var(--bd); padding: 1px 5px; border-radius: var(--r); background: var(--bg-input); }
.cmd-section-h { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); padding: 8px 16px 4px; text-transform: uppercase; letter-spacing: .12em; }

/* Popover — anchored dropdown for slash / @ menus */
.popover {
  background: var(--bg-elev-2);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  padding: 4px 0; min-width: 240px; max-width: 360px;
}
.popover-h { padding: 6px 12px 4px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); text-transform: uppercase; letter-spacing: .12em; }
.popover-row {
  padding: 5px 12px; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--fg-1); cursor: pointer;
}
.popover-row:hover, .popover-row.sel { background: var(--bg-hover); }
.popover-row.sel { border-left: 2px solid var(--c-brand); padding-left: 10px; }
.popover-row .g { font-family: var(--font-mono); color: var(--c-brand); font-size: 12px; width: 14px; flex-shrink: 0; }
.popover-row .name { font-family: var(--font-mono); color: var(--fg-0); }
.popover-row .meta { margin-left: auto; color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; }

/* ── Composer (chat input, multi-line, with chips) ────────────────────── */
.composer {
  background: var(--bg-input); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.composer:focus-within { border-color: var(--c-brand); }
.composer-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.composer-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-elev-2); padding: 2px 6px 2px 8px;
  border-radius: var(--r); font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--bd);
}
.composer-chip.attach { color: var(--c-brand); border-color: rgba(121,192,255,.25); }
.composer-chip.paste  { color: var(--c-accent); border-color: rgba(210,168,255,.25); }
.composer-chip .x { color: var(--fg-3); cursor: pointer; padding: 0 2px; }
.composer-chip .x:hover { color: var(--fg-0); }
.composer-text {
  background: transparent; border: none; outline: none;
  color: var(--fg-0); font-family: var(--font-mono); font-size: 13px;
  width: 100%; resize: none; min-height: 22px; line-height: 1.6;
  padding: 4px 0;
}
.composer-text .caret { display: inline-block; width: 8px; height: 16px; background: var(--c-brand); vertical-align: text-bottom; animation: caret 1s steps(2) infinite; margin-left: 1px; }
@keyframes caret { 50% { opacity: 0; } }
.composer-foot {
  display: flex; align-items: center; gap: 14px; padding-top: 4px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4);
  border-top: 1px solid #14171e;
}
.composer-foot .grow { flex: 1; }
.composer-foot .hint .kbd {
  border: 1px solid var(--bd); padding: 0 4px; border-radius: var(--r);
  color: var(--fg-3); margin: 0 2px; background: var(--bg-elev);
}
.composer-foot .send { color: var(--c-brand); cursor: pointer; }

/* TUI status indicator (small pill in topbar) */
.tui-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 2px 8px; border-radius: 9px;
  background: var(--bg-elev-2); color: var(--fg-3); border: 1px solid var(--bd);
}
.tui-status .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tui-status.online  { color: var(--c-ok);   } .tui-status.online  .dot { background: var(--c-ok);   box-shadow: 0 0 6px rgba(126,231,135,.5); }
.tui-status.laggy   { color: var(--c-warn); } .tui-status.laggy   .dot { background: var(--c-warn); }
.tui-status.offline { color: var(--c-err);  } .tui-status.offline .dot { background: var(--c-err);  }

/* ── Breadcrumbs — replace topbar `·` with `›` for crumb-style flow ───── */
.crumbs { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; }
.crumbs .crumb { color: var(--fg-1); }
.crumbs .crumb.dim { color: var(--fg-3); }
.crumbs .sep { color: var(--fg-4); }

/* ── Sessions panel ──────────────────────────────────────────────────── */
.sessions-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  /* `minmax(0, 1fr)` on the row + `min-height: 0` on the children is the
     standard recipe for "let the inner overflow:auto take effect" — without
     it the grid items default to min-height: auto (= content size) and
     grow past the parent's max-height, dragging .app-body along. */
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  min-height: 540px;
  max-height: calc(100vh - 140px);
}
.sessions-list { background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0; }
.sessions-list .ssl-h { padding: 10px 12px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 8px; }
.sessions-list .ssl-h input {
  flex: 1; background: var(--bg-input); border: 1px solid var(--bd); border-radius: var(--r);
  padding: 4px 8px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-0); outline: none;
}
.sessions-list .ssl-h input:focus { border-color: var(--c-brand); }
.sessions-list .ssl-rows { flex: 1; overflow-y: auto; }
.ssl-row {
  padding: 8px 12px; border-bottom: 1px solid #14171e; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
}
.ssl-row:hover { background: var(--bg-hover); }
.ssl-row.sel { background: var(--bg-hover); border-left: 2px solid var(--c-brand); padding-left: 10px; }
.ssl-row .name { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-0); }
.ssl-row .preview { font-size: 11.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssl-row .meta { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); margin-top: 2px; }
.ssl-row .meta .v { color: var(--fg-2); }

.sessions-detail { background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r); padding: 14px 16px; overflow: auto; min-height: 0; min-width: 0; }
.sessions-detail-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--bd); }
.sessions-detail-h .name { font-family: var(--font-mono); font-size: 14px; color: var(--fg-0); font-weight: 600; }
.sessions-detail-h .ws   { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.sessions-detail-h .actions { margin-left: auto; display: flex; gap: 6px; }
.sessions-detail-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.sessions-detail-kpis .kp { padding: 8px 10px; background: var(--bg-input); border-radius: var(--r); }
.sessions-detail-kpis .kp .lbl { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); text-transform: uppercase; letter-spacing: .1em; }
.sessions-detail-kpis .kp .v   { font-family: var(--font-mono); font-size: 16px; color: var(--fg-0); font-weight: 600; margin-top: 2px; }

/* ── File tree (Editor panel) ────────────────────────────────────────── */
.tree { font-family: var(--font-mono); font-size: 12px; padding: 6px 0; user-select: none; }
.tree-node {
  padding: 3px 8px 3px 0; cursor: pointer; display: flex; align-items: center; gap: 4px;
  color: var(--fg-2); border-left: 2px solid transparent;
}
.tree-node:hover { background: var(--bg-hover); color: var(--fg-1); }
.tree-node.sel { background: var(--bg-hover); color: var(--c-brand); border-left-color: var(--c-brand); }
.tree-node .indent { display: inline-block; width: 10px; flex-shrink: 0; }
.tree-node .arrow { width: 10px; color: var(--fg-3); }
.tree-node.open .arrow { color: var(--c-brand); }
.tree-node .icon { width: 12px; color: var(--fg-3); flex-shrink: 0; }
.tree-node .icon.dir { color: var(--c-brand); }
.tree-node .icon.tsx { color: var(--c-brand); }
.tree-node .icon.css { color: var(--c-accent); }
.tree-node .icon.md  { color: var(--c-warn); }
.tree-node .icon.json { color: var(--c-violet); }
.tree-node .name { flex: 1; }
.tree-node .badge { font-size: 9px; color: var(--c-warn); margin-left: 4px; }
.tree-node .modified { color: var(--c-warn); font-size: 14px; line-height: 0.5; margin-left: 4px; }

/* ── Editor tabs ─────────────────────────────────────────────────────── */
.editor-tabs {
  display: flex; border-bottom: 1px solid var(--bd); background: var(--bg-elev);
  overflow-x: auto; scrollbar-width: none;
}
.editor-tabs::-webkit-scrollbar { display: none; }
.editor-tab {
  padding: 7px 14px; font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-3); border-right: 1px solid var(--bd);
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; flex-shrink: 0;
}
.editor-tab:hover { color: var(--fg-1); background: var(--bg-hover); }
.editor-tab.active { color: var(--fg-0); background: var(--bg); border-bottom-color: var(--c-brand); }
.editor-tab .x { color: var(--fg-4); font-size: 10px; padding: 0 2px; border-radius: var(--r); }
.editor-tab .x:hover { color: var(--fg-0); background: var(--bd); }
.editor-tab .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-warn); flex-shrink: 0; }

/* ── Code editor area ────────────────────────────────────────────────── */
.editor-area {
  background: var(--bg-code); padding: 8px 0;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  color: var(--fg-1); overflow: auto;
  flex: 1; min-height: 0;
}
.editor-line {
  display: grid; grid-template-columns: 62px 1fr;
  padding: 0; white-space: pre;
}
.editor-line:hover { background: rgba(121,192,255,.04); }
.editor-line.cur { background: rgba(121,192,255,.06); }
.editor-line .lineno { color: var(--fg-4); text-align: right; padding: 0 10px 0 20px; user-select: none; font-variant-numeric: tabular-nums; }
.editor-line .ln-content { color: var(--fg-1); }
.editor-line .ln-content .kw  { color: var(--c-accent); }
.editor-line .ln-content .str { color: var(--c-ok); }
.editor-line .ln-content .com { color: var(--fg-3); font-style: italic; }
.editor-line .ln-content .num { color: var(--c-warn); }
.editor-line .ln-content .typ { color: var(--c-violet); }
.editor-line .ln-content .fn  { color: var(--c-brand); }
.editor-line .ln-content .gut { color: var(--fg-4); }

.editor-status {
  display: flex; align-items: center; gap: 12px; padding: 4px 14px;
  background: var(--bg-elev); border-top: 1px solid var(--bd);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3);
}
.editor-status .v { color: var(--fg-1); }
.editor-status .grow { flex: 1; }
.editor-status .glyph { color: var(--c-brand); }

/* ── Filter chips ────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; }
.chip-f {
  font-family: var(--font-mono); font-size: 11px; padding: 3px 9px;
  border: 1px solid var(--bd); border-radius: 12px; cursor: pointer;
  color: var(--fg-2); background: var(--bg-elev);
  display: inline-flex; align-items: center; gap: 5px;
}
.chip-f:hover { background: var(--bg-hover); color: var(--fg-1); }
.chip-f.active { color: var(--c-brand); border-color: var(--c-brand); background: rgba(121,192,255,.08); }
.chip-f.static { cursor: default; }
.chip-f.static:hover { background: var(--bg-elev); color: var(--fg-2); }
.chip-f.static.active:hover { color: var(--c-brand); background: rgba(121,192,255,.08); }
.chip-f .ct { color: var(--fg-4); font-size: 10px; }
.chip-f.active .ct { color: var(--c-brand); }
.chip-f .x { color: var(--fg-4); padding: 0 2px; }
.chip-f .x:hover { color: var(--c-err); }

.chip-edit-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 0; }
.chip-add-input {
  background: transparent; border: 1px dashed var(--bd); border-radius: 12px;
  padding: 3px 9px; font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); outline: none; min-width: 80px;
}
.chip-add-input:focus { border-color: var(--c-brand); color: var(--fg-0); border-style: solid; }

/* ── Stacked bar (chart) ─────────────────────────────────────────────── */
.stacked-bar { width: 100%; height: 12px; background: var(--bg-input); border-radius: var(--r); overflow: hidden; display: flex; }
.stacked-bar > div { height: 100%; }

/* ── Form sub-tabs ───────────────────────────────────────────────────── */
.form-tabs {
  display: flex; border-bottom: 1px solid var(--bd); margin-bottom: 14px; gap: 0;
}
.form-tab {
  padding: 8px 14px; font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-3); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; letter-spacing: .04em; text-transform: uppercase; font-size: 11px;
}
.form-tab:hover { color: var(--fg-1); }
.form-tab.active { color: var(--fg-0); border-bottom-color: var(--c-brand); }

/* ── Schema (JSON-like display) ──────────────────────────────────────── */
.schema {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-1); line-height: 1.7;
  padding: 10px 14px; background: var(--bg-code); border-radius: var(--r);
  border: 1px solid var(--bd); white-space: pre; overflow-x: auto;
}
.schema .key { color: var(--c-brand); }
.schema .typ { color: var(--c-violet); }
.schema .req { color: var(--c-warn); font-style: italic; font-size: 10px; }
.schema .com { color: var(--fg-3); font-style: italic; }
.schema .str { color: var(--c-ok); }

/* ── Log tail ────────────────────────────────────────────────────────── */
.log-tail {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2);
  padding: 10px 14px; background: var(--bg-code); border: 1px solid var(--bd);
  border-radius: var(--r); line-height: 1.7; max-height: 240px; overflow-y: auto;
  white-space: pre;
}
.log-tail .ts   { color: var(--fg-4); }
.log-tail .lvl  { display: inline-block; width: 50px; }
.log-tail .info { color: var(--c-info); }
.log-tail .warn { color: var(--c-warn); }
.log-tail .err  { color: var(--c-err); }
.log-tail .ok   { color: var(--c-ok); }
.log-tail .src  { color: var(--c-accent); }

/* ── Search result card ──────────────────────────────────────────────── */
.sr-card { padding: 10px 14px; border-bottom: 1px solid #14171e; cursor: pointer; }
.sr-card:hover { background: var(--bg-hover); }
.sr-card .sr-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.sr-card .sr-path  { font-family: var(--font-mono); font-size: 12px; color: var(--c-brand); }
.sr-card .sr-loc   { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); }
.sr-card .sr-score { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); margin-left: auto; }
.sr-card .sr-snip  { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); padding: 4px 0 0; white-space: pre; overflow-x: auto; }
.sr-card .sr-snip mark { background: rgba(240,176,125,.18); color: var(--c-warn); padding: 0 2px; border-radius: 1px; }

/* ── Health grid ─────────────────────────────────────────────────────── */
.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.health-item {
  padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--bd);
  border-left: 2px solid var(--c-ok); border-radius: var(--r);
}
.health-item.warn { border-left-color: var(--c-warn); }
.health-item.err  { border-left-color: var(--c-err); }
.health-item .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 6px; }
.health-item .lbl .pill { font-size: 9px; padding: 0 5px; }
.health-item .v    { font-family: var(--font-mono); font-size: 13px; color: var(--fg-0); margin-top: 4px; }
.health-item .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); margin-top: 2px; }

/* ── Plan timeline (horizontal step bar with detail) ─────────────────── */
.plan-timeline {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; padding: 6px 0;
}
.plan-step {
  position: relative; padding: 8px 10px;
  border-top: 2px solid var(--bd-strong);
  display: flex; flex-direction: column; gap: 2px;
}
.plan-step.done   { border-top-color: var(--c-ok); }
.plan-step.active { border-top-color: var(--c-brand); }
.plan-step.fail   { border-top-color: var(--c-err); }
.plan-step::before {
  content: ""; position: absolute; top: -5px; left: 0;
  width: 8px; height: 8px; border-radius: 50%; background: var(--bd-strong);
}
.plan-step.done::before   { background: var(--c-ok); }
.plan-step.active::before { background: var(--c-brand); box-shadow: 0 0 0 3px rgba(121,192,255,.18); }
.plan-step.fail::before   { background: var(--c-err); }
.plan-step .lbl  { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); text-transform: uppercase; letter-spacing: .08em; }
.plan-step .name { font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); }
.plan-step.active .name { color: var(--fg-0); }
.plan-step.done   .name { color: var(--fg-2); }
.plan-step .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); }

/* ── Donut chart (SVG inline) ────────────────────────────────────────── */
.donut-legend { display: grid; grid-template-columns: 1fr; gap: 4px; padding-left: 8px; font-family: var(--font-mono); font-size: 11px; }
.donut-legend .row { display: flex; align-items: center; gap: 6px; color: var(--fg-2); }
.donut-legend .row .dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.donut-legend .row .v { color: var(--fg-0); margin-left: auto; }

/* ── Two-column inventory layout ─────────────────────────────────────── */
.inv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }

/* ── Sub-tabs sidebar variant for Configuration ──────────────────────── */
.cfg-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; }
.cfg-nav  { background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r); padding: 6px; }
.cfg-nav .cfg-item {
  padding: 6px 10px; font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-2); cursor: pointer; border-radius: var(--r);
  display: flex; align-items: center; gap: 8px;
  border-left: 2px solid transparent; padding-left: 8px;
}
.cfg-nav .cfg-item:hover { background: var(--bg-hover); color: var(--fg-1); }
.cfg-nav .cfg-item.active { background: var(--bg-hover); color: var(--c-brand); border-left-color: var(--c-brand); }
.cfg-content { background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r); padding: 16px 18px; }

/* ── Hook event matrix ───────────────────────────────────────────────── */
.matrix { font-family: var(--font-mono); font-size: 11px; }
.matrix .row { display: grid; grid-template-columns: 160px repeat(6, 1fr); border-bottom: 1px solid var(--bd); }
.matrix .row.h { color: var(--fg-3); padding-bottom: 4px; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.matrix .row.h > div { padding: 6px 8px; text-align: center; }
.matrix .row.h > div:first-child { text-align: left; }
.matrix .cell {
  padding: 6px 8px; text-align: center; color: var(--fg-3);
  border-left: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center; min-height: 28px;
}
.matrix .cell:first-child { border-left: none; text-align: left; justify-content: flex-start; color: var(--fg-1); }
.matrix .cell.on  { color: var(--c-brand); background: rgba(121,192,255,.05); }
.matrix .cell.off { color: var(--fg-4); }

/* ── §4 Chat panel ─────────────────────────────────────────────────────── */
.chat-banner {
  background: rgba(121,192,255,.06);
  border: 1px solid rgba(121,192,255,.18);
  border-radius: var(--r);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  font-size: 12.5px;
}
.chat-banner .g { color: var(--c-brand); font-family: var(--font-mono); font-size: 14px; }
.chat-banner .txt { color: var(--fg-1); }
.chat-banner .txt b { color: var(--fg-0); }
.chat-banner .takeover { margin-left: auto; }

.chat-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }

.chat-stream { display: flex; flex-direction: column; gap: 12px; }

/* Chat cards — web-flavored cards, more breathing room than the TUI */
.cc {
  background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r);
  padding: 12px 14px;
}
.cc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11.5px; }
.cc-h .glyph { font-size: 13px; width: 14px; text-align: center; }
.cc-h .role { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; }
.cc-h .meta { margin-left: auto; color: var(--fg-3); font-size: 10.5px; }
.cc-b { color: var(--fg-1); font-size: 13.5px; line-height: 1.65; }
.cc-b p { margin: 0 0 6px; }
.cc-b p:last-child { margin-bottom: 0; }
.cc-b code.inline { background: var(--bg-code); padding: 1px 5px; border-radius: var(--r); font-size: 12px; color: var(--c-accent); }

.cc.user .cc-h .glyph, .cc.user .cc-h .role { color: var(--c-brand); }
.cc.assistant .cc-h .glyph, .cc.assistant .cc-h .role { color: var(--c-ok); }
.cc.tool .cc-h .glyph, .cc.tool .cc-h .role { color: var(--c-warn); }
.cc.reasoning .cc-h .glyph, .cc.reasoning .cc-h .role { color: var(--c-accent); }
.cc.reasoning .cc-b { color: var(--fg-2); font-size: 12.5px; font-style: italic; }

.cc.tool .tool-args { margin-top: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); padding: 4px 8px; background: var(--bg-code); border-radius: var(--r); }
.cc.tool .tool-out { margin-top: 8px; }

/* Chat side rail */
.chat-rail { display: flex; flex-direction: column; gap: 12px; }
.rail-card {
  background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r);
  padding: 10px 12px;
}
.rail-card .rh {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-4);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px;
}
.rail-step {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 0; font-size: 12.5px;
}
.rail-step .g { font-family: var(--font-mono); color: var(--fg-3); width: 14px; flex-shrink: 0; }
.rail-step.done .g { color: var(--c-ok); }
.rail-step.active .g { color: var(--c-brand); }
.rail-step.active { color: var(--fg-0); }
.rail-step.done { color: var(--fg-2); text-decoration: line-through; text-decoration-color: var(--fg-4); }

.rail-kv { display: flex; justify-content: space-between; padding: 2px 0; font-family: var(--font-mono); font-size: 11.5px; }
.rail-kv .k { color: var(--fg-3); }
.rail-kv .v { color: var(--fg-0); }

/* ── §5 Overview cockpit ────────────────────────────────────────────────── */
.cockpit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cock-w-1 { grid-column: span 1; }
.cock-w-2 { grid-column: span 2; }
.cock-w-3 { grid-column: span 3; }
.cock-w-4 { grid-column: span 4; }

.kpi {
  background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r); padding: 14px 16px;
}
.kpi .label { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.kpi .value { font-family: var(--font-mono); font-size: 24px; color: var(--fg-0); font-weight: 700; letter-spacing: -.01em; }
.kpi .value .unit { font-size: 13px; color: var(--fg-3); font-weight: 400; margin-left: 4px; }
.kpi .delta { font-family: var(--font-mono); font-size: 11px; margin-top: 4px; }
.kpi .delta.up { color: var(--c-ok); }
.kpi .delta.down { color: var(--c-err); }
.kpi .delta.flat { color: var(--fg-3); }

.cock-list {
  background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r); padding: 12px 14px;
}
.cock-list .ch { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bd); margin-bottom: 8px; }
.cock-list .ch .ttl { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .1em; }
.cock-list .ch a { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--c-brand); }

.feed-row {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 8px;
  padding: 5px 0; font-size: 12.5px; align-items: center;
}
.feed-row .g { font-family: var(--font-mono); color: var(--fg-3); }
.feed-row.ok .g { color: var(--c-ok); }
.feed-row.warn .g { color: var(--c-warn); }
.feed-row.err .g { color: var(--c-err); }
.feed-row .name { color: var(--fg-1); font-family: var(--font-mono); font-size: 12px; }
.feed-row .when { color: var(--fg-4); font-family: var(--font-mono); font-size: 10.5px; }
.feed-row .name .args { color: var(--fg-3); }

/* Notes / "why" callouts */
.why {
  font-size: 12px; color: var(--fg-3); padding: 8px 12px;
  border-left: 2px solid var(--c-accent); background: rgba(210,168,255,.04);
  border-radius: 0 var(--r) var(--r) 0;
  margin: 14px 0;
}
.why b { color: var(--fg-1); font-weight: 600; }

/* ── Live-mode overrides — design mockup constrained .app to a 640px tile;
 *    the actual dashboard fills the viewport. ──────────────────────────── */
html, body, #root { height: 100%; }
#root { display: contents; }
.app { height: 100vh; }

/* ── Shared utilities — small classes used across multiple panels. ── */
.boot { color: var(--fg-3); padding: 24px; text-align: center; font-family: var(--font-mono); font-size: 12px; }
.empty { color: var(--fg-3); padding: 18px; border: 1px dashed var(--bd); border-radius: var(--r); font-size: 12.5px; }
.notice { background: var(--bg-elev); border: 1px solid var(--bd); border-left: 2px solid var(--c-brand); border-radius: var(--r); padding: 8px 12px; margin: 8px 0; font-size: 12.5px; color: var(--fg-1); }
.notice.err { border-left-color: var(--c-err); color: var(--c-err); }
.notice.warn { border-left-color: var(--c-warn); color: var(--c-warn); }
.muted { color: var(--fg-3); }
.pill-err { color: var(--c-err); background: rgba(255,139,129,.10); }
.pill-active { color: var(--c-brand); background: rgba(121,192,255,.10); }
button.primary { background: var(--c-brand); color: var(--bg); border: 1px solid var(--c-brand); padding: 5px 12px; border-radius: var(--r); font-family: var(--font-sans); font-size: 12px; cursor: pointer; }
button.primary:hover { background: rgba(121,192,255,.85); }
button.danger { background: transparent; color: var(--c-err); border: 1px solid var(--c-err); padding: 5px 12px; border-radius: var(--r); font-family: var(--font-sans); font-size: 12px; cursor: pointer; }
button:not(.primary):not(.danger):not(.btn):not(.mode-btn):not(.chat-banner-close):not(.chat-inflight-abort) { background: var(--bg-elev-2); color: var(--fg-1); border: 1px solid var(--bd); padding: 5px 12px; border-radius: var(--r); font-family: var(--font-sans); font-size: 12px; cursor: pointer; }
button:hover:not(.primary):not(.danger):not(.btn):not(.mode-btn):not(.chat-banner-close):not(.chat-inflight-abort) { background: var(--bg-hover); border-color: var(--bd-strong); }
input[type=text], input[type=number], input[type=password], textarea, select { background: var(--bg-input); color: var(--fg-0); border: 1px solid var(--bd); border-radius: var(--r); padding: 5px 10px; font-family: var(--font-mono); font-size: 12.5px; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--c-brand); }
.kv-key { display: inline-block; min-width: 70px; color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; margin-right: 8px; }

/* ── Chat-panel legacy CSS — restored from pre-foundation app.css.
 *    These selectors back the Chat panel's interior (chat-shell /
 *    chat-feed / chat-msg / mode-picker / composer / modals / toasts /
 *    tool-card / markdown blocks). The design mockup §4 covers the
 *    chat surface conceptually but doesn't enumerate every selector;
 *    rather than rewrite all of these by hand against design tokens,
 *    we restore the working set and let panel migration tweak as
 *    needed. Tokens inside these rules use the new design palette
 *    (--c-brand, --fg-0, --bg-elev, etc.) so the visual still aligns.
 */
/* ---------- Markdown rendering (matches TUI markdown.tsx palette) ----------
 *
 * Mapping comes from src/cli/ui/markdown.tsx:
 *   H1 → bg #67e8f9 (cyan)   text black, bold     — pill
 *   H2 → bg #c4b5fd (violet) text black, bold     — pill
 *   H3 → bg #f0abfc (fuchsia) text black, bold    — pill
 *   inline code → amber text on bg-2
 *   code block  → bg-1, monospace, soft border
 *   blockquote  → teal-300 left bar (brand)
 *   strong / em → bold / italic
 *   tables      → bordered, monospace
 *   strike      → red strikethrough
 *   link        → cyan underline
 *   diff +/-    → green / red lines (handled by code-block class)
 */

.md {
  color: var(--fg-0);
  font-size: 14px;
  line-height: 1.7;
}
.md > *:first-child {
  margin-top: 0;
}
.md > *:last-child {
  margin-bottom: 0;
}

.md p {
  margin: 0.5em 0;
}

.md h1,
.md h2,
.md h3 {
  display: inline-block;
  padding: 2px 10px;
  margin: 0.8em 0 0.5em;
  border-radius: var(--r);
  color: #0a0e14;
  font-weight: 700;
  line-height: 1.4;
}
.md h1 {
  background: var(--c-brand);
  font-size: 18px;
}
.md h2 {
  background: var(--c-accent);
  font-size: 16px;
}
.md h3 {
  background: var(--s2);
  font-size: 14px;
}

.md h4,
.md h5,
.md h6 {
  font-weight: 600;
  color: var(--c-accent);
  font-size: 14px;
  margin: 0.6em 0 0.3em;
}

.md strong {
  color: var(--fg-0);
  font-weight: 700;
}
.md em {
  color: var(--fg-0);
  font-style: italic;
}
.md del {
  color: var(--c-err);
  text-decoration: line-through;
}

.md a {
  color: var(--c-brand);
  text-decoration: none;
}
.md a:hover {
  text-decoration: underline;
}

.md code {
  font-family: var(--font-mono);
  background: var(--bg-elev-2);
  color: var(--c-warn); /* amber matches TUI inline-code */
  padding: 1px 6px;
  border-radius: var(--r);
  font-size: 12px;
}

.md pre {
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0.6em 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--c-warn);
  white-space: pre;
}
.md pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}

/* Diff blocks — rendered by the custom renderer in app.js for
 * SEARCH/REPLACE markers and ``` diff fences. Mirror TUI's
 * markdown.tsx red/green palette so the experience reads as the same
 * tool whether you're in the terminal or the browser. */
.md .diff-block,
.diff-block {
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 8px 12px;
  margin: 0.6em 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
  color: var(--fg-1);
}
.diff-line {
  display: block;
  padding: 0 4px;
}
.diff-line.ins {
  background: rgba(74, 222, 128, 0.1);
  color: #86efac;
}
.diff-line.del {
  background: rgba(248, 113, 113, 0.1);
  color: #fda4af;
}
.diff-line.hunk {
  color: var(--c-accent);
  font-weight: 500;
}
.diff-line.meta {
  color: var(--fg-3);
}

/* highlight.js github-dark loads from CDN; we tweak surface colors
 * to merge with our card backgrounds. The theme provides token colors
 * (keyword, string, number, comment etc.) we keep as-is — they read
 * well against bg-1. */
.md .hljs,
.hljs {
  background: var(--bg-elev) !important;
  color: var(--fg-0);
  padding: 0;
}
.md pre code.hljs {
  background: transparent !important;
}

.md ul,
.md ol {
  margin: 0.4em 0;
  padding-left: 24px;
}
.md li {
  margin: 0.15em 0;
}
.md ul > li::marker {
  color: var(--c-brand);
}
.md ol > li::marker {
  color: var(--c-accent);
  font-weight: 600;
}

.md blockquote {
  border-left: 3px solid var(--c-brand);
  padding: 4px 12px;
  margin: 0.6em 0;
  color: var(--fg-1);
  background: var(--bg-elev);
  border-radius: 0 var(--r) var(--r) 0;
}

.md table {
  width: auto;
  margin: 0.6em 0;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.md thead {
  background: var(--bg-elev-2);
}
.md th,
.md td {
  border: 1px solid var(--bd);
  padding: 6px 10px;
  text-align: left;
}
.md th {
  color: var(--c-brand);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.md td {
  color: var(--fg-1);
}

.md hr {
  border: none;
  height: 2px;
  background: var(--gradient-rule);
  margin: 1.2em 0;
  opacity: 0.6;
}

.md img {
  max-width: 100%;
  border-radius: var(--r);
}

/* ---------- Chat panel ---------- */

/* Subtracts .app-top (44) + .app-status (26) + .app-body padding (24×2). */
.chat-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 44px - 26px - 48px);
}

.chat-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
}

.chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.6;
}

.chat-msg .glyph {
  width: 22px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  text-align: center;
  font-size: 14px;
  padding-top: 2px;
}

.chat-msg .body {
  flex: 1;
  min-width: 0;
}

.chat-msg.user .glyph {
  color: var(--c-brand);
}
.chat-msg.assistant .glyph {
  color: var(--c-ok);
}
.chat-msg.tool .glyph {
  color: var(--c-warn);
}
.chat-msg.info .glyph {
  color: var(--fg-3);
}
.chat-msg.warning .glyph {
  color: var(--c-warn);
}
.chat-msg.error .glyph {
  color: var(--c-err);
}

.chat-msg.user .body {
  color: var(--fg-0);
}
.chat-msg.assistant .body {
  color: var(--fg-0);
}
/* Tool-card replaces the simple .body box for role="tool" rows. The
 * card carries a left accent bar (amber for success), a header with
 * tool name + path/lang pills, then the kind-specific body (diff for
 * edit_file, code block for read/write_file, terminal for run_command,
 * etc). Keeps the visual weight consistent across kinds. */
.tool-card {
  flex: 1;
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--c-warn);
  border-radius: var(--r-md);
  padding: 10px 12px;
  min-width: 0;
}
.tool-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  flex-wrap: wrap;
}
.tool-card-icon {
  color: var(--c-warn);
  font-size: 14px;
  font-weight: 600;
}
.tool-card-name {
  color: var(--c-accent);
  font-weight: 500;
}
.tool-card-path {
  color: var(--c-brand);
  background: var(--bg-elev-2);
  padding: 1px 8px;
  border-radius: var(--r);
  font-size: 11px;
}
.tool-card pre,
.tool-card .md {
  margin: 0;
}
.tool-card .md > pre,
.tool-card-cmd,
.tool-card-output {
  background: var(--bg-elev-2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  max-height: 320px;
  overflow: auto;
}
.tool-card .md > pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}
.tool-card .diff-block {
  margin: 0;
  max-height: 320px;
}
.tool-card-cmd {
  background: var(--bg);
  white-space: pre;
  margin: 0 0 6px 0;
}
.tool-card-prompt {
  color: var(--fg-3);
  margin-right: 6px;
}
.tool-card-output {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg-1);
  margin: 0;
}
.tool-card-result {
  margin-top: 6px;
  font-size: 11px;
  color: var(--fg-3);
  font-family: var(--font-mono);
}
.tool-card-args {
  margin-bottom: 6px;
  font-size: 11px;
}
.tool-card-args summary {
  cursor: pointer;
  color: var(--fg-2);
}
.tool-card-args summary:hover {
  color: var(--c-brand);
}
.tool-card-args pre {
  margin-top: 6px;
  white-space: pre;
}

.chat-msg .reasoning {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg-elev);
  border-left: 2px solid var(--c-accent);
  color: var(--fg-2);
  font-size: 12px;
  font-style: italic;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: var(--r);
}

.chat-msg .tool-name {
  color: var(--c-accent);
  font-weight: 500;
}

.chat-streaming-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--c-brand);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.chat-input-area {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--bd);
  flex-shrink: 0;
}

.chat-input-area textarea {
  flex: 1;
  background: var(--bg-elev-2);
  border: 1px solid var(--bd);
  color: var(--fg-0);
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 13px;
  resize: vertical;
  min-height: 44px;
  max-height: 200px;
}

.chat-input-area textarea:focus {
  border-color: var(--c-brand);
  outline: none;
}

.chat-input-area textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-empty {
  margin: auto;
  text-align: center;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 40px 20px;
}

.chat-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--fg-2);
}

/* Onboarding banner that nudges new users to the Semantic panel.
 * Only shown when the project has no built index AND the user hasn't
 * explicitly dismissed it (state in localStorage). The "Build it →"
 * action navigates the sidebar via the appBus so the rest of the
 * panel state isn't disturbed. */
.chat-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  font-size: 13px;
}
.chat-banner-icon {
  font-family: var(--font-mono);
  color: var(--c-accent);
  font-size: 18px;
}
.chat-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.chat-banner-text strong {
  color: var(--fg-0);
  font-weight: 600;
}
.chat-banner-text .muted {
  font-size: 12px;
  line-height: 1.45;
}
.chat-banner-close {
  background: transparent;
  border: none;
  color: var(--fg-3);
  font-size: 20px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
  border-radius: var(--r);
}
.chat-banner-close:hover {
  background: var(--bg-input);
  color: var(--fg-0);
}

/* In-flight row sits just above ChatStatusBar — the user's eyes are
 * already at the input; this puts the spinner + elapsed + token
 * stream in the same visual neighborhood instead of pushing them up
 * to the top of the panel. Border on the bottom only so it shares the
 * statusbar's top divider. */
.chat-inflight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  margin-top: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-1);
  flex-shrink: 0;
}
.chat-inflight-phase {
  color: var(--c-accent);
  font-weight: 600;
}
.chat-inflight-sep {
  color: var(--fg-3);
}
.chat-inflight-tool {
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}
.chat-inflight-abort {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--bd);
  color: var(--fg-2);
  padding: 3px 10px;
  border-radius: var(--r);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.chat-inflight-abort:hover {
  border-color: var(--c-err);
  color: var(--c-err);
}

/* ---------- Chat status bar ----------
 *
 * Compact metric strip below the input area. Mirrors the TUI's
 * StatsPanel (model · ctx · cache · turn $ · session $ · balance) so
 * the user has the same one-glance read-out without leaving Chat.
 */
.chat-statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 4px 0;
  margin-top: 8px;
  border-top: 1px solid var(--bd);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  flex-shrink: 0;
}
.status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-label {
  color: var(--fg-3);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-bar-mini {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: var(--bg-input);
  border-radius: 2px;
  overflow: hidden;
}
.status-bar-mini-fill {
  display: block;
  height: 100%;
  background: var(--gradient-rule);
}
.status-ok {
  color: var(--c-ok);
}
.status-warn {
  color: var(--c-warn);
}
.status-err {
  color: var(--c-err);
}

/* ---------- Header pickers (effort / preset / edit-mode) ----------
 *
 * Three segmented controls that flow on the chat header right side.
 * On narrow screens they wrap onto multiple rows. The `accent` variant
 * paints active segments violet (preset / effort) instead of cyan
 * (edit-mode), so the three picker groups remain visually distinct.
 */
.header-pickers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mode-picker {
  display: inline-flex;
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-elev);
}
.mode-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.mode-btn + .mode-btn {
  border-left: 1px solid var(--bd);
}
.mode-btn:hover {
  background: var(--bg-elev-2);
  color: var(--fg-0);
}
.mode-btn.active {
  background: var(--c-brand);
  color: var(--bg);
  font-weight: 600;
}
.mode-btn.active.accent {
  background: var(--c-accent);
  color: var(--bg);
}
.mode-btn.active.yolo {
  background: var(--c-err);
  color: var(--bg);
}

/* ---------- Modal cards (shell / choice / plan / edit-review) ----------
 *
 * Mirrors the TUI's ModalCard shape — left-accent border in the modal
 * kind's color (red shell, magenta choice, cyan plan, green edits)
 * with an icon, title, optional subtitle, then content + actions. The
 * card sits above the chat input area, full-width within the chat
 * column. Styled minimal so it doesn't compete with conversation
 * content for attention.
 */

.modal-card {
  margin: 12px 0;
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.modal-card-icon {
  font-size: 18px;
  font-family: var(--font-mono);
  line-height: 1.4;
}

.modal-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-0);
}

.modal-card-subtitle {
  font-size: 12px;
  color: var(--fg-2);
  margin-top: 2px;
}

.modal-cmd {
  background: var(--bg-elev-2);
  border-radius: var(--r);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-x: auto;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.modal-cmd-prompt {
  color: var(--fg-3);
  margin-right: 6px;
}
.modal-cmd code {
  color: var(--c-brand);
  background: transparent;
  padding: 0;
  word-break: break-all;
}

.modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.modal-choice-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.modal-choice-row:hover {
  border-color: var(--c-accent);
  background: rgba(196, 181, 253, 0.06);
}
.modal-choice-row.modal-choice-cancel {
  margin-top: 4px;
  border-style: dashed;
}
.modal-choice-id {
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--c-accent);
  font-weight: 600;
  text-align: center;
}
.modal-choice-title {
  color: var(--fg-0);
  font-size: 13px;
  font-weight: 500;
}
.modal-choice-summary {
  color: var(--fg-2);
  font-size: 12px;
  grid-column: 2;
}

.modal-custom textarea {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--bd);
  color: var(--fg-0);
  padding: 8px 12px;
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: 13px;
  resize: vertical;
  min-height: 56px;
}

.modal-plan-body {
  background: var(--bg-elev-2);
  border-radius: var(--r);
  padding: 12px 14px;
  max-height: 320px;
  overflow-y: auto;
}

/* Plan-revision modal — list of remaining steps with risk dots. */
.modal-revise-reason {
  background: var(--bg-elev-2);
  border-left: 3px solid #c4b5fd;
  border-radius: 0 var(--r) var(--r) 0;
  padding: 8px 12px;
  color: var(--fg-1);
  font-size: 13px;
  white-space: pre-wrap;
}
.modal-revise-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.modal-revise-steps li {
  display: grid;
  grid-template-columns: 12px 64px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 8px 12px;
  align-items: center;
}
.modal-revise-dot {
  grid-row: 1 / 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  align-self: center;
}
.modal-revise-id {
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
}
.modal-revise-title {
  grid-row: 1;
  color: var(--fg-0);
  font-size: 13px;
  font-weight: 500;
}
.modal-revise-action {
  grid-column: 2 / 4;
  grid-row: 2;
  color: var(--fg-2);
  font-size: 12px;
  white-space: pre-wrap;
}

.modal-edit-preview {
  background: var(--bg-elev-2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 10px 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-1);
  white-space: pre;
  overflow-x: auto;
  max-height: 200px;
}

.modal-picker-search {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  color: var(--fg-1);
  padding: 6px 10px;
  font-size: 13px;
  margin-bottom: 8px;
}

.modal-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: var(--bg-elev-2);
  padding: 4px;
  margin-bottom: 8px;
}

.modal-picker-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: baseline;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm, 4px);
  color: var(--fg-1);
  text-align: left;
  cursor: pointer;
}

.modal-picker-row:hover {
  background: var(--bg-elev-3, var(--bg-elev-2));
}

.modal-picker-row.selected {
  border-color: var(--c-accent);
  background: var(--bg-elev-3, var(--bg-elev-2));
}

.modal-picker-title {
  grid-column: 1;
  font-weight: 500;
}

.modal-picker-badge {
  grid-column: 2;
  font-size: 11px;
  color: var(--fg-2);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-elev);
}

.modal-picker-subtitle {
  grid-column: 1 / 3;
  font-size: 12px;
  color: var(--fg-2);
}

.modal-picker-meta {
  grid-column: 1 / 3;
  font-size: 11px;
  color: var(--fg-3, var(--fg-2));
}

.modal-picker-empty {
  padding: 16px;
  text-align: center;
  color: var(--fg-2);
  font-size: 12px;
}

.modal-picker-more {
  align-self: center;
  margin: 0 auto 8px;
  font-size: 12px;
}

.modal-picker-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.modal-picker-form input {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  color: var(--fg-1);
  padding: 6px 10px;
  font-size: 13px;
}

.modal-viewer-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-viewer-step {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--r-sm, 4px);
  background: var(--bg-elev-2);
  align-items: baseline;
}

.modal-viewer-step-mark {
  text-align: center;
  font-weight: 600;
  color: var(--fg-2);
}

.modal-viewer-step-done .modal-viewer-step-mark {
  color: #86efac;
}

.modal-viewer-step-title {
  color: var(--fg-1);
  font-size: 13px;
}

.modal-viewer-step-done .modal-viewer-step-title {
  color: var(--fg-2);
}

.modal-viewer-body {
  margin-top: 4px;
  font-size: 13px;
  color: var(--fg-1);
  max-height: 360px;
  overflow-y: auto;
}

/* Side-by-side diff for the edit-review modal — left is "before" (red
 * tint), right is "after" (green tint), context rows render unchanged.
 * Lines hljs-highlight per the file's language. */
.edit-diff-wrap {
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: var(--bg-elev-2);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow: hidden;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
}
.edit-diff-head {
  display: flex;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--bd);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  flex-shrink: 0;
}
.edit-diff-side {
  flex: 1;
  padding: 6px 12px;
}
.edit-diff-side + .edit-diff-side {
  border-left: 1px solid var(--bd);
}
.edit-diff-side-old .edit-diff-marker {
  color: #f87171;
  font-weight: 700;
  margin-right: 4px;
}
.edit-diff-side-new .edit-diff-marker {
  color: #86efac;
  font-weight: 700;
  margin-right: 4px;
}
.edit-diff-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
}
.edit-diff-row {
  display: flex;
  width: 100%;
  align-items: stretch;
  min-height: 19px;
}
.edit-diff-cell {
  flex: 1;
  padding: 1px 12px;
  white-space: pre;
  overflow-x: auto;
  border-right: 1px solid var(--bd);
  color: var(--fg-1);
  line-height: 1.55;
}
.edit-diff-cell:last-child {
  border-right: none;
}
.edit-diff-row-context .edit-diff-cell {
  background: transparent;
  color: var(--fg-2);
}
.edit-diff-row-del .edit-diff-cell-old,
.edit-diff-row-change .edit-diff-cell-old {
  background: rgba(248, 113, 113, 0.12);
  border-left: 2px solid #f87171;
  padding-left: 10px;
}
.edit-diff-row-ins .edit-diff-cell-new,
.edit-diff-row-change .edit-diff-cell-new {
  background: rgba(134, 239, 172, 0.12);
  border-left: 2px solid #86efac;
  padding-left: 10px;
}
.edit-diff-cell-old .edit-diff-empty,
.edit-diff-cell-new .edit-diff-empty {
  display: inline-block;
  width: 1px;
}
.edit-diff-row-del .edit-diff-cell-new,
.edit-diff-row-ins .edit-diff-cell-old {
  background: var(--bg-input);
  opacity: 0.5;
}
.edit-diff-line {
  font-family: var(--font-mono);
}

@media (max-width: 800px) {
  .edit-diff-row {
    flex-direction: column;
  }
  .edit-diff-cell {
    border-right: none;
    border-bottom: 1px solid var(--bd);
  }
  .edit-diff-head {
    flex-direction: column;
  }
  .edit-diff-side + .edit-diff-side {
    border-left: none;
    border-top: 1px solid var(--bd);
  }
}

.muted {
  color: var(--fg-3);
}

/* ---------- Toast ----------
 * Ephemeral notifications stacked bottom-right of the viewport. Fired
 * by save / network success paths instead of inline banners that push
 * the form around. Auto-dismiss after 3 seconds. */
.toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--c-ok);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--fg-0);
  font-family: var(--font-sans);
  min-width: 200px;
  max-width: 360px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  animation: toast-slide-in 0.18s ease-out;
}
.toast.warn {
  border-left-color: var(--c-warn);
}
.toast.err {
  border-left-color: var(--c-err);
}
.toast.info {
  border-left-color: var(--c-accent);
}

/* ---------- Error overlay ----------
 *
 * Full-screen modal triggered by uncaught exceptions / promise
 * rejections / Preact render errors. The TUI is unaffected — this
 * only blocks the browser tab. Includes "Copy details" + a GitHub
 * issue link prefilled with redacted environment info.
 */
.error-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  z-index: 100;
  animation: fade-in 0.18s ease-out;
}
.error-overlay-card {
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--c-err);
  border-left: 4px solid var(--c-err);
  border-radius: var(--r-md);
  padding: 22px 26px;
  box-shadow: 0 12px 60px rgba(248, 113, 113, 0.18);
}
.error-overlay-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.error-overlay-icon {
  color: var(--c-err);
  font-size: 22px;
  font-weight: 700;
}
.error-overlay-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-0);
}
.error-overlay-subtitle {
  font-size: 13px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  margin-top: 4px;
  word-break: break-word;
}
.error-overlay-trace {
  background: var(--bg-elev-2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-1);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
  margin: 0 0 12px;
}
.error-overlay-info {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--fg-2);
  margin-bottom: 12px;
}
.error-overlay-help {
  font-size: 13px;
  color: var(--fg-1);
  margin-bottom: 18px;
  line-height: 1.55;
}
.error-overlay-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.error-overlay-actions a.button {
  display: inline-block;
  text-decoration: none;
  background: var(--bg-elev-2);
  color: var(--fg-1);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
}
.error-overlay-actions a.button:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.changes-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

.app-body.changes-active {
  padding: 0;
  overflow: hidden;
}

.changes-panel {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-radius: var(--r);
}

.changes-panel-left {
  width: 30%;
}

.changes-panel-center {
  flex: 1;
  min-width: 0;
}

.changes-panel-right {
  width: 30%;
}

.changes-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bd);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  flex-shrink: 0;
  background: var(--bg-elev);
}

.changes-panel-header .glyph {
  color: var(--c-brand);
  font-size: 12px;
}

.changes-panel-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

@media (max-width: 899px) {
  .changes-layout {
    flex-direction: column;
  }
  .changes-panel {
    min-width: 0;
    min-height: 180px;
  }
  .changes-panel-left,
  .changes-panel-right {
    width: 100%;
    max-height: 40vh;
  }
  .changes-panel-center {
    flex: 1;
  }
  .changes-layout .resize-handle {
    display: none;
  }
}

/* ── Line Comment System ──────────────────────────────────────────── */
.line-comment-anchor {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.editor-line:hover .line-comment-anchor.visible {
  opacity: 1;
  pointer-events: auto;
}

.line-comment-anchor .plus-icon,
.line-comment-anchor .comment-count {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-3);
  line-height: 1;
}

.line-comment-anchor:hover .plus-icon,
.line-comment-anchor:hover .comment-count {
  color: var(--c-brand);
}

.line-comment-anchor .comment-count {
  background: rgba(121, 192, 255, 0.12);
  border-radius: var(--r);
  padding: 0 3px;
  font-size: 10px;
  color: var(--c-brand);
}

.line-comment-editor {
  grid-column: 2;
  justify-self: stretch;
  min-width: 0;
  background: var(--bg-elev);
  border: 1px solid var(--bd-strong);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 2px 0 4px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.line-comment-bubble {
  grid-column: 2;
  justify-self: stretch;
  min-width: 0;
  background: var(--bg-elev);
  border: 1px solid var(--bd-strong);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 2px 0 4px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.line-comment-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.line-comment-textarea {
  background: var(--bg-input);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  color: var(--fg-0);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
  resize: vertical;
  min-height: 60px;
  outline: none;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
}

.line-comment-textarea:focus {
  border-color: var(--c-brand);
}

.line-comment-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.bubble-content {
  background: var(--bg-input);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  color: var(--fg-0);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
  min-height: 36px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
}

.bubble-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
}

.bubble-line {
  flex: 1;
}

.bubble-actions {
  display: flex;
  gap: 4px;
}

.bubble-btn {
  background: transparent;
  border: none;
  color: var(--fg-3);
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  border-radius: var(--r);
}

.bubble-btn:hover {
  background: var(--bg-hover);
  color: var(--fg-0);
}

.bubble-btn.danger:hover {
  color: var(--c-err);
}

.comment-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
  cursor: default;
  min-width: 120px;
}

.comment-card-icon {
  color: var(--c-brand);
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}

.comment-card-file {
  color: var(--c-brand);
  white-space: nowrap;
}

.comment-card-content {
  color: var(--fg-1);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-card-remove {
  color: var(--fg-3);
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  transition: color 0.15s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.comment-card-remove:hover {
  color: var(--c-err);
}

/* ── File Tree Toggle ─────────────────────────────────────────────── */
.file-tree-toggle {
  display: flex;
  gap: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--bd);
}

.toggle-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--bd);
  color: var(--fg-3);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.toggle-btn:first-child {
  border-radius: var(--r) 0 0 var(--r);
  border-right: none;
}

.toggle-btn:last-child {
  border-radius: 0 var(--r) var(--r) 0;
}

.toggle-btn:hover {
  background: var(--bg-hover);
  color: var(--fg-1);
}

.toggle-btn.active {
  background: var(--bg-hover);
  color: var(--fg-0);
  border-color: var(--fg-4);
}

/* ── Review Tab ───────────────────────────────────────────────────── */
.review-tab {
  display: flex;
  align-items: center;
  gap: 4px;
}

.review-tab .review-icon {
  font-size: 12px;
  color: var(--c-brand);
}

.review-tab.active .review-icon {
  color: var(--c-brand);
}

/* ── Modification Indicator ───────────────────────────────────────── */
.tree-node .mod-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-ok);
  flex-shrink: 0;
  margin-left: 4px;
}

/* ── Review Diff View ─────────────────────────────────────────────── */
.review-diff-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.review-diff-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bd);
  background: var(--bg-elev);
  flex-shrink: 0;
}

.review-diff-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.review-diff-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.review-file-item {
  margin-bottom: 8px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
}

.review-file-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-elev);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-1);
}

.review-file-header:hover {
  background: var(--bg-hover);
}

.review-file-header .chev {
  color: var(--fg-3);
  font-size: 10px;
  width: 12px;
}

.review-file-header .filename {
  flex: 1;
}

.review-file-header .stat {
  font-size: 11px;
  color: var(--fg-3);
}

.review-file-header .stat .add {
  color: var(--c-ok);
}

.review-file-header .stat .rem {
  color: var(--c-err);
}

.review-file-body {
  padding: 8px;
  background: var(--bg-code);
}

.review-empty {
  padding: 32px;
  text-align: center;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Split Diff View ──────────────────────────────────────────── */
.split-diff {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
}
.diff-hunk-header {
  padding: 4px 12px;
  background: var(--bg-elev-2);
  color: var(--fg-3);
  font-size: 11px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--bd);
}
.diff-hdr-left,
.diff-hdr-right {
  flex: 1;
}
.diff-line {
  display: flex;
  padding: 0 12px;
  min-height: 20px;
}
.diff-line.diff-add { background: rgba(126,231,135,.08); }
.diff-line.diff-del { background: rgba(255,139,129,.08); }
.diff-line {
  display: flex;
  padding-left: 8px;
}
.diff-ln-old,
.diff-ln-new {
  display: inline-block;
  min-width: 32px;
  text-align: right;
  color: var(--fg-4);
  font-size: 11px;
  padding: 0 6px 0 12px;
  user-select: none;
  flex-shrink: 0;
}
.diff-prefix {
  width: 14px;
  flex-shrink: 0;
  color: var(--fg-3);
}
.diff-content {
  flex: 1;
  white-space: pre;
}
.diff-add .diff-content { color: var(--c-ok); }
.diff-del .diff-content { color: var(--c-err); }

/* Split rows */
.diff-split-row {
  display: flex;
}
.diff-split-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  padding: 0 8px;
  min-height: 20px;
  border-right: 1px solid var(--bd);
  overflow: hidden;
}
.diff-split-cell:last-child { border-right: none; }
.diff-split-cell .diff-content {
  flex: 1;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Diff source toggle */
.diff-source-toggle {
  display: flex;
  gap: 4px;
  align-items: center;
}
.diff-source-toggle .toggle-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 8px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: var(--bg-elev);
  color: var(--fg-2);
  cursor: pointer;
}
.diff-source-toggle .toggle-btn.active {
  background: var(--c-brand);
  color: var(--bg);
  border-color: var(--c-brand);
}
.diff-source-toggle .toggle-btn:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--fg-0);
}

/* Diff style toggle */
.diff-style-toggle {
  display: flex;
  gap: 4px;
  align-items: center;
}
.diff-style-toggle .toggle-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 8px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: var(--bg-elev);
  color: var(--fg-2);
  cursor: pointer;
}
.diff-style-toggle .toggle-btn.active {
  background: var(--c-brand);
  color: var(--bg);
  border-color: var(--c-brand);
}
.diff-style-toggle .toggle-btn:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--fg-0);
}

.diff-empty {
  padding: 24px;
  text-align: center;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Light theme — toggled via data-theme="light" on <html>

   Palette inspired by Element Plus: clean white surfaces, dark body text,
   and slightly deepened accent colours so they stay legible on light
   backgrounds.  Every variable from the :root dark set is overridden here;
   hardcoded-hex fixups follow in a second block.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Surfaces */
  --bg:         #f5f7fa;
  --bg-elev:    #ffffff;
  --bg-elev-2:  #f0f2f5;
  --bg-input:   #ffffff;
  --bg-code:    #f5f7fa;
  --bg-hover:   #ecf5ff;

  /* Text */
  --fg-0:       #303133;   /* primary   — headings, emphasis */
  --fg-1:       #606266;   /* body      — paragraphs, default */
  --fg-2:       #909399;   /* secondary — labels, meta */
  --fg-3:       #a8abb2;   /* dim       — placeholders, hints */
  --fg-4:       #c0c4cc;   /* very dim  — separators, disabled */

  /* Accents — deepened ~15% so they hit ≥4.5:1 on white */
  --c-brand:    #409eff;   /* primary blue (Element Plus) */
  --c-accent:   #9b6bff;   /* purple */
  --c-violet:   #8b5cf6;   /* violet */
  --c-ok:       #67c23a;   /* success green */
  --c-warn:     #e6a23c;   /* warning amber */
  --c-err:      #f56c6c;   /* error red */
  --c-info:     #409eff;

  /* Chart spectrum */
  --s1: #409eff;
  --s2: #36cfc9;
  --s3: #67c23a;
  --s4: #e6a23c;
  --s5: #f56c6c;
  --s6: #9b6bff;

  /* Borders */
  --bd:         #e4e7ed;
  --bd-strong:  #dcdfe6;

  /* Elevation step above --bg-elev-2 in light mode — matches the surface scale. */
  --bg-elev-3: #e4e7ed;
}

/* ── Light-theme fixups for hardcoded hex / rgba values ────────────────
   These selectors use literal colours (not CSS variables) in the dark
   theme and therefore need explicit overrides to look correct on a
   white background.  Keep them scoped under [data-theme="light"] so
   dark mode is never touched. ────────────────────────────────────────── */

/* Hardcoded #14171e borders (dark-theme inner dividers) → var(--bd) */
[data-theme="light"] .section,
[data-theme="light"] .ssl-row,
[data-theme="light"] .sr-card {
  border-bottom-color: var(--bd);
}
[data-theme="light"] .overlay::before {
  border-color: var(--bd);
}
[data-theme="light"] .composer-foot {
  border-top-color: var(--bd);
}
[data-theme="light"] .scale-row {
  border-bottom-color: var(--bd);
}

/* Primary button hover — lighten the brand colour instead of the
   dark-theme hardcoded #94cdff. */
[data-theme="light"] .btn.primary:hover,
[data-theme="light"] button.primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

/* Markdown headings — dark theme puts black text on coloured bg;
   light theme uses white text for cleaner contrast. */
[data-theme="light"] .md h1,
[data-theme="light"] .md h2,
[data-theme="light"] .md h3 {
  color: #fff;
}

/* Chat banner — rgba tint references the brand colour so it must
   switch to the light-mode brand hex. */
[data-theme="light"] .chat-banner {
  background: rgba(64,158,255,.06);
  border-color: rgba(64,158,255,.18);
}

/* Pills — semi-transparent accent backgrounds must shift hue. */
[data-theme="light"] .pill.ok   { background: rgba(103,194,58,.10); }
[data-theme="light"] .pill.warn { background: rgba(230,162,60,.12); }
[data-theme="light"] .pill.err  { background: rgba(245,108,108,.10); }
[data-theme="light"] .pill.info { background: rgba(64,158,255,.10); }
[data-theme="light"] .pill.acc  { background: rgba(155,107,255,.10); }
[data-theme="light"] .pill-err  { background: rgba(245,108,108,.10); }
[data-theme="light"] .pill-active { background: rgba(64,158,255,.10); }

/* Step-dot glow — brand-colour box-shadow. */
[data-theme="light"] .plan-step.active::before {
  box-shadow: 0 0 0 3px rgba(64,158,255,.18);
}

/* Filter chips active state. */
[data-theme="light"] .chip-f.active {
  background: rgba(64,158,255,.08);
}
[data-theme="light"] .chip-f.static.active:hover {
  background: rgba(64,158,255,.08);
}

/* Matrix cell on-state. */
[data-theme="light"] .matrix .cell.on {
  background: rgba(64,158,255,.05);
}

/* Editor line hover. */
[data-theme="light"] .editor-line:hover {
  background: rgba(64,158,255,.04);
}
[data-theme="light"] .editor-line.cur {
  background: rgba(64,158,255,.06);
}

/* Markdown search-result highlight. */
[data-theme="light"] .sr-card .sr-snip mark {
  background: rgba(230,162,60,.18);
}

/* Why / notes callout. */
[data-theme="light"] .why {
  background: rgba(155,107,255,.04);
}

/* Diff-line insert / delete. */
[data-theme="light"] .diff-line.ins {
  background: rgba(103,194,58,0.10);
  color: var(--c-ok);
}
[data-theme="light"] .diff-line.del {
  background: rgba(245,108,108,0.10);
  color: var(--c-err);
}

/* Diff-row add / remove backgrounds. */
[data-theme="light"] .diff-row.add { background: rgba(103,194,58,.06); }
[data-theme="light"] .diff-row.rem { background: rgba(245,108,108,.05); }
[data-theme="light"] .diff-row .word-add { background: rgba(103,194,58,.22); }
[data-theme="light"] .diff-row .word-rem { background: rgba(245,108,108,.20); }

/* Edit-diff side-by-side markers and borders. */
[data-theme="light"] .edit-diff-side-old .edit-diff-marker { color: var(--c-err); }
[data-theme="light"] .edit-diff-side-new .edit-diff-marker { color: var(--c-ok); }
[data-theme="light"] .edit-diff-row-del .edit-diff-cell-old,
[data-theme="light"] .edit-diff-row-change .edit-diff-cell-old {
  background: rgba(245,108,108,0.10);
  border-left-color: var(--c-err);
}
[data-theme="light"] .edit-diff-row-ins .edit-diff-cell-new,
[data-theme="light"] .edit-diff-row-change .edit-diff-cell-new {
  background: rgba(103,194,58,0.10);
  border-left-color: var(--c-ok);
}

/* Plan-revision modal border. */
[data-theme="light"] .modal-revise-reason {
  border-left-color: var(--c-accent);
}

/* Picker selected row. */
[data-theme="light"] .modal-picker-row.selected {
  border-color: var(--c-warn);
}

/* Modal viewer step-done mark. */
[data-theme="light"] .modal-viewer-step-done .modal-viewer-step-mark {
  color: var(--c-ok);
}

/* Top-bar status dot glow. */
[data-theme="light"] .tui-status.online .dot {
  box-shadow: 0 0 6px rgba(103,194,58,.5);
}

/* Dialog box-shadow — dark mode uses a deep black shadow; light mode
   needs a softer grey one. */
[data-theme="light"] .dialog {
  box-shadow: 0 18px 48px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
}
[data-theme="light"] .cmd-palette {
  box-shadow: 0 24px 64px rgba(0,0,0,.10);
}
[data-theme="light"] .popover {
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}

/* Scrollbar — lighter thumb for light backgrounds. */
[data-theme="light"] * {
  scrollbar-color: var(--bd-strong) transparent;
}
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: var(--bd);
  border-color: var(--bg);
}
[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
  background: var(--fg-4);
}