luckerr 0.41.0

package/dashboard/app.css

@@ -0,0 +1,3022 @@
+/* Luckerr 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.
+ */
+/* ============================================================================
+   Luckerr 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.
+   ============================================================================ */
+
+@font-face {
+  font-family: 'HarmonyOS Sans';
+  src: url('./fonts/HarmonyOS_Sans_Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+: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:  'HarmonyOS 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-md: 4px;
+}
+
+* { 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(--grad-8);
+  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(--accent, #fcd34d);
+  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-1, var(--bg-elev-2));
+}
+
+.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-1);
+  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;
+}
+
+