/* Dungeon Agents — Pokemon GBA Cave Theme (Ruby/Sapphire/Emerald inspired)
   Press Start 2P font for headers, monospace for data.
   Dark cave palette: deep purples, stone blues, amber glow. */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    image-rendering: pixelated;
}

:root {
    --bg:             #140e06;   /* deep cave earth */
    --surface:        #2a1e0e;   /* dark stone surface */
    --surface2:       #3a2a14;   /* raised stone */
    --border:         #6b4c24;   /* warm brown border */
    --border-bright:  #c8872c;   /* amber torchlight */
    --text:           #f8e8c0;   /* warm parchment */
    --text-muted:     #a08858;   /* aged stone text */
    --agent-a:        #3888f8;   /* blue trainer */
    --agent-b:        #e05030;   /* red rival */
    --divergence:     #e83028;   /* alarm red */
    --warn:           #f0b830;   /* amber torch */
    --success:        #48c870;   /* cave moss green */
    --info:           #8898c0;   /* muted slate */
    --key-gold:       #f0c820;   /* treasure gold */
    --pokemon-font:   'Press Start 2P', monospace;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.6;
    /* Subtle cave torch glow */
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(200, 135, 44, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(200, 100, 30, 0.04) 0%, transparent 50%);
}

/* ── Pokemon-style box mixin (thick border with inner line) ── */
.pkbox {
    background: var(--surface);
    border: 3px solid var(--text);
    box-shadow: 0 0 0 3px var(--border-bright), 0 0 0 6px var(--text);
    margin: 6px;
}

/* ── Header ── */

header {
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 3px solid var(--text);
    box-shadow: 0 0 0 3px var(--border-bright), 0 3px 0 3px var(--text);
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 10;
}

header h1 {
    font-family: var(--pokemon-font);
    font-size: 11px;
    color: var(--key-gold);
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

header .subtitle {
    font-family: var(--pokemon-font);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

header .back {
    font-family: var(--pokemon-font);
    font-size: 7px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 8px;
    border: 2px solid var(--border);
    background: var(--bg);
}

header .back:hover {
    border-color: var(--text);
    color: var(--text);
}

header .meta {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
    margin-left: auto;
}

/* ── Run list table ── */

main {
    padding: 16px 20px;
}

#runs-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    border: 2px solid var(--border-bright);
}

#runs-table thead {
    background: var(--surface2);
}

#runs-table th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid var(--border-bright);
    font-family: var(--pokemon-font);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

#runs-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.run-row {
    cursor: pointer;
}

.run-row:hover td {
    background: var(--surface2);
}

.empty {
    color: var(--text-muted);
    text-align: center;
    padding: 40px 12px !important;
    font-family: var(--pokemon-font);
    font-size: 8px;
}

.outcome-success { color: var(--success); }
.outcome-failure { color: var(--divergence); }
.text-warn { color: var(--warn); }
.text-muted { color: var(--text-muted); }

/* ── Run detail layout ── */

.run-detail {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 0;
    height: calc(100vh - 120px);
    overflow: hidden;
}

.panel {
    overflow-y: auto;
}

/* Grid panel */

.grid-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    background: var(--surface);
    border-right: 3px solid var(--border-bright);
}

#grid-canvas {
    image-rendering: pixelated;
    border: 3px solid var(--text);
    box-shadow: 0 0 0 3px var(--border-bright), 0 0 0 6px var(--text);
    display: block;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-family: var(--pokemon-font);
    font-size: 6px;
    color: var(--text-muted);
    padding: 8px 0;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.swatch {
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.2);
}

.swatch.wall        { background: #1e1408; }
.swatch.floor       { background: #4a3420; }
.swatch.door-locked { background: #6b2800; }
.swatch.door-unlocked { background: #286820; }
.swatch.exit        { background: #184898; }
.swatch.key-item    { background: var(--key-gold); }
.swatch.agent-a     { background: var(--agent-a); }
.swatch.agent-b     { background: var(--agent-b); }

/* Agent panels */

.agents-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    padding: 12px;
    background: var(--bg);
}

.agent-card {
    background: var(--surface);
    border: 3px solid var(--text);
    box-shadow: 0 0 0 2px var(--border-bright);
    margin-bottom: 12px;
}

.agent-card-header {
    padding: 8px 12px;
    border-bottom: 2px solid var(--border);
    background: var(--surface2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-card-header h3 {
    font-family: var(--pokemon-font);
    font-size: 8px;
    color: var(--text);
    letter-spacing: 0.05em;
}

.agent-sprite-icon {
    width: 16px;
    height: 20px;
    image-rendering: pixelated;
}

.agent-a-color { color: var(--agent-a); }
.agent-b-color { color: var(--agent-b); }

.agent-card-body {
    padding: 10px 12px;
}

.agent-info, .agent-action, .agent-messages {
    margin-bottom: 5px;
    font-size: 11px;
}

.label {
    color: var(--text-muted);
    font-family: var(--pokemon-font);
    font-size: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-block;
    margin-right: 4px;
}

.action-success { color: var(--text); }
.action-failure { color: var(--divergence); }

.failure-reason {
    color: var(--warn);
    font-size: 10px;
    font-family: 'Courier New', monospace;
    display: block;
    margin-top: 2px;
}

.message-bubble {
    display: inline-block;
    background: var(--surface2);
    border: 2px solid var(--border);
    padding: 2px 6px;
    font-size: 10px;
    font-style: italic;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-bubble.sent {
    border-color: var(--agent-a);
}

/* Reasoning */

.reasoning {
    margin-top: 6px;
    font-size: 10px;
}

.reasoning summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 10px;
    padding: 3px 0;
}

.reasoning summary:hover {
    color: var(--text);
}

.reasoning pre {
    margin-top: 4px;
    padding: 8px;
    background: var(--bg);
    border: 2px solid var(--border);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 180px;
    overflow-y: auto;
    color: var(--text-muted);
}

/* Belief table */

.belief-table {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
}

.belief-header {
    font-family: var(--pokemon-font);
    font-size: 7px;
    color: var(--border-bright);
    margin-bottom: 5px;
    letter-spacing: 0.05em;
}

.belief-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

.belief-table td {
    padding: 3px 5px;
    vertical-align: top;
}

.belief-icon {
    width: 14px;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
}

.belief-label {
    color: var(--text-muted);
    white-space: nowrap;
    font-family: var(--pokemon-font);
    font-size: 6px;
    padding-top: 3px;
}

.belief-value {
    font-size: 10px;
    font-family: 'Courier New', monospace;
}

.belief-actual {
    font-size: 9px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

.belief-stale {
    font-size: 9px;
    font-family: 'Courier New', monospace;
}

/* Divergence severity row colors */
.div-correct .belief-icon { color: var(--success); }
.div-unknown .belief-icon { color: var(--info); }
.div-low     .belief-icon { color: var(--info); }
.div-medium  { background: rgba(104, 80, 164, 0.12); }
.div-medium  .belief-icon { color: var(--warn); }
.div-high    { background: rgba(232, 168, 32, 0.10); }
.div-high    .belief-icon { color: var(--warn); }
.div-high    .belief-stale { color: var(--warn); }
.div-critical { background: rgba(232, 48, 64, 0.12); }
.div-critical .belief-icon { color: var(--divergence); }
.div-critical .belief-stale { color: var(--divergence); }

.belief-goal {
    margin-top: 5px;
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    font-family: 'Courier New', monospace;
}

/* ── Timeline ── */

.timeline-section {
    border-top: 3px solid var(--text);
    box-shadow: 0 -3px 0 0 var(--border-bright);
    padding: 10px 20px;
    background: var(--surface);
    position: relative;
}

.transport {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.transport button {
    background: var(--bg);
    border: 2px solid var(--border);
    color: var(--text);
    width: 30px;
    height: 26px;
    cursor: pointer;
    font-family: var(--pokemon-font);
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: none;
}

.transport button:hover {
    background: var(--surface2);
    border-color: var(--text);
}

.transport button:active {
    background: var(--border);
}

#turn-display {
    margin-left: 10px;
    font-family: var(--pokemon-font);
    font-size: 7px;
    color: var(--text-muted);
}

#timeline-canvas {
    width: 100%;
    display: block;
    cursor: pointer;
}

/* ── Diagnosis panel ── */
.diagnosis-section {
    margin: 6px 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-left: 4px solid var(--warn);
}

.diagnosis-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.diagnosis-label {
    font-family: var(--pokemon-font);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.diagnosis-mode-badge {
    font-family: var(--pokemon-font);
    font-size: 7px;
    padding: 3px 8px;
    border-radius: 2px;
    background: var(--surface2);
    color: var(--warn);
    border: 1px solid var(--warn);
    text-transform: uppercase;
}

.diagnosis-mode-badge.mode-none {
    color: var(--success);
    border-color: var(--success);
}

.diagnosis-mode-badge.mode-stale_beliefs,
.diagnosis-mode-badge.mode-stuck_loop {
    color: var(--divergence);
    border-color: var(--divergence);
}

.diagnosis-body {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.diagnosis-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.diag-stat {
    text-align: center;
}

.diag-stat .diag-value {
    font-family: var(--pokemon-font);
    font-size: 11px;
    color: var(--text);
    display: block;
}

.diag-stat .diag-key {
    font-size: 10px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

.diagnosis-insights {
    list-style: none;
    padding: 0;
    flex: 1;
}

.diagnosis-insights li {
    color: var(--text-muted);
    font-size: 11px;
    padding: 2px 0;
}

.diagnosis-insights li::before {
    content: "› ";
    color: var(--warn);
}

/* ── Causal chain ── */

.causal-section {
    margin: 6px 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-left: 4px solid var(--agent-a);
}

.causal-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 10px;
}

.causal-label {
    font-family: var(--pokemon-font);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 1px;
    flex-shrink: 0;
}

.causal-summary {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

/* Causal window cards */

.cw {
    border: 1px solid var(--border);
    background: var(--bg);
    padding: 8px 10px;
    margin-bottom: 6px;
}

.cw-worst {
    border-color: var(--divergence);
    background: rgba(232, 48, 40, 0.05);
}

.cw-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.cw-agent {
    font-family: var(--pokemon-font);
    font-size: 7px;
    letter-spacing: 0.05em;
}

.cw-field {
    font-family: var(--pokemon-font);
    font-size: 7px;
    letter-spacing: 0.03em;
}

.cw-duration {
    font-family: var(--pokemon-font);
    font-size: 7px;
    color: var(--warn);
    margin-left: auto;
}

.cw-worst .cw-duration {
    color: var(--divergence);
}

.cw-resolved   { font-size: 9px; color: var(--success); font-family: monospace; }
.cw-unresolved { font-size: 9px; color: var(--divergence); font-family: monospace; }

.cw-jump {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--pokemon-font);
    font-size: 6px;
    padding: 2px 6px;
    cursor: pointer;
}

.cw-jump:hover {
    border-color: var(--text);
    color: var(--text);
}

/* Narrative line */

.cw-narrative {
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.cw-believed {
    color: var(--warn);
    font-style: italic;
}

.cw-actual {
    color: var(--success);
    font-style: italic;
}

/* Mini timeline bar */

.cw-bar-wrap {
    position: relative;
    padding-bottom: 16px; /* room for labels */
}

.cw-bar {
    position: relative;
    height: 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
}

.cw-seg-correct {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: rgba(72, 200, 112, 0.35); /* muted green */
}

.cw-seg-stale {
    position: absolute;
    top: 0; height: 100%;
    background: rgba(232, 48, 40, 0.55); /* red stale */
}

.cw-worst .cw-seg-stale {
    background: rgba(232, 48, 40, 0.75);
}

.cw-bar-marker {
    position: absolute;
    top: -2px; bottom: -2px;
    width: 2px;
    background: var(--warn);
    z-index: 2;
}

/* Bar labels */

.cw-bar-labels {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 14px;
    font-size: 8px;
    font-family: 'Courier New', monospace;
    color: var(--text-muted);
}

.cw-bar-labels span {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    bottom: 0;
}

.cw-lbl-correct  { color: rgba(72, 200, 112, 0.7); }
.cw-lbl-marker   { color: var(--warn); }
.cw-lbl-resolved { color: var(--success); }
.cw-lbl-end      { color: var(--text-muted); }

/* Field colors */
.causal-field-key_location         { color: var(--key-gold); }
.causal-field-door_status          { color: var(--warn); }
.causal-field-other_agent_position { color: var(--info); }

/* ── Decision quality badge (in agent panel) ── */
.dq-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 2px;
    margin-left: 6px;
    font-family: monospace;
}

.dq-stale {
    background: rgba(240, 184, 48, 0.2);
    color: var(--warn);
    border: 1px solid var(--warn);
}

.dq-mismatch {
    background: rgba(232, 48, 40, 0.2);
    color: var(--divergence);
    border: 1px solid var(--divergence);
}

/* ── Tab bar ── */

.tab-bar {
    display: flex;
    gap: 0;
    background: var(--surface);
    border-bottom: 2px solid var(--border-bright);
    padding: 0 20px;
}

.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-family: var(--pokemon-font);
    font-size: 7px;
    letter-spacing: 0.05em;
    padding: 10px 16px;
    cursor: pointer;
    margin-bottom: -2px; /* sit on the border */
    transition: none;
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    color: var(--key-gold);
    border-bottom-color: var(--key-gold);
}

/* ── Langfuse trace tab ── */

#tab-langfuse-panel {
    padding: 12px 20px;
    min-height: calc(100vh - 160px);
}

.lf-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.lf-status {
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: var(--text-muted);
    flex: 1;
}

.lf-status-error {
    color: var(--divergence);
}

.lf-refresh-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--pokemon-font);
    font-size: 6px;
    padding: 4px 10px;
    cursor: pointer;
}

.lf-refresh-btn:hover {
    border-color: var(--text);
    color: var(--text);
}

.lf-ext-link {
    font-family: var(--pokemon-font);
    font-size: 6px;
    color: var(--info);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--info);
}

.lf-ext-link:hover { color: var(--text); border-color: var(--text); }

/* Scores */

.lf-scores {
    margin-bottom: 14px;
}

.lf-scores-label {
    font-family: var(--pokemon-font);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.lf-scores-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lf-score-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 6px 12px;
    text-align: center;
    min-width: 80px;
}

.lf-score-chip.score-success { border-color: var(--success); }
.lf-score-chip.score-failure { border-color: var(--divergence); }

.score-val {
    display: block;
    font-family: var(--pokemon-font);
    font-size: 11px;
    color: var(--text);
    margin-bottom: 3px;
}

.lf-score-chip.score-success .score-val { color: var(--success); }
.lf-score-chip.score-failure .score-val { color: var(--divergence); }

.score-name {
    display: block;
    font-size: 9px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

.score-comment {
    font-size: 9px;
    color: var(--info);
    cursor: help;
    margin-left: 4px;
}

/* Trace tree */

.lf-tree-label {
    font-family: var(--pokemon-font);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.lf-tree-count {
    color: var(--info);
    font-size: 7px;
}

.lf-tree-body {
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.obs-node {
    border-left: 1px solid var(--border);
    margin-left: 0;
    padding-left: 0;
}

.obs-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 6px;
    border-bottom: 1px solid rgba(107, 76, 36, 0.2);
}

.obs-row.obs-warn { background: rgba(232, 48, 40, 0.06); }

.obs-row.obs-clickable { cursor: pointer; }
.obs-row.obs-clickable:hover { background: var(--surface2); }

.obs-arrow {
    font-size: 8px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    width: 10px;
    flex-shrink: 0;
}

.obs-arrow:hover { color: var(--text); }
.obs-arrow-spacer { width: 10px; flex-shrink: 0; display: inline-block; }

.obs-name { color: var(--text); }

.obs-type {
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 1px;
    font-family: var(--pokemon-font);
}

.obs-gen  { background: rgba(56, 136, 248, 0.2); color: var(--agent-a); }
.obs-tool { background: rgba(240, 184, 48, 0.2);  color: var(--warn); }
.obs-span { background: rgba(136, 152, 192, 0.2); color: var(--info); }

.obs-warn-badge {
    font-size: 8px;
    color: var(--divergence);
    font-family: var(--pokemon-font);
}

.obs-meta {
    font-size: 10px;
    color: var(--text-muted);
}

.obs-model {
    font-style: italic;
    font-size: 9px;
}

/* Observation detail (input/output) */

.obs-detail {
    margin: 0 0 4px 20px;
    border-left: 2px solid var(--border);
    padding-left: 8px;
}

.obs-io-label {
    font-family: var(--pokemon-font);
    font-size: 6px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin: 4px 0 2px;
}

.obs-io {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 6px 8px;
    font-size: 10px;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    margin: 0 0 4px;
}

.obs-io-warn { color: var(--warn); }

.lf-empty {
    color: var(--text-muted);
    font-size: 11px;
    padding: 20px 0;
    font-family: 'Courier New', monospace;
}

/* ── Recommendations: What should change next ── */

.rec-section {
    margin: 6px 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-left: 4px solid var(--success);
}

.rec-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 10px;
}

.rec-label {
    font-family: var(--pokemon-font);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 1px;
    flex-shrink: 0;
}

.rec-summary {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

/* Cards */

.rec-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    padding: 9px 12px;
    margin-bottom: 6px;
}

.rec-critical {
    border-left-color: var(--divergence);
    background: rgba(232, 48, 40, 0.04);
}

.rec-high {
    border-left-color: var(--warn);
    background: rgba(240, 184, 48, 0.03);
}

.rec-medium {
    border-left-color: var(--info);
}

.rec-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}

.rec-priority {
    font-family: var(--pokemon-font);
    font-size: 6px;
    padding: 2px 6px;
    border-radius: 1px;
    letter-spacing: 0.05em;
}

.rec-priority-critical {
    background: rgba(232, 48, 40, 0.2);
    color: var(--divergence);
    border: 1px solid var(--divergence);
}

.rec-priority-high {
    background: rgba(240, 184, 48, 0.15);
    color: var(--warn);
    border: 1px solid var(--warn);
}

.rec-priority-medium {
    background: rgba(136, 152, 192, 0.15);
    color: var(--info);
    border: 1px solid var(--info);
}

.rec-category {
    font-family: var(--pokemon-font);
    font-size: 6px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.rec-evidence {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

.rec-jump {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--pokemon-font);
    font-size: 6px;
    padding: 2px 5px;
    cursor: pointer;
}

.rec-jump:hover {
    border-color: var(--text);
    color: var(--text);
}

/* Finding: what we observed */
.rec-finding {
    font-size: 11px;
    font-family: 'Courier New', monospace;
    color: var(--text-muted);
    margin-bottom: 7px;
    line-height: 1.5;
}

/* The recommendation itself — the most important line */
.rec-change {
    font-size: 11px;
    font-family: 'Courier New', monospace;
    color: var(--text);
    margin-bottom: 5px;
    line-height: 1.5;
}

.rec-change-label {
    font-family: var(--pokemon-font);
    font-size: 6px;
    color: var(--success);
    margin-right: 6px;
    letter-spacing: 0.03em;
}

/* Expected impact */
.rec-impact {
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
}

.rec-impact-label {
    font-style: normal;
    color: var(--info);
    margin-right: 4px;
}

/* ============================================================
   Q-SECTIONS — the three spec questions (what / why / change)
   ============================================================ */

.q-section {
    margin: 22px 24px;
    padding: 0;
}

.q-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--surface);
    border: 2px solid var(--border-bright);
    box-shadow: 0 0 0 2px var(--bg) inset, 0 3px 0 0 var(--text);
}

.q-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--border-bright);
    color: var(--bg);
    font-family: var(--pokemon-font);
    font-size: 14px;
    border: 2px solid var(--text);
    flex-shrink: 0;
}

.q-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.q-title-wrap h2 {
    font-family: var(--pokemon-font);
    font-size: 12px;
    color: var(--text);
    letter-spacing: 1.5px;
    margin: 0;
}

.q-sub {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* ============================================================
   SECTION 1 — replay + chat layout
   ============================================================ */

.replay-layout {
    display: grid;
    grid-template-columns: minmax(460px, 520px) 1fr;
    gap: 18px;
    align-items: start;
}

.replay-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
    border: 2px solid var(--border);
    box-shadow: 0 0 0 2px var(--bg) inset;
    padding: 14px 14px 16px;
}

.world-frame {
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
}

.transport-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 10px;
    background: var(--bg);
    border: 2px solid var(--border);
}

.transport-bar .transport {
    margin: 0;
}

.turn-display {
    font-family: var(--pokemon-font);
    font-size: 8px;
    color: var(--border-bright);
    letter-spacing: 1px;
}

#timeline-canvas {
    width: 100%;
    border: 2px solid var(--border);
    background: var(--bg);
}

.grid-legend-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-family: var(--pokemon-font);
    font-size: 6px;
    color: var(--text-muted);
    padding: 6px 4px;
    border-top: 1px dashed var(--border);
}

.grid-legend-strip .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.agents-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-card-compact {
    margin-bottom: 0;
    box-shadow: 0 0 0 1px var(--border-bright);
    border-width: 2px;
}

.agent-card-compact .agent-card-header {
    padding: 6px 10px;
}

.agent-card-compact .agent-card-body {
    padding: 8px 10px;
    max-height: 220px;
    overflow-y: auto;
    font-size: 10px;
}

/* ============================================================
   WhatsApp-style chat frame
   ============================================================ */

.replay-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-frame {
    background: var(--surface);
    border: 2px solid var(--border);
    box-shadow: 0 0 0 2px var(--bg) inset, 0 0 0 3px var(--border-bright);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 520px;
    max-height: 820px;
}

.chat-frame-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface2);
    border-bottom: 2px solid var(--border-bright);
    flex-shrink: 0;
}

.chat-frame-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pokemon-font);
    font-size: 9px;
    color: var(--text);
    letter-spacing: 1.5px;
}

.chat-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 3px rgba(200, 135, 44, 0.6));
}

.chat-count {
    margin-left: auto;
    font-family: monospace;
    font-size: 10px;
    color: var(--text-muted);
}

.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background:
        radial-gradient(ellipse at 30% 0%, rgba(200, 135, 44, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 100%, rgba(56, 136, 248, 0.04) 0%, transparent 55%),
        var(--bg);
}

.chat-log::-webkit-scrollbar      { width: 10px; }
.chat-log::-webkit-scrollbar-track { background: var(--bg); }
.chat-log::-webkit-scrollbar-thumb { background: var(--border); border: 2px solid var(--bg); }

.chat-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 40px 20px;
    font-style: italic;
    font-family: monospace;
    font-size: 12px;
}

/* Chat bubble — one row per message, anchored left or right */
.chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    opacity: 0.45;
    transition: opacity 0.2s, transform 0.2s;
}

.chat-msg.chat-agent-a { align-self: flex-start; align-items: flex-start; }
.chat-msg.chat-agent-b { align-self: flex-end;   align-items: flex-end;   }

.chat-msg.chat-msg-past   { opacity: 0.8; }
.chat-msg.chat-msg-future { opacity: 0.3; }
.chat-msg.chat-msg-active { opacity: 1;   transform: scale(1.015); }

.chat-bubble {
    position: relative;
    padding: 10px 14px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text);
    word-wrap: break-word;
    border: 2px solid var(--text);
    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.35);
}

.chat-agent-a .chat-bubble {
    background: linear-gradient(135deg, #1a3a68 0%, #0f2442 100%);
    border-color: var(--agent-a);
    border-top-left-radius: 2px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.chat-agent-b .chat-bubble {
    background: linear-gradient(135deg, #681a10 0%, #3a0e08 100%);
    border-color: var(--agent-b);
    border-top-left-radius: 12px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.chat-msg.chat-msg-active .chat-bubble {
    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.35),
                0 0 0 2px var(--border-bright),
                0 0 12px rgba(200, 135, 44, 0.35);
}

.chat-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 0 4px;
    font-family: monospace;
    font-size: 10px;
    color: var(--text-muted);
}

.chat-agent-a .chat-meta { flex-direction: row; }
.chat-agent-b .chat-meta { flex-direction: row-reverse; }

.chat-sender {
    font-family: var(--pokemon-font);
    font-size: 7px;
    letter-spacing: 1px;
}

.chat-agent-a .chat-sender { color: var(--agent-a); }
.chat-agent-b .chat-sender { color: var(--agent-b); }

.chat-turn {
    color: var(--text-muted);
}

.chat-play,
.chat-jump {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    width: 22px;
    height: 22px;
    padding: 0;
    font-family: monospace;
    font-size: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.chat-play:hover,
.chat-jump:hover {
    background: var(--border);
    border-color: var(--border-bright);
}

.chat-play-loading { color: var(--warn); border-color: var(--warn); }

.chat-play-active {
    color: var(--border-bright);
    border-color: var(--border-bright);
    background: var(--surface2);
    animation: chat-pulse 1.2s ease-in-out infinite;
}

.chat-play-error { color: var(--divergence); border-color: var(--divergence); }

@keyframes chat-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 184, 48, 0.5); }
    50%      { box-shadow: 0 0 0 4px rgba(240, 184, 48, 0); }
}

.chat-frame-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface2);
    border-top: 2px solid var(--border-bright);
    flex-shrink: 0;
}

.chat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: monospace;
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    letter-spacing: 0.5px;
}

.chat-toggle input[type="checkbox"] {
    accent-color: var(--border-bright);
    cursor: pointer;
}

.chat-toggle:hover { color: var(--text); }

.chat-play-all,
.chat-stop {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    font-family: var(--pokemon-font);
    font-size: 7px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.chat-play-all { margin-left: auto; }

.chat-play-all:hover,
.chat-stop:hover {
    background: var(--border);
    border-color: var(--border-bright);
}

.chat-stop { padding: 6px 9px; }

/* ============================================================
   SECTION 2 — why-layout (diagnosis + causal side by side)
   ============================================================ */

.why-layout {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 18px;
    align-items: start;
}

.why-layout .diagnosis-section,
.why-layout .causal-section {
    margin: 0;
}

/* Collapse to single column on narrow viewports */
@media (max-width: 1100px) {
    .replay-layout,
    .why-layout {
        grid-template-columns: 1fr;
    }
    .chat-frame {
        height: 560px;
    }
}