/* 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-fail .msg-body {
  font-size: 11px;
  color: var(--text-dim);
}
.msg-result-pass .msg-body { color: var(--pass); }
.msg-result-fail .msg-body { color: var(--fail); }

/* Tool call timeline item. */
.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 .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; }
.history-table .scenario-id, .history-table .duration {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}