:root {
  --bg: #0b0f14;
  --panel: #111820;
  --panel-2: #0a1018;
  --text: #e3eaf2;
  --muted: #8b9bab;
  --ok: #2ecc71;
  --warn: #f39c12;
  --err: #e74c3c;
  --accent: #4ea8ff;
  --accent-hot: #ff6b6b;
  --shadow: 0 10px 40px rgba(0, 0, 0, .45);
  --border: 1px solid rgba(255, 255, 255, .06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 800px at 50% -10%, #152537 0%, var(--bg) 55%),
    var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

.stage {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.card {
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  border: var(--border);
  border-radius: 22px;
  padding: 26px 24px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

header h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: .2px;
}
.sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

/* Push-to-talk button */
.ptt {
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(160deg, #1b3b66, #112a49 60%, #0b1d33);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: transform .06s ease, background .2s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font: 600 17px/1 inherit;
  letter-spacing: .5px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ptt:active { transform: scale(.985); }
.ptt[data-state="recording"] {
  background: linear-gradient(160deg, #3d1920, #5b2130 55%, #7a1e2b);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, .25) inset;
}
/* P2-B: pulse ring while recording — emanates outward, intensity-tied
   indirectly via the existing meter bar. Animation is layered as a ::after
   so it doesn't conflict with the gradient. The ring inflates from the
   button's edge so it reads as "the mic is hot." */
.ptt[data-state="recording"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255, 107, 107, 0.55);
  animation: ptt-pulse 1.4s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes ptt-pulse {
  0%   { transform: scale(1.00); opacity: 0.7; }
  60%  { opacity: 0.25; }
  100% { transform: scale(1.05); opacity: 0; }
}
/* P2-C: locked-recording variant — louder red so the lock state is
   unmistakable. Pulse ring still applies via the [data-state="recording"]
   selector since locked state keeps recording=true. */
.ptt[data-lock-state="locked"] {
  background: linear-gradient(160deg, #5b1a30, #7a1e2b 55%, #9a2335);
  box-shadow: 0 0 0 3px rgba(255, 80, 80, .35) inset;
}
.ptt[data-state="thinking"],
.ptt[data-state="working"] {
  background: linear-gradient(160deg, #2a2a0e, #3b3b12);
  color: var(--warn);
}
.ptt[data-state="speaking"] {
  background: linear-gradient(160deg, #0f3722, #164c30);
  color: var(--ok);
}
.ptt[data-state="done"] {
  background: linear-gradient(160deg, #0f3722, #164c30);
  color: var(--ok);
}
.ptt[data-state="error"] {
  background: linear-gradient(160deg, #3d1111, #5a1818);
  color: var(--err);
}
.ptt[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.ptt-label {
  position: relative;
  z-index: 2;
  font-size: 18px;
  font-weight: 700;
}

.ptt-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* P2-B: bumped from 4px → 6px so the recording level signal is visible
     at thumb-distance, not microscopic at the bottom edge. */
  height: 6px;
  background: rgba(255, 255, 255, .04);
  z-index: 2;
}
.ptt-meter-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #2ecc71, #4ea8ff, #ff6b6b);
  transition: width 60ms linear;
}

/* P2-E: keyboard focus ring on the PTT button + secondary-action buttons.
   Default browser outlines are inconsistent and easy to miss on dark UI;
   this is a deliberate ring tied to the accent color. */
.ptt:focus-visible,
.secondary:focus-visible,
.cancel-turn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* P2-A: "Show timing" toggle — visual diff when active so the power-user
   mode is obvious, not invisible. */
.secondary[aria-pressed="true"] {
  color: var(--text);
  background: rgba(78, 168, 255, 0.12);
  border-color: rgba(78, 168, 255, 0.4);
}

/* Prominent session-cost banner — per Rhys, cost should not be buried in the log. */
.cost-banner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: linear-gradient(160deg, #0f2438 0%, #0a1a2a 100%);
  border: var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.cost-banner .cost-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 600;
}
.cost-banner .cost-value {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* P3-2: dropped 22px → 18px so the h1 ("Crash Live") wins the visual
     hierarchy fight. Cost is still prominent — accent color + monospace
     + bold — but no longer competes head-on with the title. */
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.5px;
  margin-left: auto;
}
.cost-banner .cost-sub {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
}

/* Reconnect-resume banner — fires when the WS reattaches an in-flight
   turn (Phase 8 Track C snapshot). Auto-dismisses after ~8s or on click;
   slides in from the top so it's obvious the turn didn't die. */
.resume-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(160deg, rgba(78, 168, 255, 0.16) 0%, rgba(78, 168, 255, 0.06) 100%);
  border: 1px solid rgba(78, 168, 255, 0.35);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  animation: resume-banner-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.resume-banner[hidden] { display: none; }
.resume-banner.is-dismissing {
  animation: resume-banner-out 200ms ease-in forwards;
}
.resume-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(78, 168, 255, 0.6);
  animation: resume-pulse 1.4s ease-out infinite;
  flex-shrink: 0;
}
.resume-banner-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.resume-banner-text strong {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.resume-banner-sub {
  color: var(--muted);
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resume-banner-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.resume-banner-close:hover,
.resume-banner-close:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
@keyframes resume-banner-in {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes resume-banner-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-8px); opacity: 0; }
}
@keyframes resume-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(78, 168, 255, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(78, 168, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 168, 255, 0); }
}

/* Active-turn progress strip: elapsed timer, chunk chip, explicit cancel. */
.turn-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-2);
  border: var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  animation: pulse-border 1.6s ease-in-out infinite;
}
.turn-progress[hidden] { display: none; }
.turn-elapsed {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--warn);
  min-width: 60px;
}
.turn-chunks {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
  flex: 1;
}
.cancel-turn {
  background: rgba(231, 76, 60, 0.12);
  color: var(--err);
  border: 1px solid rgba(231, 76, 60, 0.35);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font: 600 12px/1 inherit;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.15s ease;
}
.cancel-turn:hover { background: rgba(231, 76, 60, 0.22); }
@keyframes pulse-border {
  0%, 100% { border-color: rgba(255, 255, 255, .06); }
  50% { border-color: rgba(243, 156, 18, 0.3); }
}

/* Telemetry strip */
.telemetry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--panel-2);
  border: var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stat .k {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.stat .v {
  font-size: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log {
  background: var(--panel-2);
  border: var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  max-height: 38dvh;
  min-height: 120px;
  overflow-y: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.log .line {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 4px;
}
.log .line.user { color: var(--accent); }
.log .line.assistant { color: var(--text); }
.log .line.err { color: var(--err); }
.log .line.info { color: var(--muted); }
.log .line.muted { color: var(--muted); opacity: 0.6; font-style: italic; }

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* P3-7: wrap on narrow viewports so the New Session / Resume / Show
     timing buttons don't overflow on phones <360px wide. */
  flex-wrap: wrap;
}

.secondary {
  background: transparent;
  color: var(--muted);
  border: var(--border);
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font: 500 13px/1 inherit;
  transition: color .15s ease, background .15s ease;
  user-select: none;
}
.secondary:hover { color: var(--text); background: rgba(255, 255, 255, .03); }

.session-id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
}

/* Phase 8d: recovery picker for prior Claude sessions (after cache-clear or
   PWA reinstall wipes localStorage). Full-screen sheet on mobile. */
.session-picker {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.session-picker[hidden] { display: none; }
.session-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.session-picker-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: 85dvh;
  background: var(--panel);
  border: var(--border);
  border-radius: 22px 22px 0 0;
  padding: 18px 18px 28px;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 600px) {
  .session-picker { align-items: center; }
  .session-picker-sheet { border-radius: 22px; }
}
.session-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.session-picker-header h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: .2px;
}
.session-picker-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
}
.session-picker-close:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.session-picker-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.session-picker-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}
.session-picker-empty {
  padding: 24px 8px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}
.session-picker-card {
  background: var(--panel-2);
  border: var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.06s ease;
  text-align: left;
  color: var(--text);
  font: inherit;
  width: 100%;
}
.session-picker-card:hover {
  border-color: rgba(78, 168, 255, 0.4);
}
.session-picker-card:active { transform: scale(0.99); }
.session-picker-card.current {
  border-color: rgba(78, 168, 255, 0.6);
  background: rgba(78, 168, 255, 0.06);
}
.session-picker-card .preview {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.session-picker-card .meta {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.session-picker-card .meta .current-badge {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}