:root {
  --bg: #0f1115; --panel: #171a21; --panel-2: #1e222b; --line: #2a2f3a; --fg: #e8eaed; --muted: #9aa3ae;
  --accent: #5fb3ff; --accent-strong: #1f6fd1; --bad-strong: #c13030; --ok: #4cc38a; --bad: #ef6b6b; --warn: #e8b04b; --ghost: #9be7ff;
  --m-astra: #19c37d; --m-opus: #e08a63; --m-argon: #7aa2ff;            /* model colours: OpenAI green, Claude clay, Gemini blue */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f7f9; --panel: #ffffff; --panel-2: #f0f2f5; --line: #dde1e7; --fg: #15181d; --muted: #5d6673;
    --accent: #1f6fd1; --ok: #1d9a5f; --bad: #d14343; --warn: #b07a12; --ghost: #0a8db5;
    --m-astra: #0e8a5f; --m-opus: #c15f3c; --m-argon: #3b6fe0;
  }
}
* { box-sizing: border-box; }
[data-m="gpt-6-astra"] { --mc: var(--m-astra); }
[data-m="claude-opus-5-5"] { --mc: var(--m-opus); }
[data-m="gemini-4-argon"] { --mc: var(--m-argon); }
.mname { color: var(--mc, inherit); font-weight: 600; white-space: nowrap; }
.mname::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mc, var(--muted));
                 margin-right: 5px; vertical-align: 1px; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 var(--sans); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, textarea, input { font: inherit; color: inherit; }
button {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; font-weight: 600; }
button.danger { background: var(--bad-strong); border-color: var(--bad-strong); color: #fff; font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }

header.top {
  display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--line);
  background: var(--panel); position: sticky; top: 0; z-index: 5;
}
header.top .brand { font-weight: 700; letter-spacing: .2px; color: var(--fg); }
header.top .brand span { color: var(--muted); font-weight: 400; }
/* hover labels, as in Cursor: <button data-tip="New chat"> */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); white-space: nowrap; position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
  font: 12px var(--sans); box-shadow: 0 4px 14px rgba(0,0,0,.3); pointer-events: none; }
header.top .spacer { flex: 1; }

.pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line);
  color: var(--muted); white-space: nowrap;
}
.thinking { margin: 4px 0; font-size: 12px; }
.thinking > summary { color: var(--muted); cursor: pointer; }
.turn.live .thinking > summary::after { content: "…"; }
.thinking .tbody { white-space: pre-wrap; color: var(--muted); max-height: 220px; overflow-y: auto; margin-top: 4px;
                   border-left: 2px solid var(--line); padding-left: 8px; }
.check { margin-top: 6px; font-size: 12px; border-left: 2px solid var(--line); padding-left: 8px; }
.check .ch { color: var(--muted); }
.check .ch b.ok { color: var(--ok); }
.check .cond { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.check .cond .mk { width: 12px; font-weight: 700; }
.check .cond.ok .mk { color: var(--ok); }
.check .cond.no .mk { color: var(--bad); }
.check .cond .muted { font-family: var(--mono); font-size: 11px; }
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12px; }
pre { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; margin: 0; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; opacity: 0; transition: opacity .2s;
  pointer-events: none; z-index: 20;
}
.toast.show { opacity: 1; }

/* the trace: one card per model turn, shared by the replay viewer and the live chat */
.turn {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 10px 12px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.turn + .turn { margin-top: 8px; }
.turn.user-turn { cursor: default; border-style: dashed; }
.turn.current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.turn .head { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.turn .head .n { font-weight: 700; color: var(--fg); }
.turn .narr { margin-top: 4px; }
.turn details { margin-top: 6px; }
.turn details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.turn .shown { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.turn .shown img { width: 96px; height: 96px; border-radius: 4px; border: 1px solid var(--line); image-rendering: auto; }
.turn .shown .t { width: 100%; font-family: var(--mono); font-size: 11px; color: var(--muted); }