/* Agent Timeline — OLED-optimised dark theme.
   True black backgrounds, thin low-luminance borders, saturated accents used sparingly. */

:root {
  color-scheme: dark;
  --bg: #000;
  --bg-raised: #070707;
  --bg-card: #050505;
  --bg-hover: #121212;
  --line: #242424;
  --line-strong: #383838;
  --text: #d6d6d6;
  --text-dim: #a0a0a0;
  --text-faint: #808080;
  --accent: #3fa0ff;
  --danger: #ff4d5e;
  --warn: #ffb020;
  --ok: #34d17a;

  /* event type colours */
  --ev-operator: #ff9f43;
  --ev-command: #ffd166;
  --ev-reply: #b9b9b9;
  --ev-thinking: #6e6e6e;
  --ev-tool: #3fa0ff;
  --ev-spawn: #34d17a;
  --ev-message: #c77dff;
  --ev-stop: #ff4d5e;
  --ev-handback: #2ed3c6;
  --ev-notification: #ffd166;
  --ev-received: #9a7bd6;
  --ev-system: #5f6b7a;

  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 3px;
  --timeline-h: 170px;
}

* { box-sizing: border-box; }
::selection { background: #174e7d; color: #fff; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 var(--sans);
}
/* The landing page scrolls with the document; the viewer fills the window and its panels scroll. */
body.in-viewer { overflow: hidden; }
h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 22px; letter-spacing: -.04em; }
h2 { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); white-space: nowrap; }
.mono { font-family: var(--mono); }
.muted { color: var(--text-dim); }
.spacer { flex: 1; }
[hidden] { display: none !important; }

button, select, input[type="search"], input[type="text"] {
  font: inherit;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 4px 10px;
}
button { cursor: pointer; }
button:active:not(:disabled) { background: #202020; }
button:hover { background: var(--bg-hover); border-color: #3a3a3a; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:disabled { opacity: .4; cursor: default; }
input[type="search"] { width: 100%; }
label { color: var(--text-dim); }

/* ---------- landing ---------- */
#landing {
  min-height: 100%;
  padding: 24px clamp(16px, 5vw, 64px);
  max-width: 1100px;
  margin: 0 auto;
}
.landing-head { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.landing-title { flex: 1 1 320px; min-width: 0; }
.eyebrow, .list-heading { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); }
.eyebrow { display: block; margin-bottom: 4px; }
#source { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 12px; }
#mount-btn, #play-btn { background: #dedede; color: #080808; border-color: #dedede; }
#mount-btn:hover, #play-btn:hover { background: #fff; border-color: #fff; }
.landing-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.directory-sources { width: 100%; list-style: none; margin: 0; padding: 0; }
.directory-source { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.directory-source-name { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
#directory-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius); }
#directory-dialog::backdrop { background: rgba(0, 0, 0, .6); }
#directory-dialog-close { margin-left: auto; }
.directory-dialog-body { padding: 0 16px 16px; font-size: 13px; line-height: 1.5; }
.directory-dialog-body p { margin: 12px 0; }
.directory-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.directory-path > span { flex-basis: 80px; }
.directory-path code { flex: 1 1 220px; overflow-wrap: anywhere; }
.directory-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.msg { width: 100%; margin: 0; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-raised); }
.msg.error { border-color: #5a1f26; color: #ff8a94; }
.hint { width: 100%; margin: 0; font-size: 12px; }
button.small { padding: 1px 7px; font-size: 11px; vertical-align: 1px; }
.hint code { font-family: var(--mono); color: var(--text); background: var(--bg-card); padding: 1px 5px; border-radius: 3px; }
.landing-tools { display: flex; gap: 8px; margin-bottom: 12px; }
/* Sessions ticked for a combined view: a sticky strip naming them, with Open together and Clear.
   The strip keeps its row when nothing is ticked, showing only a hint, so the list never jumps. */
.pick-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  min-height: 40px; margin-bottom: 8px; padding: 6px 12px;
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.pick-bar.empty { position: static; background: transparent; border-color: transparent; }
.pick-bar.empty > :not(.pick-hint), .pick-bar:not(.empty) > .pick-hint { display: none; }
.pick-hint { font-size: 12px; color: var(--text-faint); }
/* Fixed line heights keep the filled strip at the reserved 40 px: 26 px buttons, 20 px chips. */
.pick-bar button { line-height: 18px; padding: 3px 10px; }
.pick-bar .pick-chip { line-height: 16px; padding: 1px 6px; }
.pick-count { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); white-space: nowrap; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-width: 0; }
.pick-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text); }
.pick-chip .x { color: var(--text-faint); }
.pick-chip:hover .x { color: var(--danger); }
#pick-open-btn { background: #dedede; color: #080808; border-color: #dedede; }
#pick-open-btn:hover { background: #fff; border-color: #fff; }
.list-heading { display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line-strong); }
.session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* While the list restarts, the old rows fade a little, a sweep runs along the heading's rule, and the
   heading's right label reads Refreshing…; nothing moves, and quick reloads never show it. */
.list-heading { position: relative; }
.list-heading-side { display: grid; justify-items: end; }
.list-heading-side > span { grid-area: 1 / 1; }
.list-busy { visibility: hidden; color: var(--accent); }
#landing.refreshing .list-busy { visibility: visible; }
#landing.refreshing .list-idle { visibility: hidden; }
#landing.refreshing .list-heading::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 1;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat; background-size: 40% 100%;
  animation: sweep-rule 1.1s ease-in-out infinite;
}
@keyframes sweep-rule { 0% { background-position: -67% 0; } 100% { background-position: 167% 0; } }
.session-row { transition: opacity .15s; }
#landing.refreshing .session-row { opacity: .5; }
.session-row {
  --row-pad-y: 10px;
  --row-pad-x: 12px;
  --row-gap-x: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px var(--row-gap-x);
  padding: var(--row-pad-y) var(--row-pad-x);
  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  cursor: pointer;
}
.session-row:hover, .session-row:focus-visible { background: var(--bg-hover); border-left-color: var(--accent); }
.session-row .meta .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 100%; }
.session-row .side { font-variant-numeric: tabular-nums; }
.session-row .title { font-weight: 600; color: #e8e8e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row .first { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: 2; }
.session-row .meta { color: var(--text-dim); font-size: 12px; display: flex; gap: 2px 12px; flex-wrap: wrap; grid-column: 2; }
/* The pick box sits in its own leading column, centred on the row. Its label stretches over the
   row's padding and half the column gap, so the whole leading strip is the hit area. */
.session-row .pick-area {
  grid-column: 1; grid-row: 1 / span 3; align-self: stretch; display: flex; align-items: center; cursor: pointer;
  margin: calc(-1 * var(--row-pad-y)) calc(-.5 * var(--row-gap-x)) calc(-1 * var(--row-pad-y)) calc(-1 * var(--row-pad-x));
  padding: 0 calc(.5 * var(--row-gap-x)) 0 var(--row-pad-x);
}
.session-row .pick { margin: 0; accent-color: var(--accent); cursor: pointer; }
.session-row .title { grid-column: 2; }
.session-row .meta .stat b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.session-row .meta .model { color: var(--text-faint); }
.session-row .side { grid-column: 3; grid-row: 1 / span 3; text-align: right; color: var(--text-dim); font-size: 12px; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.session-row .title { display: flex; align-items: center; gap: 8px; }
.session-row .title .title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Harness chip: a quiet monospaced label naming the tool that wrote the session. */
.harness {
  flex: none; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 3px;
  font: 10px/16px var(--mono); letter-spacing: .04em; color: var(--text-dim); white-space: nowrap;
}
#topbar .harness { line-height: 15px; }
.badge-live {
  display: none; align-items: center; gap: 5px; flex: none;
  padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  background: #03140a; color: #34d17a; border: 1px solid #1f5a34;
}
.badge-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #34d17a; animation: pulse-green 1.6s ease-in-out infinite; }
.session-row.live .badge-live { display: inline-flex; }
.session-row.live { border-left-color: var(--ok); }
.session-row.picked { background: #04090f; border-left-color: var(--accent); }
.session-row.picked:hover, .session-row.picked:focus-visible { background: #071019; }
@keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 209, 122, .45); } 50% { box-shadow: 0 0 0 4px rgba(52, 209, 122, 0); } }
.landing-foot { display: flex; justify-content: center; padding: 16px 0 32px; }
/* While a session loads, everything on the landing page is inert and faded except the chosen row. */
#landing.loading .landing-actions, #landing.loading .landing-tools, #landing.loading .landing-foot,
#landing.loading .session-row { opacity: .35; pointer-events: none; }
#landing.loading .session-row.chosen { opacity: 1; border-color: var(--accent); position: relative; overflow: hidden; }
/* A thin sweeping bar along the top edge of the chosen row marks the load, without moving anything. */
#landing.loading .session-row.chosen::after {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 40%;
  background: var(--accent); animation: sweep 1.1s ease-in-out infinite;
}
@keyframes sweep { 0% { left: -40%; } 100% { left: 100%; } }
#landing.loading { cursor: progress; }

/* ---------- viewer frame ---------- */
#viewer { height: 100%; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) min(var(--timeline-h), var(--timeline-cap, 260px)) auto; }
#topbar {
  display: flex; align-items: center; gap: 12px; padding: 6px 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
#topbar .stat { color: var(--text-dim); white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; }
#topbar .stat b { color: var(--text); font-weight: 600; }
#session-id { color: var(--text-dim); font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#live-btn { border-color: var(--line-strong); color: var(--text-dim); }
#live-btn.on { color: #34d17a; border-color: #1f5a34; background: #03140a; animation: pulse-green 1.6s ease-in-out infinite; }
#live-btn.on.behind { color: var(--text); border-color: var(--line-strong); background: transparent; animation: none; }
#live-btn.reconnecting { color: var(--warn); border-color: #6b4a10; background: #140e02; animation: none; }

#grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(360px, 1fr) minmax(360px, 1fr);
  min-height: 0;
}
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--line); position: relative; }
.panel:last-child { border-right: 0; }
.panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 6px 12px; border-bottom: 1px solid var(--line); min-height: 36px; background: var(--bg-raised); }
.panel-head button { font-size: 11px; padding: 2px 6px; }
#jump-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-body { flex: 1; overflow: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #3b3b3b #000; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-left: auto; }
.filters label { display: flex; gap: 4px; align-items: center; cursor: pointer; }
.filters input { margin: 0; accent-color: var(--accent); }

/* ---------- agent map ---------- */
#map { position: relative; padding: 12px; }
#map-svg { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
#map-boxes { position: relative; }
.agent-box {
  position: absolute;
  width: var(--box-w);
  height: var(--box-h);
  padding: 6px 8px 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--agent-color);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.agent-box:hover { background: var(--bg-hover); }
/* Several sessions: a small heading names each session's tree. */
.map-session {
  position: absolute; left: 0; height: 22px; padding: 4px 0 0 2px;
  font: 10px var(--mono); letter-spacing: .06em; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid var(--line);
}
.agent-box.focused { border-color: var(--agent-color); box-shadow: 0 0 0 1px var(--agent-color) inset; }
.agent-box .label { display: flex; gap: 6px; align-items: center; font-weight: 600; color: #e6e6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-box .label span { overflow: hidden; text-overflow: ellipsis; }
.agent-box .sub { color: var(--text-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-box .counts { color: var(--text-faint); font-size: 11px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-box .counts b { color: var(--text-dim); font-weight: 500; }
.agent-box .label .status { flex: none; margin-left: auto; font: 9px var(--mono); color: var(--text-dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #2a2a2a; }
.agent-box.not-started { border-left-color: color-mix(in srgb, var(--agent-color) 45%, #000); }
.agent-box.not-started .label { color: var(--text-dim); }
.agent-box.not-started .dot { background: transparent; border: 1px solid var(--text-faint); }
.agent-box.running .dot { background: var(--warn); }
.agent-box.current .dot { background: var(--ok); animation: blink 1s steps(2, start) infinite; }
.agent-box.current { border-top-color: #52665a; border-bottom-color: #52665a; }
.agent-box.finished .dot { background: #1f3d2b; border-radius: 1px; }
@keyframes blink { to { visibility: hidden; } }

.map-link { fill: none; stroke: #404040; stroke-width: 1; transition: stroke .15s; }
.map-link.peer { stroke: #333; stroke-dasharray: 4 4; }
.map-link.active { stroke: var(--link-color, var(--accent)); stroke-width: 2; }
.map-link-count { font: 10px var(--mono); fill: var(--text-faint); }
.map-link-count.active { fill: var(--text); }
.map-link-count-bg { fill: var(--bg); }
.map-dot { fill: var(--link-color, var(--accent)); }

/* ---------- conversation ---------- */
#feed { padding: 8px 8px 0; display: flex; flex-direction: column; gap: 2px; scroll-behavior: auto; scroll-padding: 8px; }
/* Room below the last card equals the scroll padding (gap 2 + 6), so the last card and a
   card scrolled into view sit at the same distance from the edge. */
#feed::after { content: ''; flex: none; height: var(--feed-tail, 6px); }
.card {
  flex: none;
  background: var(--bg);
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  border-left: 2px solid var(--agent-color);
  border-radius: 0;
  padding: 7px 10px;
  cursor: pointer;
  overflow: hidden;
}
.card:hover { background: var(--bg-hover); }
.card.current { outline: 1px solid var(--accent); outline-offset: -1px; background: #071019; }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.card.future { display: none; }
.card.ahead { opacity: .45; }
.card.ahead:hover { opacity: .8; }
.card .top { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; }
.card .top .who { color: var(--agent-color); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.card .top .who .arrow { color: var(--text-faint); margin: 0 4px; }
.card .top .session { order: -1; flex: none; font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.card .top .time { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.card .top .time { flex: none; font-variant-numeric: tabular-nums; }
.card .kind { display: flex; gap: 8px; align-items: baseline; font-size: 12px; overflow: hidden; }
.card .kind .type { color: var(--type-color); font-weight: 600; text-transform: lowercase; flex: none; }
.card .kind .title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .preview {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.card.error .preview, .card.error .kind .title { color: #ff8a94; }
.card[data-type="thinking"] .preview { font-style: italic; }

#feed.hide-thinking .card[data-type="thinking"],
#feed.hide-tools .card[data-type="tool"],
#feed.hide-system .card[data-type="system"],
#feed.hide-deliveries:not(.focused) .card[data-delivery="1"] { display: none; }

.panel-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 10px; border-top: 1px solid var(--line); }
.panel-foot button { min-width: 32px; padding: 3px 8px; color: var(--text-dim); }
.panel-foot button:hover { color: var(--text); }
#feed-bar { display: none; }

/* ---------- context usage popup ---------- */
#context-btn { margin-left: auto; }
#context-dialog {
  width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
#context-dialog[open] { display: flex; flex-direction: column; }
#context-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.dialog-head { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.dialog-head .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#context-close { margin-left: auto; padding: 2px 8px; }
#context-chart { position: relative; height: clamp(200px, 42dvh, 360px); flex: none; }
#context-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
#context-tip {
  position: absolute; top: 8px; z-index: 1; min-width: 180px; max-width: 320px; padding: 6px 8px; pointer-events: none;
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 12px;
}
#context-tip .tip-head { color: var(--text-dim); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ctx-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ctx-row .val, #context-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.ctx-row.done { color: var(--text-faint); }
#context-tip .tip-note { color: var(--warn); margin-bottom: 4px; white-space: normal; }
.ctx-row.total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; color: var(--text); }
.ctx-chip { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--chip); }
#context-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#context-table th { position: sticky; top: 0; font-weight: 400; color: var(--text-faint); text-align: left; padding: 4px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
#context-table th:not(:first-child) { text-align: right; }
#context-table td { padding: 3px 12px; border-bottom: 1px solid var(--line); }
#context-table td.agent { display: flex; align-items: center; gap: 6px; }
#context-table tr.zero td { color: var(--text-faint); }
#context-table-wrap { overflow: auto; min-height: 0; }
#feed-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--bg-raised); color: var(--text); font-size: 12px; white-space: nowrap; pointer-events: none;
}
#feed-hint[hidden] { display: none; }
@media (max-width: 1100px) { #feed-hint { bottom: 46px; } }

/* ---------- details ---------- */
#details { padding: 10px 12px; }
.summary { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: 12px; margin-bottom: 10px; }
.summary dt { color: var(--text-dim); }
.summary dd { margin: 0; overflow-wrap: anywhere; }
.summary dd.agent { color: var(--agent-color); font-weight: 600; }
.summary .error { color: var(--danger); }
details.section { border: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); margin-bottom: 10px; background: var(--bg); }
details.section > summary {
  cursor: pointer; padding: 6px 8px; font: 11px var(--mono); color: var(--text);
  text-transform: uppercase; letter-spacing: .05em; user-select: none; overflow-wrap: anywhere;
}
details.section > summary:hover { color: var(--text); }
details.section.error > summary { color: #ff8a94; }
details.section[open] > summary { margin-bottom: 8px; background: var(--bg-raised); border-bottom: 1px solid var(--line); }
details.section .body { padding: 0 8px 8px; }
pre.code {
  margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; color: #cfcfcf;
}
pre.code.numbered { display: grid; grid-template-columns: max-content 1fr; gap: 0 12px; white-space: pre; overflow-x: auto; }
pre.code.numbered .linenos { color: var(--text-faint); text-align: right; user-select: none; }
pre.code.numbered .lines { white-space: pre; }
pre.code.removed { background: #170507; color: #ff9aa3; border-left: 3px solid #5a1f26; padding-left: 8px; }
pre.code.added { background: #04170c; color: #8fe3b0; border-left: 3px solid #1f5a34; padding-left: 8px; margin-top: 6px; }
.diff-head { font-size: 11px; color: var(--text-dim); margin: 6px 0 2px; }

/* highlight tokens */
.hl-kw { color: #c77dff; }
.hl-st { color: #9fd38b; }
.hl-cm { color: #89939e; font-style: italic; }
.hl-num { color: #ffb86c; }
.hl-lit { color: #ff9f43; }
.hl-fn { color: #7cc4ff; }
.hl-attr { color: #74d6e2; }
.hl-var { color: #ffd166; }
.hl-op { color: #8a8a8a; }
.hl-meta { color: #8a8a8a; }
.hl-add { color: #8fe3b0; background: #04170c; display: inline-block; width: 100%; }
.hl-del { color: #ff9aa3; background: #170507; display: inline-block; width: 100%; }
.hl-h { color: #ffd166; font-weight: 700; }
.hl-b { font-weight: 700; color: #e8e8e8; }
.hl-i { font-style: italic; }
.hl-code { color: #9fd38b; background: #111; border-radius: 3px; }
.hl-codeblock { color: #bfbfbf; }
.hl-fence { color: #555; }
.hl-link { color: #7cc4ff; text-decoration: underline; text-decoration-color: #2a4a66; }
.hl-tag { color: #5f6b7a; }
.hl-bullet { color: #ffb86c; }
.hl-quote { color: #8a8a8a; font-style: italic; }

/* ---------- timeline ---------- */
#timeline-panel { border-top: 1px solid var(--line); background: var(--bg); min-height: 0; overflow: auto; scrollbar-width: thin; }
#timeline-track { position: relative; min-width: 100%; }
#timeline { display: block; position: sticky; left: 0; cursor: pointer; touch-action: pan-y; user-select: none; }
#timeline.dragging { cursor: grabbing; }

/* ---------- controls ---------- */
#controls {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px;
  border-top: 1px solid var(--line);
}
#controls button { min-width: 34px; }
#controls .step-group { display: inline-flex; gap: 4px; }
#scrubber { flex: 1; min-width: 40px; accent-color: var(--accent); margin: 0 4px; }
#position { color: var(--text-dim); font-size: 12px; min-width: 90px; text-align: center; }
#controls label { display: flex; gap: 6px; align-items: center; font-size: 12px; }
#details-toggle, #details-close, #clear-focus-btn, #context-btn-narrow { display: none; }

#drop-hint {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .8); border: 2px dashed var(--accent); color: var(--accent);
  font-size: 20px; z-index: 10; pointer-events: none;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #live-btn.on, .badge-live::before, .agent-box.current .dot { animation: none; }
  #landing.loading .session-row.chosen::after, #landing.refreshing .list-heading::after { animation: none; background-size: 100% 100%; }
  .agent-box.current .dot { box-shadow: 0 0 0 2px rgba(52, 209, 122, .4); }
  * { transition: none !important; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) {
  #grid { grid-template-columns: minmax(220px, 280px) 1fr; }
  #details-panel { display: none; }
  #details-toggle, #details-close { display: inline-block; }
  #feed-bar { display: flex; }
  #grid.show-details #feed-panel { display: none; }
  #grid.show-details #details-panel { display: flex; }
}
@media (max-width: 760px) {
  :root { --timeline-cap: clamp(90px, 20dvh, 140px); }
  #grid { grid-template-columns: 1fr; }
  #map-panel { display: none; }
  #clear-focus-btn, #context-btn-narrow { display: inline-block; }
  #topbar { gap: 6px 12px; padding: 6px 8px; }
  #session-id { flex: 1 1 calc(100% - 110px); }
  #controls { flex-wrap: wrap; gap: 6px 8px; padding: 6px 8px; }
  #scrubber { flex-basis: calc(100% - 150px); }
  #position { min-width: 0; margin-right: auto; }
  #controls label { gap: 4px; }
  #controls select { padding: 4px; max-width: 148px; }
  .filters { gap: 8px; }
  #landing { padding: 16px; }
  .session-row { --row-pad-x: 8px; --row-gap-x: 8px; }
  .pick-bar { padding: 6px 8px; }
}
@media (max-height: 540px) {
  :root { --timeline-cap: 80px; }
}