/* clustervision — lite, hand-written styles. No framework. Light + dark. */

:root {
  /* Height of the app chrome above the two-pane layout; cv-app lowers it when the dropzone
     folds to one line, so the panes take the space back instead of leaving a gap. */
  --chrome-h: 280px;
  --bg: #fbfbfd;
  --bg-elev: #ffffff;
  --bg-sunk: #f1f1f5;
  --fg: #1c1c22;
  --fg-muted: #6b6b78;
  --border: #e2e2ea;
  --border-strong: #cfcfd9;
  --accent: #6d49d6;
  --accent-fg: #ffffff;
  --code-bg: #f4f3f9;
  --ok: #1f8a4c;
  --warn: #a96b00;
  --error: #c4341e;
  --error-bg: #fdecea;
  --thinking-bg: #f3effb;
  --shadow: 0 1px 2px rgba(20, 20, 40, 0.06), 0 4px 16px rgba(20, 20, 40, 0.05);
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* per-harness accent colors */
  --h-claude: #d97757;
  --h-codex: #10a37f;
  --h-grok: #1d9bf0;
  --h-opencode: #e0a93b;
  --h-gemini: #4285f4;
  --h-hermes: #9b59b6;
  --h-openclaw: #e0533d;
  --h-opensession: #6d49d6;
}

:root[data-theme="dark"] {
  --bg: #0f0f14;
  --bg-elev: #17171f;
  --bg-sunk: #1d1d27;
  --fg: #e8e8ef;
  --fg-muted: #9a9aab;
  --border: #2a2a36;
  --border-strong: #3a3a48;
  --accent: #9a78f0;
  --accent-fg: #14101f;
  --code-bg: #1a1a24;
  --ok: #4ed18a;
  --warn: #e0b15a;
  --error: #ef7b6a;
  --error-bg: #2c1715;
  --thinking-bg: #1c1830;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 24px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0f0f14;
    --bg-elev: #17171f;
    --bg-sunk: #1d1d27;
    --fg: #e8e8ef;
    --fg-muted: #9a9aab;
    --border: #2a2a36;
    --border-strong: #3a3a48;
    --accent: #9a78f0;
    --accent-fg: #14101f;
    --code-bg: #1a1a24;
    --ok: #4ed18a;
    --warn: #e0b15a;
    --error: #ef7b6a;
    --error-bg: #2c1715;
    --thinking-bg: #1c1830;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 24px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always hide — author `display:flex/grid/block` on a class otherwise
   wins over the UA `[hidden]{display:none}` rule, so toggling `.hidden` silently does nothing. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

code, pre { font-family: var(--mono); }

button {
  font: inherit;
  cursor: pointer;
}

/* ---------- App shell ---------- */

cv-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px 12px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand .logo { font-size: 34px; line-height: 1; filter: saturate(1.1); }
.brand h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 650;
}
.brand .tagline { margin: 2px 0 0; font-size: 13px; color: var(--fg-muted); }
.brand code { background: var(--code-bg); padding: 0 4px; border-radius: 4px; font-size: 0.9em; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn, .theme-toggle {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 36px; height: 34px;
  font-size: 16px;
  color: var(--fg);
}
.icon-btn:hover, .theme-toggle:hover { border-color: var(--border-strong); color: var(--fg); }
.help-btn { font-weight: 700; }
.repo-link {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px dotted var(--border-strong);
}
.repo-link:hover { color: var(--fg); }

/* ---------- Dropzone ---------- */

.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-elev);
  padding: 16px 18px;
  margin: 4px 4px 16px;
  transition: border-color 0.15s, background 0.15s;
  outline: none;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); }
.dropzone.drag {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
}
.dz-inner { display: flex; align-items: center; gap: 14px; }
.dz-glyph { font-size: 26px; }
.dz-text { display: flex; flex-direction: column; }
.dz-text strong { font-weight: 600; }
.dz-text code { background: var(--code-bg); padding: 0 4px; border-radius: 4px; font-size: 0.85em; }
.dz-status { font-size: 13px; margin-top: 8px; min-height: 1.2em; }
.dz-status.ok { color: var(--ok); }
.dz-status.warn { color: var(--warn); }
.dz-status.error { color: var(--error); }

/* ---------- Dropzone, collapsed ----------
   When a daemon is answering, the archive is already here and the dropzone is not the way in —
   it is an occasional extra. So it folds to one quiet line that still takes a drop, and the
   invitation to expand sits at the end of it rather than across the top of every view. */
.dropzone.compact {
  border-style: solid;
  border-color: var(--border);
  background: transparent;
  padding: 0 6px;
  margin: 0 4px 10px;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
}
.dropzone.compact:hover { border-color: var(--border-strong); }
.dropzone.compact.drag { border-style: dashed; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev)); }
.dropzone.compact .dz-inner { display: none; }
.dropzone.compact .dz-sources { margin-left: 0; }
.dropzone.compact .dz-status { margin-top: 0; min-height: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dz-expand {
  flex: none;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--fg-muted);
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
}
.dz-expand:hover { color: var(--accent); background: var(--bg-sunk); }
.dropzone:not(.compact) .dz-expand { margin-left: 0; }
.dz-collapse {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; color: var(--fg-muted); font-size: 13px;
  padding: 2px 6px; border-radius: 6px;
}
.dz-collapse:hover { color: var(--fg); background: var(--bg-sunk); }
.dropzone { position: relative; }
.dropzone.compact .dz-collapse { display: none; }

/* ---------- Two-pane layout ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
  padding-bottom: 12px;
}

.pane {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 0;
  overflow: auto;
}
.pane-list { padding: 12px; }
.pane-transcript { padding: 0; }

.back-btn {
  display: none;
  width: 100%;
  text-align: left;
  background: var(--bg-sunk);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ---------- Session list ---------- */

.list-controls { position: sticky; top: 0; background: var(--bg-elev); padding-bottom: 10px; z-index: 1; }
.search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-sunk);
  color: var(--fg);
  font-size: 14px;
}
.search:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); border-color: var(--accent); }

.control-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--border);
  background: var(--bg-sunk);
  color: var(--fg-muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
}
.chip:hover { border-color: var(--border-strong); color: var(--fg); }
.chip.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.sort { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.sort select {
  font: inherit; font-size: 12px;
  background: var(--bg-sunk);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 6px;
}

.list-count { font-size: 12px; margin: 9px 2px 0; font-variant-numeric: tabular-nums; }
.list-count b { font-weight: 650; color: var(--fg); }
.list-count mark { background: none; color: var(--fg); font-weight: 600; }

/* ---------- Session list rows: a windowed list ----------
   Only the rows near the viewport are in the DOM. The <ul> is stretched to the full height the
   whole result set WOULD occupy and each live row is placed at its own offset, so the scrollbar
   still means what it means — the thumb's size and position are "you are here in 6,873 sessions",
   not "you are here in the thirty rows that happen to exist".

   That trade needs one uniform stride, which is also how a list of repeated things should look:
   same edges, same baselines, one row to the next. `--cv-row-stride` is the single source of
   truth — the CSS sizes the box from it and the windowing math reads it back. */
.session-rows {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: block;
  --cv-row-stride: 68px;   /* row box + the 6px that used to be a flex gap */
}
.session-rows.has-snippets { --cv-row-stride: 108px; }
.session-row {
  position: absolute;
  left: 0; right: 0;
  height: calc(var(--cv-row-stride) - 6px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 11px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  outline: none;
}
/* Keyboard scrolling must clear the sticky controls sitting over the top of the scroll box. */
.session-row { scroll-margin-top: calc(var(--cv-sticky-h, 90px) + 8px); scroll-margin-bottom: 8px; }
.session-row:hover { border-color: var(--border-strong); background: var(--bg-sunk); }
.session-row:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.session-row.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev));
}
.row-top { display: flex; align-items: center; gap: 8px; }
.row-title { font-weight: 550; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One line, always: a wrapped meta row would break the uniform stride the window is placed on. */
.row-meta { display: flex; flex-wrap: nowrap; gap: 4px 10px; font-size: 12px; margin-top: 3px; overflow: hidden; }
.row-cwd { font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.row-when, .row-count { flex: none; font-variant-numeric: tabular-nums; }
/* The matched text the daemon returned — why this row is a hit at all. */
.row-snippet {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row-snippet mark {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--fg);
  border-radius: 3px;
  padding: 0 1px;
}
.row-agent { flex: none; font-size: 11px; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 6px; color: var(--fg-muted); }
.empty { padding: 16px 4px; font-size: 13px; }
.list-count.list-busy { opacity: 0.7; font-style: italic; }

/* ---------- Harness badge ---------- */

.cv-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--fg-muted);
  text-transform: none;
  white-space: nowrap;
  flex: none;
}
.cv-badge[data-harness="claude"]   { background: var(--h-claude); }
.cv-badge[data-harness="codex"]    { background: var(--h-codex); }
.cv-badge[data-harness="grok"]     { background: var(--h-grok); }
.cv-badge[data-harness="opencode"] { background: var(--h-opencode); color: #2a2000; }
.cv-badge[data-harness="gemini"]   { background: var(--h-gemini); }
.cv-badge[data-harness="hermes"]   { background: var(--h-hermes); }
.cv-badge[data-harness="openclaw"] { background: var(--h-openclaw); }
.cv-badge[data-harness="opensession"] { background: var(--h-opensession); }

/* ---------- Transcript ---------- */

.transcript-empty { padding: 48px 24px; text-align: center; }

.transcript-header {
  position: sticky; top: 0;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px 12px;
  z-index: 1;
}
.th-title { display: flex; align-items: center; gap: 10px; }
.th-title h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.th-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; }
.kv { color: var(--fg); }
.kv .k { color: var(--fg-muted); margin-right: 5px; text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
.th-source { font-family: var(--mono); font-size: 11.5px; margin-top: 8px; word-break: break-all; }

.turns { padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 18px; }

.turn {
  border-left: 3px solid var(--border-strong); padding-left: 14px;
  /* Native virtualization: skip layout/paint for off-screen turns; the browser remembers each
     turn's measured height (so tall messages no longer break scrolling). */
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}
.turn-user { border-left-color: var(--accent); }
.turn-assistant { border-left-color: var(--h-codex); }
.turn-system { border-left-color: var(--fg-muted); }
.turn-tool { border-left-color: var(--warn); }

/* The rail is keyed to the message KIND, not the role — IR v2 distinguishes a typed prompt from
   harness-injected context from a notice from an error, all of which used to arrive as one grey
   "System" turn. Kind wins over role, so these rules follow the role ones above. */
.turn-kind-prompt { border-left-color: var(--accent); }
.turn-kind-reply { border-left-color: var(--h-codex); }
.turn-kind-tool_result { border-left-color: var(--warn); }
.turn-kind-error { border-left-color: var(--error); }
.turn-kind-compaction_summary { border-left-color: var(--warn); border-left-style: dashed; }
.turn-kind-injected_context,
.turn-kind-notice,
.turn-kind-carrier { border-left-color: color-mix(in srgb, var(--fg-muted) 40%, transparent); }
.turn-kind-system_prompt { border-left-color: var(--h-hermes); }
.turn-unknown-kind { border-left-color: var(--h-opencode); border-left-style: dotted; }

.turn-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.turn-glyph { font-size: 11px; color: var(--fg-muted); width: 1.2em; text-align: center; flex: none; }
.turn-role { font-weight: 650; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.turn-user .turn-role { color: var(--accent); }
.turn-assistant .turn-role { color: var(--h-codex); }
.turn-tool .turn-role { color: var(--warn); }
.turn-kind-prompt .turn-role { color: var(--accent); }
.turn-kind-prompt .turn-glyph { color: var(--accent); }
.turn-kind-reply .turn-role { color: var(--h-codex); }
.turn-kind-tool_result .turn-role { color: var(--warn); }
.turn-kind-error .turn-role, .turn-kind-error .turn-glyph { color: var(--error); }
.turn-kind-error .turn-body { color: var(--error); }
.turn-kind-system_prompt .turn-role { color: var(--h-hermes); }
.turn-kind-compaction_summary .turn-role { color: var(--warn); }
/* Machinery reads quieter than conversation, at the same size — dimmed, not shrunk. */
.turn-kind-injected_context .turn-role,
.turn-kind-notice .turn-role,
.turn-kind-carrier .turn-role { color: var(--fg-muted); font-weight: 600; }

.turn-unknown-tag {
  font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--h-opencode); border: 1px solid color-mix(in srgb, var(--h-opencode) 45%, var(--border));
  border-radius: 4px; padding: 0 5px;
}

/* Origin chip — only shown when the origin is NOT the obvious one for the kind. */
.turn-origin {
  font-size: 10.5px; font-family: var(--mono); letter-spacing: 0.03em;
  color: var(--fg-muted); background: var(--bg-sunk);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 7px;
}
.turn-origin[data-origin="human"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.turn-origin[data-origin="hook"],
.turn-origin[data-origin="scheduler"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.turn-origin[data-origin="subagent"] { color: var(--h-hermes); border-color: color-mix(in srgb, var(--h-hermes) 40%, var(--border)); }

.turn-model { font-size: 11.5px; color: var(--fg-muted); font-family: var(--mono); }
.turn-when, .turn-usage { font-size: 11.5px; }
.turn-usage { font-variant-numeric: tabular-nums; }
.turn-cost {
  font-size: 11px; font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ok); margin-left: -4px;
}

/* ---- Quiet turns: injected context, notices, system prompts, carriers ----
   One line until you ask. On a Claude session these are ~40% of all turns, and painting them
   like prompts is what made a transcript unreadable. */
.turn-quiet { position: relative; }
.turn-quiet > details > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.turn-quiet > details > summary::-webkit-details-marker { display: none; }
.turn-quiet > details > summary::before { content: "▸"; color: var(--fg-muted); font-size: 10px; }
.turn-quiet > details[open] > summary::before { content: "▾"; }
.turn-quiet > details[open] > summary { margin-bottom: 6px; }
.turn-quiet .turn-peek {
  font-size: 12px; font-family: var(--mono); color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 200px; min-width: 0;
}
.turn-quiet > details[open] .turn-peek { display: none; }
/* The harness's own name for the record, ahead of what it says. */
.turn-rec {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; margin-right: 7px;
  color: var(--fg-muted); background: var(--bg-sunk); white-space: nowrap;
}

/* A message with no content is a record the harness kept, not a turn. One dim line. */
.turn-empty { border-left-color: color-mix(in srgb, var(--fg-muted) 25%, transparent); }
.turn-empty .turn-head { margin-bottom: 0; }
.turn-empty .turn-role { color: var(--fg-muted); font-weight: 600; }
.turn-empty .turn-glyph { opacity: 0.5; }

/* ---- Structural markers: a rule across the column, not a turn ----
   A compaction, a model change, a branch, a sub-agent handoff: these are punctuation between
   turns. Giving them a turn card said they were something someone said. */
.turn-rule {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-family: var(--mono);
  color: var(--fg-muted);
  margin: 4px 0 4px -17px;   /* pull left past the turns' 3px rail + 14px padding */
  padding: 5px 0;
  border-top: 1px dashed var(--border-strong);
  border-bottom: 1px dashed var(--border-strong);
}
.turn-rule .tr-glyph { flex: none; font-size: 13px; }
.turn-rule .tr-label { font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
.turn-rule .tr-detail { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-rule .tr-when { flex: none; font-size: 11px; }
.turn-rule-compaction_boundary {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--warn) 7%, transparent), transparent);
}
.turn-rule-model_change { color: var(--h-gemini); border-color: color-mix(in srgb, var(--h-gemini) 45%, transparent); }
.turn-rule-branch,
.turn-rule-subagent_spawn,
.turn-rule-subagent_return { color: var(--h-hermes); border-color: color-mix(in srgb, var(--h-hermes) 45%, transparent); }

/* ---- Filter strip ---- */
.turn-filters {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 9px 20px; border-bottom: 1px solid var(--border);
}
.tf-lead { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.tf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px;
  color: var(--fg); font-size: 12px; padding: 2px 10px 2px 8px;
}
.tf-chip .tf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.tf-chip .tf-n { font-family: var(--mono); font-size: 11px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.tf-chip:hover { border-color: var(--border-strong); }
.tf-chip.off { color: var(--fg-muted); background: transparent; text-decoration: line-through; }
.tf-chip.off .tf-dot { background: var(--border-strong); }

.turns.hide-injected .turn-kind-injected_context { display: none; }
.turns.hide-records .turn-empty { display: none; }
.turns.hide-thinking .block.thinking { display: none; }
.turns.hide-tools .block.tool-use,
.turns.hide-tools .block.tool-result,
.turns.hide-tools details.tool-use,
.turns.hide-tools details.tool-result { display: none; }

/* ---- Lineage + system prompt in the transcript header ---- */
.th-lineage { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ln-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 10px; font-size: 11.5px; color: var(--fg-muted);
}
.ln-chip code { font-size: 11px; color: var(--fg); }
.ln-chip .ln-k { text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.06em; }
button.ln-chip.is-nav { cursor: pointer; }
button.ln-chip.is-nav:hover { border-color: var(--accent); color: var(--accent); }
button.ln-chip.is-nav:hover code { color: var(--accent); }

.th-sysprompt { margin-top: 10px; }
.th-sysprompt > summary {
  cursor: pointer; list-style: none; font-size: 12px; font-family: var(--mono);
  color: var(--fg-muted); display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px;
  background: var(--bg-sunk);
}
.th-sysprompt > summary::-webkit-details-marker { display: none; }
.th-sysprompt > summary::before { content: "▸"; font-size: 10px; }
.th-sysprompt[open] > summary::before { content: "▾"; }
.th-sysprompt .sp-glyph { color: var(--h-hermes); font-weight: 700; }
.th-sysprompt .copy-btn { margin-left: auto; }
.sp-body {
  margin: 8px 0 0; max-height: 420px; overflow: auto;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap;
}

/* ---- Structured tool-result details ---- */
.td-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.td-chip {
  font-size: 11px; font-family: var(--mono); color: var(--fg-muted);
  background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 6px;
  padding: 1px 7px;
}
.td-chip b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.td-chip.bad { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, var(--border)); }
.td-chip.bad b { color: var(--error); }

.tool-ns {
  font-size: 10.5px; font-family: var(--mono); color: var(--h-hermes);
  border: 1px solid color-mix(in srgb, var(--h-hermes) 40%, var(--border));
  border-radius: 4px; padding: 0 5px;
}

.ub-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--h-opencode); font-family: var(--mono);
}

.turn-body { display: flex; flex-direction: column; gap: 10px; }
.block { font-size: 14.5px; }
.block-text { white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; }
.block-empty { font-size: 13px; }

.block-text code.inline, .thinking-body code.inline {
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.88em;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
  overflow: auto;
  font-size: 12.5px;
  line-height: 1.5;
}
pre code { background: none; padding: 0; }
.code-fence[data-lang]::before {
  content: attr(data-lang);
  display: block;
  font-size: 10px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* Rendered Markdown prose inside text blocks */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 10px; }
.md p:last-child { margin-bottom: 0; }
.md .md-h { margin: 14px 0 8px; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; }
.md h1.md-h { font-size: 1.3em; }
.md h2.md-h { font-size: 1.18em; }
.md h3.md-h { font-size: 1.08em; }
.md h4.md-h, .md h5.md-h, .md h6.md-h { font-size: 1em; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.md .md-list { margin: 6px 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 3px; }
.md .md-list li { margin: 0; }
.md ul.md-list { list-style: disc; }
.md ol.md-list { list-style: decimal; }
.md .md-quote {
  margin: 8px 0; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--border-strong); color: var(--fg-muted);
}
.md .md-quote > :last-child { margin-bottom: 0; }
.md .md-hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.md a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.md a:hover { border-bottom-color: var(--accent); }
.md strong { font-weight: 650; }
.md del { opacity: 0.7; }

/* Tiny code highlighter tokens (used in fenced + tool JSON blocks) */
.hl-kw  { color: var(--accent); font-weight: 600; }
.hl-str { color: var(--h-codex); }
.hl-num { color: var(--h-grok); }
.hl-com { color: var(--fg-muted); font-style: italic; }
:root[data-theme="dark"] .hl-str { color: #6fd39a; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .hl-str { color: #6fd39a; } }

.tool-out { max-height: 420px; }

/* ---------- Sub-agent tree (Claude Task sub-agents, nested in the transcript) ---------- */
.sub-panel {
  margin: 4px 20px 10px; border-radius: 11px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-elev));
}
.sub-panel-head {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 9px 13px; background: none; border: 0; color: var(--fg);
  font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.sub-panel-head:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.sub-glyph { color: var(--accent); font-size: 14px; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
.sub-caret { margin-left: auto; color: var(--fg-muted); font-size: 11px; }
.sub-list { display: flex; flex-direction: column; gap: 2px; padding: 2px 6px 8px; }
.sub-row-head { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.sub-row-head:hover { background: var(--bg-sunk); }
.sub-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none; margin-left: 4px;
  background: var(--accent); box-shadow: 0 0 7px -1px var(--accent);
}
.sub-row-title { font-weight: 550; font-size: 13px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-row.open .sub-row-title { font-family: var(--sans); color: var(--accent); }
.sub-row-meta { margin-left: auto; flex: none; font-size: 11px; white-space: nowrap; }
.sub-row-caret { flex: none; color: var(--fg-muted); font-size: 11px; }
.sub-row-body {
  margin: 0 0 8px 18px; border-left: 2px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}
.sub-row-body cv-transcript { display: block; }
.sub-row-body .turns { padding: 8px 14px 14px; gap: 12px; }
.sub-loading { padding: 12px 14px; font-size: 12.5px; }

/* ---------- Events panel (what the session DID — edits/commands/errors) ---------- */
.ev-list { padding: 2px 10px 10px; }
.ev-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 4px 6px; border-radius: 6px; font-size: 12.5px;
}
.ev-row:hover { background: var(--bg-sunk); }
.ev-glyph { flex: none; width: 16px; text-align: center; color: var(--fg-muted); }
.ev-error .ev-glyph { color: var(--err, #d65a5a); }
.ev-file_edit .ev-glyph { color: var(--accent); }
.ev-kind { flex: none; font-size: 11px; color: var(--fg-muted); width: 62px; }
.ev-tool { flex: none; font-size: 11px; }
.ev-target { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ev-when { margin-left: auto; flex: none; font-size: 11px; white-space: nowrap; }
.ev-detail { flex-basis: 100%; padding-left: 24px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Paged transcript: "load more" footer ---------- */
.load-more {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 20px 18px; padding: 10px 14px;
  border: 1px dashed var(--border); border-radius: 11px;
}
.load-more-note { font-size: 12px; }

/* Thinking (collapsible) */
.thinking {
  background: var(--thinking-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
}
.thinking > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-muted);
  list-style: none;
  user-select: none;
}
.thinking > summary::before { content: "▸ "; }
.thinking[open] > summary::before { content: "▾ "; }
.thinking-body { padding: 0 12px 12px; font-size: 13.5px; color: var(--fg); opacity: 0.9; white-space: normal; overflow-wrap: anywhere; }

/* Tool blocks */
.block-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-family: var(--mono); color: var(--fg-muted);
  margin-bottom: 5px;
}
.tool-glyph { font-size: 12px; }
.tool-name { color: var(--accent); font-weight: 600; }
.tool-result.is-error .block-label { color: var(--error); }
.tool-result.is-error pre { background: var(--error-bg); border-color: color-mix(in srgb, var(--error) 40%, var(--border)); }
.copy-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-family: var(--mono);
}
.copy-btn:hover { color: var(--fg); border-color: var(--border-strong); }

/* Image placeholder */
.image-placeholder {
  display: flex; align-items: center; gap: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--bg-sunk);
}
.image-glyph { font-size: 24px; }
.image-type { font-size: 12px; font-family: var(--mono); }
.image-ref { font-size: 11px; font-family: var(--mono); }

/* ---------- Footer ---------- */

.app-footer { padding: 14px 4px 22px; font-size: 12px; text-align: center; }

/* ---------- Source chips (dropzone) ---------- */
.dz-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.dropzone:not(.compact) .dz-sources:not(:empty) { margin-top: 10px; }
.dropzone.compact .dz-sources { flex: none; }
.src-chip {
  font-size: 11.5px; font-family: var(--mono);
  background: var(--bg-sunk); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 9px; color: var(--fg-muted);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.src-chip b { color: var(--accent); }

/* ---------- View tabs ---------- */
.view-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 4px 14px; padding-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.view-tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-muted); font-size: 14px; font-weight: 550;
  padding: 9px 14px; margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
}
.view-tab:hover { color: var(--fg); background: var(--bg-sunk); }
.view-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.view-tab .vt-glyph { font-size: 14px; }

.view-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view-empty { padding: 48px 24px; text-align: center; }
.view-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 4px 14px; }
.view-head h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }

/* Shared small buttons */
.mini-btn {
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--fg-muted); border-radius: 7px; padding: 3px 9px;
  font-size: 12px;
}
.mini-btn:hover:not(:disabled) { color: var(--fg); border-color: var(--border-strong); }
.mini-btn:disabled { opacity: 0.4; cursor: default; }
.btn-accent {
  background: var(--accent); color: var(--accent-fg);
  border: 1px solid var(--accent); border-radius: 7px;
  padding: 4px 11px; font-size: 12.5px; font-weight: 600;
}
.btn-accent:hover:not(:disabled) { filter: brightness(1.06); }
.btn-accent:disabled { opacity: 0.45; cursor: default; }

/* ---------- Transcript: header actions, file blocks, tool extras ---------- */
.th-actions { display: flex; gap: 6px; margin-left: auto; }
.pick-btn {
  margin-left: auto; background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 650;
}
.pick-btn:hover { filter: brightness(1.08); }

.tool-summary {
  cursor: pointer; padding: 8px 10px; font-size: 12px; font-family: var(--mono);
  color: var(--fg-muted); list-style: none; user-select: none;
  background: var(--bg-sunk); border-radius: 8px;
}
.tool-summary::before { content: "▸ "; }
.tool-summary .copy-btn { float: right; }
details[open] > .tool-summary::before { content: "▾ "; }
details.tool-use > .tool-summary, details.tool-result > .tool-summary { border: 1px solid var(--border); }
details.tool-use[open], details.tool-result[open] { display: flex; flex-direction: column; gap: 8px; }
.tool-status {
  font-size: 10.5px; font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.04em; padding: 1px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--ok) 18%, var(--bg-sunk)); color: var(--ok);
}
.tool-details { margin-top: 4px; }
.tool-details > summary { cursor: pointer; font-size: 11px; }
.opaque-blob { font-family: var(--mono); font-size: 12px; opacity: 0.7; }
.thinking-body .sig { margin-top: 6px; font-size: 10.5px; font-family: var(--mono); }
.unknown-block { font-family: var(--mono); font-size: 12.5px; }
.unknown-block summary { cursor: pointer; }

.file-card {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; background: var(--bg-sunk);
}
.file-glyph { font-size: 22px; }
.file-path { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.file-type { font-size: 11px; font-family: var(--mono); }

/* ---------- Timeline ---------- */
/* ----- Timeline: stat strip ----- */
.tl-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 4px 16px; }
.tl-stat {
  flex: 1 1 120px; min-width: 110px;
  padding: 12px 14px; border-radius: var(--radius);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--bg-elev)), var(--bg-elev));
  border: 1px solid var(--border);
}
.tl-stat-n { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.tl-stat-l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

/* ----- Timeline: activity heatmap (the constellation) ----- */
.hm-scroll {
  margin: 0 4px 12px; padding: 14px 16px 12px; overflow-x: auto; overflow-y: hidden;
  border-radius: var(--radius); border: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--bg-elev);
}
.hm-grid { --hm-cell: 13px; display: grid; gap: 3px; width: max-content; align-items: center; }
.hm-months { gap: 3px; font-size: 10.5px; color: var(--fg-muted); margin-bottom: 2px; }
.hm-month { white-space: nowrap; align-self: end; }
.hm-weekday { grid-column: 1; font-size: 10px; color: var(--fg-muted); padding-right: 6px; justify-self: end; }
.hm-cell {
  width: var(--hm-cell); height: var(--hm-cell); border-radius: 3px;
  background: var(--bg-sunk); transition: transform 0.08s ease;
}
.hm-cell[data-count]:not([data-count="0"]) { cursor: pointer; }
.hm-cell[data-level="1"] { background: color-mix(in srgb, var(--accent) 24%, var(--bg-sunk)); }
.hm-cell[data-level="2"] { background: color-mix(in srgb, var(--accent) 46%, var(--bg-sunk)); }
.hm-cell[data-level="3"] {
  background: color-mix(in srgb, var(--accent) 70%, var(--bg-sunk));
  box-shadow: 0 0 5px -1px color-mix(in srgb, var(--accent) 60%, transparent);
}
.hm-cell[data-level="4"] {
  background: var(--accent);
  box-shadow: 0 0 9px 0 color-mix(in srgb, var(--accent) 75%, transparent);
}
.hm-cell:hover { transform: scale(1.35); }
.hm-cell:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
.hm-empty { background: transparent; }

/* ----- Timeline: harness legend ----- */
.tl-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 6px 18px; font-size: 12px; }
.tl-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.tl-legend-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 5px -1px currentColor; }

/* ----- Timeline: day feed ----- */
.tl-feed { padding: 0 4px 24px; }
/* content-visibility lets the browser skip layout/paint for off-screen day groups (cheap virtual
   scroll over thousands of sessions); contain-intrinsic-size keeps the scrollbar honest. */
.tl-day { margin-bottom: 18px; content-visibility: auto; contain-intrinsic-size: auto 220px; }
.tl-day-label {
  position: sticky; top: 0; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--fg-muted);
  padding: 5px 12px 5px 22px; margin-bottom: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, var(--bg-elev)), transparent);
  border-radius: 999px;
}
/* The constellation rail: a glowing amethyst spine the day's session-dots hang off. */
.tl-items {
  display: flex; flex-direction: column; gap: 3px; padding-left: 16px; margin-left: 9px;
  border-left: 2px solid transparent;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 25%, transparent)) left/2px 100% no-repeat;
  box-shadow: -1px 0 8px -3px color-mix(in srgb, var(--accent) 50%, transparent);
}
.tl-node {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; outline: none; position: relative;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.tl-node:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--accent)) 10%, var(--bg-sunk)), var(--bg-sunk));
  border-color: color-mix(in srgb, var(--c, var(--accent)) 35%, var(--border));
  transform: translateX(2px);
}
.tl-node:focus-visible { border-color: var(--accent); }
/* Glowing harness-colored node on the rail (--c set inline per harness). */
.tl-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none; margin-left: -23px;
  background: var(--c, var(--fg-muted));
  box-shadow: 0 0 0 3px var(--bg), 0 0 8px 0 var(--c, transparent);
}
.tl-node:hover .tl-dot { box-shadow: 0 0 0 3px var(--bg), 0 0 12px 1px var(--c, transparent); }
.tl-time { font-size: 11.5px; font-family: var(--mono); width: 48px; flex: none; }
.tl-title { font-weight: 550; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-meta { font-size: 11.5px; margin-left: auto; white-space: nowrap; }
@keyframes tl-flash {
  0% { background: color-mix(in srgb, var(--accent) 28%, transparent); }
  100% { background: transparent; }
}
.tl-day.tl-flash .tl-items { animation: tl-flash 1.2s ease-out; border-radius: 8px; }

/* ---------- Session picker (replaces native <select> for sessions) ---------- */
cv-session-picker { position: relative; display: inline-flex; min-width: 0; }
.sp-trigger {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 7px 11px; border-radius: 9px; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--fg);
  font: inherit; font-size: 13px; text-align: left; transition: border-color 0.12s, box-shadow 0.12s;
}
.sp-trigger:hover { border-color: var(--accent); }
.sp-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.sp-trigger-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.sp-caret { margin-left: auto; color: var(--fg-muted); font-size: 10px; flex: none; }

.sp-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  width: min(440px, 88vw); max-width: 88vw;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column;
  animation: sp-in 0.12s ease-out;
}
@keyframes sp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sp-search {
  margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  padding: 11px 14px; font: inherit; font-size: 14px; background: transparent; color: var(--fg); outline: none;
}
.sp-list { max-height: min(50vh, 420px); overflow-y: auto; padding: 6px; }
.sp-empty-row { padding: 18px 14px; text-align: center; font-size: 13px; }
.sp-more { padding: 9px 12px; text-align: center; font-size: 11.5px; border-top: 1px dashed var(--border); }
.sp-entry {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  content-visibility: auto; contain-intrinsic-size: auto 46px;
}
.sp-entry.sp-active { background: color-mix(in srgb, var(--accent) 16%, var(--bg-elev)); }
.sp-entry.sp-current { box-shadow: inset 3px 0 0 var(--accent); }
.sp-entry-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-entry-title { font-weight: 550; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-entry-meta { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Projects view ---------- */
/* Responsive grid: compact cards tile when there's width, collapse to one column when narrow.
   align-items:start so an expanded card grows down without stretching its row-mates. */
/* "Touched" lookup — which sessions touched a file (cv serve's event catalog). */
.touched-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 4px 14px;
}
.touched-input {
  flex: 1 1 260px; min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-sunk); color: var(--fg); font-size: 13px;
}
.touched-input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); border-color: var(--accent); }
.touched-edits { display: flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.touched-results { flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; }
.touched-row {
  display: flex; align-items: baseline; gap: 9px;
  padding: 6px 9px; border-radius: 8px; font-size: 13px;
}
.touched-row.in-pool { cursor: pointer; }
.touched-row.in-pool:hover { background: var(--bg-sunk); }
.touched-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.touched-meta { margin-left: auto; flex: none; font-size: 11.5px; white-space: nowrap; }

.proj-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px; align-items: start; padding: 0 4px 24px;
}
.proj {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 5%, var(--bg-elev)), var(--bg-elev));
  content-visibility: auto; contain-intrinsic-size: auto 130px;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.proj:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }
.proj-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 16px 4px; background: none; border: 0; cursor: pointer; color: var(--fg);
  font: inherit; text-align: left;
}
.proj-caret { color: var(--fg-muted); font-size: 11px; width: 12px; flex: none; }
.proj-mark { color: var(--accent); font-size: 14px; flex: none; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
.proj-name { font-weight: 650; font-size: 15.5px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-count {
  margin-left: auto; flex: none; font-size: 12px; font-weight: 650;
  padding: 2px 9px; border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.proj-when { flex: none; font-size: 11.5px; }
.proj-bar { display: flex; height: 6px; margin: 6px 16px; border-radius: 3px; overflow: hidden; gap: 1px; }
.proj-seg { min-width: 2px; }
.proj-chips { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 4px 16px 14px; font-size: 12px; }
.proj-chip { display: inline-flex; align-items: center; gap: 5px; }
.proj-chip-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 5px -1px currentColor; }
.proj-path { margin-left: auto; font-family: var(--mono); font-size: 11px; }
.proj-sessions { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px 12px; border-top: 1px solid var(--border); }
.proj-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  content-visibility: auto; contain-intrinsic-size: auto 38px;
}
.proj-row:hover { background: var(--bg-sunk); }
.proj-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.proj-row-title { font-weight: 550; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-row-meta { margin-left: auto; flex: none; font-size: 11.5px; white-space: nowrap; }

/* ---------- Stats ---------- */
.stat-grid {
  /* Capped tracks, not `1fr`: a three-tile row used to stretch each tile to 460px of empty
     ground around a four-digit number. Tiles keep their size and the row keeps its slack. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 240px));
  justify-content: start;
  gap: 10px; margin: 0 4px 20px;
}
.stat-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--bg-elev)), var(--bg-elev));
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  transition: transform 0.12s ease, border-color 0.12s, box-shadow 0.12s;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 4px 18px -6px color-mix(in srgb, var(--accent) 40%, transparent);
}
.stat-num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.stat-card:hover .stat-num { color: var(--accent); }
.stat-label { font-size: 11px; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-note { margin: 4px 6px 0; font-size: 12px; }
.stat-num { font-variant-numeric: tabular-nums; }
.cwd-count { font-variant-numeric: tabular-nums; }

/* Two halves, one page: what the whole archive is, and what the transcripts on this page are.
   A rule and a label separate them — not another box, which would just read as more cards. */
.stat-section { margin-bottom: 26px; }
.stat-section-head {
  display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap;
  margin: 0 4px 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.stat-section-head h3 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--fg);
}
.stat-source { font-size: 12px; }
.stat-block p.stat-source { margin: 10px 0 0; }
.stat-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 0 4px 18px; }
.stat-block {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin: 0 4px 14px;
}
.stat-cols .stat-block { margin: 0; }
.stat-block h3 { margin: 0 0 12px; font-size: 13px; font-weight: 650; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 100px 1fr 50px; align-items: center; gap: 8px; }
.bar-label { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 12px; background: var(--bg-sunk); border-radius: 6px; overflow: hidden; }
.bar-fill {
  display: block; height: 100%; border-radius: 6px; min-width: 2px; transition: width 0.3s;
  box-shadow: 0 0 8px -2px color-mix(in srgb, var(--accent) 55%, transparent);
}
.bar-val { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.cwd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cwd-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.cwd-path { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwd-count { font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 80px; display: block; }

/* ---------- Compare ---------- */
.cmp-pickers { display: flex; align-items: center; gap: 10px; margin: 0 4px 14px; flex-wrap: wrap; }
.cmp-grid { margin: 0 4px; }
.cmp-heads, .cmp-row { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 0; }
.cmp-heads { position: sticky; top: 0; z-index: 1; background: var(--bg); padding: 8px 0; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.cmp-col-head { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.cmp-col-title { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-row {
  align-items: stretch;
  /* Virtualize: a comparison of two big sessions can be thousands of rows. */
  content-visibility: auto; contain-intrinsic-size: auto 96px;
}
.cmp-cell { padding: 6px; min-width: 0; }
.cmp-gutter { display: flex; align-items: center; justify-content: center; color: var(--fg-muted); font-family: var(--mono); }
.cmp-msg { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--bg-elev); height: 100%; }
.cmp-msg-head { display: flex; gap: 8px; align-items: baseline; font-size: 11px; margin-bottom: 5px; }
.cmp-text { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmp-think, .cmp-tool { font-size: 12.5px; margin-top: 4px; overflow-wrap: anywhere; }
.cmp-absent { padding: 8px; font-style: italic; }
.cmp-row.cmp-same .cmp-cell .cmp-msg { opacity: 0.72; }
.cmp-row.cmp-diff .cmp-cell { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.cmp-row.cmp-diff .cmp-msg { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.cmp-row.cmp-only-a .cmp-cell:first-child, .cmp-row.cmp-only-b .cmp-cell:last-child { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ---------- Splice ---------- */
.splice-grid {
  display: grid; grid-template-columns: 1fr 0.9fr 1fr; gap: 12px;
  min-height: 0; flex: 1; padding: 0 4px 16px;
}
.splice-source, .splice-lane, .splice-preview {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.splice-pane-head {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg-sunk);
  font-size: 13px;
}
.splice-pane-head select {
  font: inherit; font-size: 12px; max-width: 180px;
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 6px;
}
.splice-source-body, .splice-preview-body { overflow: auto; min-height: 0; flex: 1; }
.splice-source-body .transcript-header, .splice-preview-body .transcript-header { padding: 12px 14px 8px; }
.splice-source-body .turns, .splice-preview-body .turns { padding: 12px 14px 20px; gap: 12px; }

.splice-lane { min-height: 0; }
.splice-title-row { padding: 10px 12px 0; }
.splice-title {
  width: 100%; padding: 7px 10px; font-size: 13px;
  background: var(--bg-sunk); color: var(--fg);
  border: 1px solid var(--border); border-radius: 7px;
}
.lane-list { list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; overflow: auto; flex: 1; min-height: 0; }
.lane-empty { padding: 24px 8px; text-align: center; font-size: 13px; }
.lane-item {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: 8px; padding: 7px 9px; background: var(--bg-elev);
}
.lane-item.dragging { opacity: 0.4; }
.lane-item.drop-target { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.lane-role-user { border-left-color: var(--accent); }
.lane-role-assistant { border-left-color: var(--h-codex); }
.lane-role-system { border-left-color: var(--fg-muted); }
.lane-role-tool { border-left-color: var(--warn); }
.lane-grip { cursor: grab; color: var(--fg-muted); font-size: 12px; user-select: none; }
.lane-body { min-width: 0; }
.lane-head { display: flex; align-items: center; gap: 7px; }
.lane-head .turn-role { font-size: 11px; }
.lane-from { font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-preview { font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-ctrls { display: flex; gap: 2px; }
.lane-btn { background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--fg-muted); padding: 2px 5px; font-size: 11px; }
.lane-btn:hover:not(:disabled) { color: var(--fg); border-color: var(--border); background: var(--bg-sunk); }
.lane-btn:disabled { opacity: 0.3; cursor: default; }
.lane-rm:hover { color: var(--error); }
.splice-actions { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.splice-preview-body .transcript-empty { padding: 32px 16px; }

/* ---------- Splice: generation + branches ---------- */
.splice-settings-btn { margin-left: auto; }

.splice-settings {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 14px; margin: 0 4px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.ls-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ls-label { font-size: 12px; font-weight: 650; color: var(--fg-muted); width: 120px; flex: none; }
.ls-key, .ls-model {
  flex: 1; min-width: 180px; padding: 6px 9px; font-size: 13px;
  background: var(--bg-sunk); color: var(--fg);
  border: 1px solid var(--border); border-radius: 7px; font-family: var(--mono);
}
.ls-model-preset {
  font: inherit; font-size: 12.5px;
  background: var(--bg-sunk); color: var(--fg);
  border: 1px solid var(--border); border-radius: 7px; padding: 6px 7px;
}
.ls-note { font-size: 11.5px; margin: 0; }
.ls-note code { background: var(--code-bg); padding: 0 4px; border-radius: 4px; }

/* branch tree */
.branch-tree {
  margin: 0 4px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.branch-tree-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.branch-bar-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.branch-rows { display: flex; flex-direction: column; gap: 2px; max-height: 168px; overflow: auto; }
.branch-node {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid transparent; border-radius: 7px;
  padding: 3px 8px; font-size: 12.5px; color: var(--fg-muted);
  cursor: pointer; outline: none;
}
.branch-node:hover { background: var(--bg-sunk); color: var(--fg); }
.branch-node:focus-visible { border-color: var(--accent); }
.branch-node.on { background: color-mix(in srgb, var(--accent) 13%, var(--bg-elev)); border-color: var(--accent); color: var(--fg); }
.bt-guide { font-family: var(--mono); color: var(--border-strong); white-space: pre; user-select: none; line-height: 1; }
.bt-rail { display: inline-block; width: 1ch; }
.bt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: none; }
.branch-node.on .bt-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.bt-branch { font-size: 10.5px; font-family: var(--mono); }
.branch-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.branch-count {
  font-variant-numeric: tabular-nums; font-size: 11px; margin-left: auto;
  background: var(--bg-sunk); border-radius: 999px; padding: 0 7px; flex: none;
}
.branch-x { color: var(--fg-muted); font-size: 10px; padding: 0 3px; border-radius: 4px; flex: none; }
.branch-x:hover { color: var(--error); background: var(--error-bg); }
.branch-add { border-radius: 999px; }

/* generate bar */
.splice-gen {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-top: 1px solid var(--border); background: var(--bg-sunk);
}
.btn-gen {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--h-grok)));
  color: var(--accent-fg); border: none; border-radius: 8px;
  padding: 6px 14px; font-size: 13px; font-weight: 650;
}
.btn-gen:hover:not(:disabled) { filter: brightness(1.07); }
.btn-gen:disabled { opacity: 0.5; cursor: default; filter: grayscale(0.3); }
.gen-model { font-family: var(--mono); font-size: 11px; }
.gen-needkey {
  background: transparent; border: 1px dashed var(--warn); color: var(--warn);
  border-radius: 7px; padding: 3px 9px; font-size: 11.5px; font-weight: 600;
}
.gen-error {
  flex-basis: 100%; font-size: 12px; color: var(--error);
  background: var(--error-bg); border: 1px solid color-mix(in srgb, var(--error) 35%, var(--border));
  border-radius: 7px; padding: 6px 9px;
}
.lane-gen { border-left-color: var(--h-grok); background: color-mix(in srgb, var(--h-grok) 6%, var(--bg-elev)); }
.lane-genbadge { font-size: 11px; }

/* ---------- Fleet dashboard ---------- */
.fleet-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 4px 14px; padding: 10px 12px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.fleet-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--fg-muted); }
.fleet-dot-ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.fleet-dot-error { background: var(--error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 25%, transparent); }
.fleet-dot-static { background: var(--h-grok); }
.fleet-field { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.fleet-base {
  width: 220px; padding: 5px 9px; font-size: 12.5px; font-family: var(--mono);
  background: var(--bg-sunk); color: var(--fg);
  border: 1px solid var(--border); border-radius: 7px;
}
.fleet-stamp { font-size: 11.5px; }
.fleet-ver { font-family: var(--mono); font-size: 11px; }

.fleet-offline {
  text-align: center; max-width: 620px; margin: 24px auto;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 24px;
}
.fo-glyph { font-size: 42px; }
.fleet-offline h3 { margin: 8px 0 6px; font-size: 18px; }
.fleet-offline p { font-size: 13.5px; margin: 8px 0; }
.fleet-offline pre { text-align: left; max-width: 360px; margin: 10px auto; }
.fleet-offline code { background: var(--code-bg); padding: 0 4px; border-radius: 4px; }
.fo-static {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: 12.5px;
}

.fleet-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 0 4px 16px; align-items: start;
}
.fleet-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
  min-height: 0;
}
.fleet-card h3 {
  margin: 0 0 12px; font-size: 13px; font-weight: 650; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fleet-sessions { grid-column: 1 / -1; }
.fleet-empty { font-size: 13px; padding: 8px 2px; }

/* recent sessions */
.fleet-session-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.fleet-session { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-sunk); }
.fs-body { min-width: 0; }
.fs-title { font-weight: 550; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; margin-top: 3px; }
.fs-cwd { font-family: var(--mono); }

/* ---------- Help overlay ---------- */
.help-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--fg) 28%, transparent);
  backdrop-filter: blur(2px); padding: 20px;
  animation: help-fade 0.12s ease-out;
}
@keyframes help-fade { from { opacity: 0; } to { opacity: 1; } }
.help-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  width: min(440px, 100%); padding: 18px 20px;
}
.help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.help-head h2 { margin: 0; font-size: 17px; font-weight: 650; }
.help-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.help-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.help-table tr:last-child td { border-bottom: none; }
.help-key { white-space: nowrap; width: 42%; }
.help-table kbd {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--bg-sunk); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--fg);
}
.help-foot { margin: 14px 0 0; font-size: 11.5px; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .splice-grid { grid-template-columns: 1fr; }
  .splice-source-body, .splice-preview-body { max-height: 360px; }
}

@media (max-width: 820px) {
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .layout { grid-template-columns: 1fr; }
  cv-app { padding: 0 10px; }
  /* On narrow screens, when a transcript is shown, hide the list to focus. */
  .layout.show-transcript .pane-list { display: none; }
  .layout .pane-transcript { display: none; }
  .layout.show-transcript .pane-transcript { display: block; }
  .layout:not(.show-transcript) .pane-transcript { display: none; }
  .back-btn { display: block; }
  .cmp-heads, .cmp-row { grid-template-columns: 1fr; }
  .cmp-gutter { display: none; }
  .cmp-row .cmp-cell:first-child { border-bottom: 1px dashed var(--border); }
  .fleet-grid { grid-template-columns: 1fr; }
  .fleet-base { width: 100%; }
}

@media (min-width: 821px) {
  /* The panes are a fixed height so each scrolls on its own; `--chrome-h` is everything above
     them (header + dropzone + tabs), which shrinks when the dropzone folds — see cv-app.
     `grid-template-rows` is what makes that height bind: an implicit `auto` row sizes to its
     content and spills, so with 6,873 sessions the list pane grew to 467,000px and it was the
     DOCUMENT that scrolled — header, tabs and footer sliding away with it. */
  .layout {
    /* `flex: none` is the other half of it: as a flex item of `.view-host`, `.layout`'s
       `flex: 1` (basis 0%, grow 1) took precedence over `height`, and since nothing up the
       chain has a definite height, "grow" meant "grow to the content". */
    flex: none;
    height: calc(100vh - var(--chrome-h, 280px));
    min-height: 420px;
    grid-template-rows: minmax(0, 1fr);
  }
  .splice-grid { height: calc(100vh - calc(var(--chrome-h, 280px) + 20px)); min-height: 460px; }
}

/* Respect users who prefer reduced motion: keep the static glows, drop the animation/transition. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}