/* Brian terminal pane — replay.css */

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

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --green: #3fb950;
  --yellow: #d29922;
  --red: #f85149;
  --blue: #58a6ff;
  --accent: #1f6feb;
  --sidebar-w: 240px;
  --header-h: 48px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  overflow: hidden;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

#layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

#sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Session header bar ─────────────────────────────────────────────────── */

#header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 12px;
  flex-shrink: 0;
}

#header .logo {
  font-weight: 700;
  font-size: 14px;
  color: var(--blue);
  letter-spacing: -0.3px;
  margin-right: 8px;
}

#session-badge {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

#stats-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

.stat-label { color: var(--text-muted); }
.stat-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

#cap-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}

#cap-indicator.green  { color: var(--green);  border-color: var(--green);  background: rgba(63,185,80,0.08);  }
#cap-indicator.yellow { color: var(--yellow); border-color: var(--yellow); background: rgba(210,153,34,0.12); }
#cap-indicator.red    { color: var(--red);    border-color: var(--red);    background: rgba(248,81,73,0.12);  }

#stop-btn {
  margin-left: auto;
  padding: 5px 14px;
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
#stop-btn:hover  { background: rgba(248,81,73,0.12); }
#stop-btn:active { background: rgba(248,81,73,0.25); }

/* ── Terminal pane ───────────────────────────────────────────────────────── */

#terminal-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #000;
}

#terminal {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 10px 14px;
  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "Menlo", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Live stream lines */
.line-prompt    { color: #3fb950; }
.line-command   { color: #e6edf3; }
.line-output    { color: #adbac7; }
.line-separator { color: #30363d; }

.line-rejected {
  color: var(--red);
  font-weight: 600;
}
.line-rejected-reason {
  color: var(--red);
  font-size: 11px;
}
.line-hint {
  color: #8b949e;
  font-size: 11px;
}
.line-stopped {
  color: var(--red);
  font-weight: 700;
  background: rgba(248,81,73,0.08);
  padding: 2px 6px;
  border-radius: 3px;
}
.line-cap {
  color: var(--yellow);
  font-weight: 700;
}
.line-meta {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
}

/* asciinema-player override for replay mode */
asciinema-player {
  width: 100%;
  height: 100%;
  --term-color-background: #000000;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

#sidebar-header {
  padding: 12px 12px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

#session-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.session-item {
  padding: 8px 12px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session-item:hover { background: rgba(255,255,255,0.04); }
.session-item.active {
  border-left-color: var(--blue);
  background: rgba(88,166,255,0.06);
}

.session-item .s-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.session-item .s-live {
  font-size: 10px;
  background: var(--green);
  color: #000;
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 700;
}
.session-item .s-meta {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Mode indicator ─────────────────────────────────────────────────────── */

#mode-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
#mode-badge.live   { background: rgba(63,185,80,0.15);  color: var(--green);  }
#mode-badge.replay { background: rgba(88,166,255,0.1);  color: var(--blue);   }

/* ── Connection status dot ──────────────────────────────────────────────── */

#conn-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.3s;
}
#conn-dot.connected    { background: var(--green); }
#conn-dot.disconnected { background: var(--red); }

/* ── Replay controls (shown in replay mode) ─────────────────────────────── */
#replay-controls {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}
#replay-controls.visible { display: flex; }