/* chipforge playground — brand-aligned dark theme.
   Palette lifted from the eval-dashboard (chip-forge-evaluations/
   dashboard-static/index.html) so the playground and the dashboard
   feel like one product surface. */

:root {
  --bg: #030d1c;            /* deep navy background */
  --bg-soft: #061730;       /* sidebar / chat surface */
  --bg-elev: #0b2244;       /* raised cards (composer, bubbles) */
  --bg-chat: #030d1c;       /* main chat backdrop */

  --border: #193a64;
  --border-strong: #234d7a;
  --border-soft: #102c58;

  --text: #c8daf0;
  --text-dim: #6a8db5;
  --text-faint: #384f6a;

  --primary: #62cde6;            /* chipforge cyan */
  --primary-hover: #4cbdd8;
  --primary-soft: #0a2a3a;
  --primary-tint: #082535;

  --accent: #62cde6;             /* same cyan; single-accent brand */
  --pass: #3ecf8e;
  --pass-soft: #082a1a;
  --fail: #f05b5b;
  --fail-soft: #3a0f0f;
  --warn: #f0b830;
  --warn-soft: #3a2800;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 1px rgba(0,0,0,0.20);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.35);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --topbar-h: 48px;
  --sidebar-w: 240px;
  --side-pane-w: 380px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-soft);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

code, pre, .mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dim { color: var(--text-faint); }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

/* ── Topbar ───────────────────────────────────────────────────────── */

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo {
  height: 24px;
  width: auto;
}
.brand-subtitle {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.conn-status {
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  color: var(--text-faint);
}
.conn-status::before {
  content: "●";
  margin-right: 5px;
  color: var(--text-faint);
}
.conn-status.connected { color: var(--text-dim); }
.conn-status.connected::before { color: var(--pass); }

/* ── 3-column shell ───────────────────────────────────────────────── */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--side-pane-w);
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}

/* ── Sessions sidebar (left) ──────────────────────────────────────── */

.sessions-sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 8px;
  overflow: hidden;
}

.new-chat-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  transition: background 0.1s, border-color 0.1s;
}
.new-chat-btn:hover {
  background: var(--primary-tint);
  border-color: var(--primary);
}
.new-chat-btn .plus {
  font-size: 16px;
  color: var(--primary);
  font-weight: 400;
  line-height: 1;
}

.sessions-nav {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.sessions-empty {
  color: var(--text-faint);
  font-size: 12px;
  padding: 20px 12px;
  text-align: center;
  line-height: 1.5;
}

.session-group { display: flex; flex-direction: column; gap: 2px; }
.session-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 600;
  padding: 6px 12px 4px;
}
.session-item {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: var(--radius-md);
}
.session-item:hover { background: var(--bg-soft); }
.session-item.active { background: var(--primary-tint); }
.session-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  padding: 7px 10px 7px 12px;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius-md);
}
.session-item.active .session-open { color: var(--primary); font-weight: 500; }
.session-open .session-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-open .session-meta {
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.session-item.active .session-open .session-meta { color: var(--primary); opacity: 0.7; }

/* Hover-reveal × button. Stays in flow (no absolute position) so the
   open-button width naturally shrinks to make room. */
.session-delete {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  border-radius: var(--radius-sm);
  margin: 3px 4px 3px 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.session-item:hover .session-delete,
.session-item.active .session-delete { opacity: 1; }
.session-delete:hover { color: var(--fail); background: var(--fail-soft); }

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}

.ghost-btn {
  text-align: left;
  padding: 6px 12px;
  color: var(--text-dim);
  font-size: 12px;
  border-radius: var(--radius-md);
  transition: background 0.1s, color 0.1s;
}
.ghost-btn:hover { background: var(--bg-soft); color: var(--text); }

/* ── Chat pane (center) ───────────────────────────────────────────── */

.chat-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-chat);
  overflow: hidden;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}

/* ── Flat timeline (Claude-Code-inspired) ─────────────────────────── */

.msg {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  word-wrap: break-word;
  position: relative;
}
/* Connecting line — vertical stripe running through the marker column.
   Drawn behind the marker (which has its own background) so the line
   appears to pause at each event. Skipped on user rows (which use a
   right-aligned bubble, no marker), so the line resumes after the
   user message — that gap is intentional and reads as a turn break. */
.msg:not(.msg-user)::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  bottom: -12px;
  width: 1px;
  background: var(--border-soft);
  z-index: 0;
}
.msg:not(.msg-user):last-child::before { bottom: 0; }

/* Secondary records (event / result / approval-record): no dot. The line
   keeps passing through them when a real event follows; when they trail
   the timeline, the line stops at the preceding real event so there's no
   dangling stub. "Real event" = non-user, non-record. */
.msg.is-record .msg-marker { visibility: hidden; }
.msg.is-record:not(:has(~ .msg:not(.is-record):not(.msg-user)))::before {
  content: none;
}
.msg:not(.is-record):not(.msg-user):not(:has(~ .msg:not(.is-record):not(.msg-user)))::before {
  bottom: auto;
  height: 5px;  /* matches marker padding-top — line ends right at the dot */
}

/* First real event in the timeline: line starts AT the dot (no stub
   above) so it doesn't appear to come from nowhere. */
.msg:nth-child(1 of .msg:not(.is-record):not(.msg-user))::before {
  top: 5px;
}

/* Per-run line caps. Each run is self-contained: the first event of a
   run has no stub above its dot, the last event has no extension below.
   data-run-start / data-run-end are stamped by JS on append. */
.msg[data-run-start]::before { top: 5px; }
.msg[data-run-end]::before { bottom: auto; height: 5px; }

/* "Thinking…" placeholder shown immediately after a user message.
   Pulsing marker + dim italic body; cleared on the first real event. */
.msg.thinking .msg-body {
  color: var(--text-dim);
  font-style: italic;
}
.msg.thinking .msg-marker {
  color: var(--text-dim);
  animation: pulse 1.4s ease-in-out infinite;
}
.msg-marker {
  color: var(--primary);
  font-size: 14px;
  line-height: 1;
  padding-top: 5px;
  user-select: none;
  text-align: center;
  position: relative;
  z-index: 1;
  background: var(--bg-chat);
  /* Mask only the dot glyph area, not the padding-top. This exposes a
     small line stub above each dot so the connection-from-above reads,
     and lets the "last real event" rule below cap the line cleanly. */
  background-clip: content-box;
}
.msg-marker.dim { color: var(--text-faint); }
.msg-body { min-width: 0; position: relative; z-index: 1; }

/* Delegated subagent events: indented under the delegate row with a left
   rule + cyan accent so they read as "the subagent is doing this", not the
   coordinator. The harness server merges the child run's stream in here. */
.msg.subagent {
  margin-left: 24px;
  border-left: 2px solid var(--border-strong);
  padding-left: 12px;
}
.msg.subagent .msg-marker { color: var(--primary); background: transparent; }
.msg.subagent-head .msg-body { color: var(--primary); font-style: italic; }

/* User → right-aligned bubble (special case; the human is "to" the agent). */
.msg-user {
  display: flex;
  justify-content: flex-end;
}
.msg-user .msg-bubble {
  background: var(--primary-soft);
  border: 1px solid var(--primary);
  border-radius: var(--radius-xl);
  border-bottom-right-radius: 4px;
  padding: 10px 14px;
  max-width: 78%;
  word-wrap: break-word;
}

/* Assistant → plain text with marker; no border, no bubble. */
.msg-assistant .msg-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.msg-assistant .msg-body.streaming-text::after {
  content: "▍";
  color: var(--primary);
  animation: blink 1s steps(1) infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* Event / result rows — small, dim, inline. */
.msg-event .msg-body,
.msg-result-pass .msg-body,
.msg-result-warn .msg-body,
.msg-result-fail .msg-body {
  font-size: 11px;
  color: var(--text-dim);
}
.msg-result-pass .msg-body { color: var(--pass); }
.msg-result-warn .msg-body { color: var(--warn); }
.msg-result-fail .msg-body { color: var(--fail); }

/* Tool call timeline item. Each tool call renders as a small card so it
   reads as its own unit — same visual language as the subagent group:
   left border accent, light gradient background, status-coloured. */
.msg-tool .msg-marker { color: var(--text-dim); }
.msg-tool[data-status="running"] .msg-marker { color: var(--primary); animation: pulse 1.4s ease-in-out infinite; }
.msg-tool[data-status="done"] .msg-marker { color: var(--pass); }
.msg-tool[data-status="failed"] .msg-marker { color: var(--fail); }
@keyframes pulse { 50% { opacity: 0.35; } }

.msg-tool .msg-body {
  border-left: 2px solid var(--text-faint);
  border-radius: 0 6px 6px 0;
  background: linear-gradient(to right, var(--bg-soft), transparent 70%);
  padding: 6px 10px;
  transition: border-left-color 0.18s, background 0.18s;
}
.msg-tool[data-status="running"] .msg-body {
  border-left-color: var(--primary);
  background: linear-gradient(to right, var(--primary-tint), transparent 70%);
}
.msg-tool[data-status="done"] .msg-body {
  border-left-color: var(--pass);
  background: linear-gradient(to right, var(--pass-soft, rgba(110,197,110,0.08)), transparent 70%);
}
.msg-tool[data-status="failed"] .msg-body {
  border-left-color: var(--fail);
  background: linear-gradient(to right, var(--fail-soft, rgba(217,122,122,0.08)), transparent 70%);
}

/* Nested tool calls inside a subagent block — drop the per-card background
   so the subagent group's own gradient stays the dominant visual. Keep
   the status-coloured left border so individual tool status still reads. */
.subagent-body .msg-tool .msg-body {
  background: transparent;
}

.msg-tool .tool-head {
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.msg-tool .tool-name { font-weight: 600; color: var(--text); }
.msg-tool .tool-paren { color: var(--text-dim); }
.msg-tool .tool-arg { color: var(--primary); font-size: 12px; }
.msg-tool .tool-status-pill {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 4px;
}
.msg-tool[data-status="running"] .tool-status-pill { background: var(--primary-tint); color: var(--primary); }
.msg-tool[data-status="done"] .tool-status-pill { background: var(--pass-soft); color: var(--pass); }
.msg-tool[data-status="failed"] .tool-status-pill { background: var(--fail-soft); color: var(--fail); }

.tool-preview {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.tool-preview .bullet {
  color: var(--text-faint);
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1.4;
}
.tool-preview .preview-body { min-width: 0; flex: 1; }
.tool-preview .preview-body.err { color: var(--fail); font-size: 12px; }
.preview-line { font-size: 12px; line-height: 1.5; }
.preview-line.dim { color: var(--text-dim); }

.preview-code {
  margin: 4px 0 0;
  padding: 8px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  line-height: 1.45;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
/* Diff block: tint the line background and color only the leading sign;
   the file content keeps the editor's normal foreground colour. */
.diff-block { padding: 0; }
.diff-line {
  display: block;
  padding: 1px 8px 1px 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}
.diff-line .diff-sign {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-weight: 700;
  user-select: none;
}
/* Claude Code diff palette — vibrant tailwind green/red, strong
   background tint so the changes are unmissable against the dark
   navy backdrop. Left bar pops the sign even more. */
.diff-add {
  background: rgba(34, 197, 94, 0.36);
  box-shadow: inset 3px 0 0 #22c55e;
}
.diff-del {
  background: rgba(239, 68, 68, 0.36);
  box-shadow: inset 3px 0 0 #ef4444;
}
.diff-add .diff-sign { color: #4ade80; font-weight: 800; }
.diff-del .diff-sign { color: #f87171; font-weight: 800; }
.diff-sep { height: 1px; background: var(--border-soft); margin: 6px 0; }

/* "show raw" expander for full args/output. */
.tool-details {
  margin-top: 6px;
  font-size: 11px;
}
.tool-details > summary {
  cursor: pointer;
  color: var(--text-faint);
  user-select: none;
  list-style: none;
  width: max-content;
}
.tool-details > summary::-webkit-details-marker { display: none; }
.tool-details > summary:hover { color: var(--text-dim); }
.tool-details[open] > summary { color: var(--text-dim); }
.tool-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  margin-top: 6px;
}
.tool-args, .tool-output {
  margin: 4px 0 0;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
}

/* Post-decision timeline record (slim, dim) — left in the chat after
   the popup closes so the conversation keeps an audit trail. */
.msg-approval-record .msg-body {
  font-size: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.approval-record-verb { font-weight: 600; }
.approval-record-verb.ok { color: var(--pass); }
.approval-record-verb.no { color: var(--fail); }
.approval-record-tool { color: var(--text-dim); }

/* Markdown rules apply to any .md container (used by assistant body
   and the user bubble). */
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }
.md p { margin: 6px 0; line-height: 1.55; }
.md strong { font-weight: 600; }
.md em { font-style: italic; }
.md code {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
.md pre {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  overflow-x: auto;
  margin: 8px 0;
}
.md pre code { background: transparent; border: none; padding: 0; font-size: 12px; }
.md ul, .md ol { margin: 6px 0; padding-left: 22px; }
.md li { margin: 2px 0; line-height: 1.55; }
.md blockquote {
  border-left: 3px solid var(--border-strong);
  margin: 8px 0; padding: 2px 12px; color: var(--text-dim);
}
.md a { color: var(--accent); }
.md h1, .md h2, .md h3, .md h4 {
  margin: 10px 0 6px; font-weight: 600; line-height: 1.3;
}
.md table { border-collapse: collapse; margin: 8px 0; }
.md th, .md td { border: 1px solid var(--border); padding: 4px 8px; }

/* ── Approval popup (Claude-Code-style permission prompt) ─────────── */

/* Popup is a transparent carrier anchored just above the composer.
   The visible card lives inside it (.approval-popup-inner) and is
   65% wide — the 35% beside it stays fully transparent so the chat
   content underneath is still visible. */
.approval-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.18s ease-out,
    transform 0.22s cubic-bezier(.2,.7,.2,1);
}
.approval-popup.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.approval-popup-inner {
  width: 65%;
  min-width: 420px;
  max-width: 680px;
  margin: 0 0 14px;
  padding: 14px 18px 12px;
  background: #0d1825;
  border: 1px solid rgba(98, 205, 230, 0.18);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  max-height: 55vh;
  overflow-y: auto;
}

.approval-headline {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.approval-reason {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.approval-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.approval-option,
.approval-feedback {
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  width: 100%;
}
.approval-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.approval-option:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-tint);
}
.approval-option:disabled,
.approval-feedback:disabled { opacity: 0.5; cursor: not-allowed; }
.approval-option .num {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  width: 10px;
  flex-shrink: 0;
}
.approval-feedback::placeholder { color: var(--text-faint); }
.approval-feedback:focus { outline: none; border-color: var(--primary); }

.approval-hint {
  font-size: 11px;
  margin-top: 8px;
}
.approval-status {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
}

/* ── Prompt composer ──────────────────────────────────────────────── */

.prompt-composer {
  position: relative;  /* anchor for the approval popup floating above it */
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 12px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}

.prompt-composer textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  resize: vertical;
  min-height: 60px;
  max-height: 240px;
  font-size: 13px;
  line-height: 1.5;
}
.prompt-composer textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

.composer-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.composer-spacer { flex: 1; }

.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  border-radius: var(--radius-md);
  transition: background 0.1s, color 0.1s;
}
.icon-btn:hover:not(:disabled) { background: var(--bg-soft); color: var(--text); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.composer-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  font-weight: 600;
}
.composer-select {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
.composer-select:focus { outline: none; border-color: var(--primary); }

.send-btn {
  background: var(--primary);
  color: var(--bg);
  padding: 7px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.1s;
}
.send-btn:hover:not(:disabled) { background: var(--primary-hover); }
.send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.send-btn .kbd {
  background: rgba(255,255,255,0.2);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

.active-scenario {
  font-size: 11px;
  color: var(--text-faint);
  font-family: "JetBrains Mono", monospace;
  min-height: 14px;
}

/* ── Right pane (workspace + logs) ────────────────────────────────── */

.side-pane {
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-tabs {
  display: flex;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  padding: 6px 8px 0;
  gap: 2px;
}
.side-tab {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.1s, border-color 0.1s;
}
.side-tab:hover { color: var(--text); }
.side-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.side-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.side-content:not(.active) { display: none; }

.workspace-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  padding: 40px 20px;
  text-align: center;
  gap: 8px;
}
.workspace-empty .empty-icon { font-size: 32px; opacity: 0.5; }
.workspace-empty .empty-title { font-weight: 600; color: var(--text-dim); }
.workspace-empty .empty-sub { font-size: 11px; }

.workspace-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ws-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text);
  text-align: left;
}
.ws-file:hover { background: var(--bg-soft); }
.ws-file.active { background: var(--primary-tint); color: var(--primary); }
.ws-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-file-size { font-size: 10px; color: var(--text-faint); flex-shrink: 0; }
.ws-file.active .ws-file-size { color: var(--primary); opacity: 0.7; }

.workspace-preview {
  border-top: 1px solid var(--border);
  max-height: 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ws-preview-header {
  padding: 8px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-soft);
}
.ws-preview-body {
  flex: 1;
  margin: 0;
  padding: 12px;
  overflow: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
}

.log-controls {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.log-controls input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 5px 8px;
  font-size: 11px;
  border-radius: var(--radius-md);
}
.log-controls .ghost-btn { padding: 5px 10px; font-size: 11px; }

.log-stream {
  flex: 1;
  overflow-y: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  padding: 10px 14px;
  line-height: 1.5;
}
.log-line { color: var(--text-dim); margin-bottom: 3px; word-break: break-word; }
.log-line.match { color: var(--text); background: var(--primary-tint); padding: 2px 6px; border-radius: var(--radius-sm); }
.log-line .ts { color: var(--text-faint); margin-right: 6px; }
.log-line .lvl { padding: 0 4px; font-weight: 600; }
.log-line .lvl-info { color: var(--accent); }
.log-line .lvl-warning { color: var(--warn); }
.log-line .lvl-error { color: var(--fail); }
.log-line .event-name { color: var(--primary); font-weight: 600; }

/* ── Modals (templates + history) ─────────────────────────────────── */

.modal { position: fixed; inset: 0; z-index: 100; }
.modal.hidden { display: none; }
.hidden { display: none !important; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,18,32,0.4);
  backdrop-filter: blur(2px);
}
.modal-card {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  margin: 80px auto;
  padding: 20px 24px 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 160px);
}
.modal-card.wide { max-width: 880px; }
/* Sticky header + filters; table scrolls underneath. */
.modal-card > .modal-header,
.modal-card > .history-filters { flex: 0 0 auto; }
.history-scroll {
  flex: 1 1 auto;
  min-height: 0;       /* allow shrink within the flex column */
  overflow-y: auto;
  margin: 0 -24px -24px;   /* bleed scroll to the card edges */
  padding: 0 24px 24px;
}
.history-scroll .history-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.modal-header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-sub {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Scenarios list inside templates modal */
.scenarios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
}
.scenarios li {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--bg);
  transition: border-color 0.1s, background 0.1s;
}
.scenarios li:hover { border-color: var(--primary); background: var(--bg-soft); }
.scenarios li.skipped { opacity: 0.4; cursor: not-allowed; }
.scenarios li .title { font-weight: 600; font-size: 13px; }
.scenarios li .desc { color: var(--text-dim); font-size: 12px; margin-top: 4px; line-height: 1.4; }

/* History table inside history modal */
.history-filters {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.history-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.history-filters select {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 5px 8px;
  font-size: 12px;
  border-radius: var(--radius-md);
}

.history-table { width: 100%; border-collapse: collapse; }
.history-table th, .history-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.history-table th {
  color: var(--text-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.history-table tbody tr { cursor: pointer; }
.history-table tbody tr:hover td { background: var(--bg-soft); }
.history-table .pass { color: var(--pass); font-weight: 600; }
.history-table .fail { color: var(--fail); font-weight: 600; }
/* Sidebar tabs (Chat | Eval Runs) — sit just below the New chat button */
.sidebar-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.sidebar-tab {
  flex: 1;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
}
.sidebar-tab:hover { color: var(--text); }
.sidebar-tab.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Categorised RTL score card — groups per_test results so a 8/15 reads
   as "interface ok, basics ok, edge cases pending" instead of a flat
   PASS/FAIL list. Glyphs are tooltip-tied to the test name. */
.score-card .msg-body {
  border-left: 2px solid var(--text-faint);
  border-radius: 0 6px 6px 0;
  background: linear-gradient(to right, var(--bg-soft), transparent 70%);
  padding: 8px 12px;
}
.msg-result-pass.score-card .msg-body {
  border-left-color: var(--pass);
  background: linear-gradient(to right, var(--pass-soft, rgba(110,197,110,0.08)), transparent 70%);
}
.msg-result-warn.score-card .msg-body {
  border-left-color: var(--warn);
  background: linear-gradient(to right, var(--warn-soft, rgba(240,184,48,0.10)), transparent 70%);
}
.msg-result-fail.score-card .msg-body {
  border-left-color: var(--fail);
  background: linear-gradient(to right, var(--fail-soft, rgba(217,122,122,0.08)), transparent 70%);
}
.score-card .score-header {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
/* Note line under the headline — surfaces sim-abort context so an
   incomplete run reads as "halted early" not "14 failed tests". */
.score-card .score-note {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-style: italic;
}
.msg-result-pass.score-card .score-header { color: var(--pass); }
.msg-result-warn.score-card .score-header { color: var(--warn); }
.msg-result-fail.score-card .score-header { color: var(--fail); }
.score-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.score-group { font-size: 12px; }
.score-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.score-group-label { color: var(--text); font-weight: 500; }
.score-group-tally {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.score-group-ok .score-group-tally { color: var(--pass); }
.score-group-mixed .score-group-tally { color: var(--fail); }
.score-group-glyphs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 4px;
}
.score-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  cursor: help;
}
.score-glyph.ok { background: var(--pass-soft, rgba(110,197,110,0.12)); color: var(--pass); }
.score-glyph.ko { background: var(--fail-soft, rgba(217,122,122,0.12)); color: var(--fail); }
.score-glyph.un {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-faint);
}
.score-group-unrun .score-group-label { color: var(--text-dim); font-style: italic; }
.score-group-unrun .score-group-tally { color: var(--text-faint); }

/* Collapsible subagent block — all of a delegated child's events (text,
   tool cards, terminal markers) render inside details/summary so the user
   can fold the noise. Auto-collapses on subagent.completed/failed. */
.subagent-group {
  border-left: 2px solid var(--primary);
  border-radius: 0 6px 6px 0;
  margin: 6px 0 6px 14px;
  padding: 2px 0;
  background: linear-gradient(to right, var(--primary-tint), transparent 60%);
}
.subagent-group[open] { padding-bottom: 6px; }
.subagent-group.subagent-failed { border-left-color: var(--fail, #d97a7a); }
.subagent-group.subagent-failed .subagent-status { color: var(--fail, #d97a7a); }
.subagent-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-dim);
  user-select: none;
}
.subagent-summary::-webkit-details-marker { display: none; }
.subagent-summary:hover { color: var(--text); }
.subagent-chevron {
  display: inline-block;
  font-size: 10px;
  color: var(--primary);
  transition: transform 0.12s;
}
.subagent-group:not([open]) .subagent-chevron { transform: rotate(-90deg); }
.subagent-label { font-weight: 500; color: var(--primary); }
.subagent-status {
  margin-left: auto;
  font-style: italic;
  font-size: 11px;
  color: var(--text-faint);
}
.subagent-group.subagent-ok .subagent-status { color: var(--pass, #6ec56e); }
.subagent-body {
  padding: 4px 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Nested msg rows inside the subagent body shouldn't draw their own
   left timeline rail — the group's border-left is the visual cue. */
.subagent-body .msg { margin-left: 0; }

/* Evals pane: same vertical-stack flex container as .sessions-nav, but
   carries the action button and "all runs" link on top. Run rows go in
   the inner #evalRunsList. */
.evals-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.evals-pane.hidden { display: none; }
.evals-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 4px 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 600;
}
.ghost-link {
  background: transparent;
  border: 0;
  color: var(--primary);
  font: inherit;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  padding: 0;
  cursor: pointer;
}
.ghost-link:hover { text-decoration: underline; }
.evals-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Primary action button — sits just below the sidebar tabs. Matches the
   visual weight of "+ New chat" so the entry point to internal evals
   isn't buried in a footer. */
.run-eval-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s;
}
.run-eval-btn:hover {
  background: var(--primary-tint);
  border-color: var(--primary);
}
.run-eval-btn .run-eval-icon {
  font-size: 14px;
  color: var(--primary);
  line-height: 1;
}

/* Eval-run rows reuse .session-item geometry; the meta line shows
   pass/fail glyph + wall-clock instead of "N runs". */
.eval-row .session-meta { font-family: "JetBrains Mono", monospace; }
.eval-row-running .session-meta {
  color: var(--primary);
  font-style: italic;
}
.eval-row-running .session-delete { cursor: not-allowed; opacity: 0.3 !important; }

/* Internal eval picker — cleaner card grid (vs the bare-list default) */
.scenarios.eval-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-height: 65vh;
}
.scenarios.eval-cards li {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.scenarios.eval-cards li:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  background: var(--bg);
}
.scenarios.eval-cards li .title {
  font-size: 14px;
  letter-spacing: -0.01em;
}
.scenarios.eval-cards li .desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
}

.history-table .scenario-id, .history-table .duration {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}