:root {
  color-scheme: dark;
  --space-950: #05070d;
  --space-900: #080b14;
  --space-800: #0d1220;
  --space-700: #141c30;
  --space-600: #1e2942;
  --ink: #e8ecf5;
  --ink-muted: #9aa6c0;
  --ink-dim: #64708c;
  --amber: #f5a524;
  --amber-soft: #ffc35b;
  --cyan: #5fd4e6;
  --cyan-soft: #8fe3f0;
  --viol: #a78bfa;
  --red: #e5484d;
  --hair: #1c2740;
  --hair-bright: #2c3a5c;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--space-950); color: var(--ink); }
button { font: inherit; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(95, 212, 230, .055), transparent 36rem),
    var(--space-950);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.cockpit-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.cockpit-header {
  min-height: 3.55rem;
  padding: max(.62rem, env(safe-area-inset-top)) max(.85rem, env(safe-area-inset-right)) .62rem max(.85rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: .5rem .8rem;
  border-bottom: 1px solid var(--hair);
  background: rgba(8, 11, 20, .86);
  backdrop-filter: blur(16px);
  z-index: 5;
}

.brand { display: flex; align-items: center; gap: .48rem; flex: none; }
.brand strong,
.clock,
.stage-state,
.memory-meta span,
.conversation-header span,
.conversation-turn span {
  font-family: "Space Grotesk", ui-sans-serif, sans-serif;
}
.brand strong { font-size: .78rem; letter-spacing: .15em; }
.brand-mark { width: 1.45rem; height: 1.45rem; fill: none; stroke: var(--cyan); stroke-width: 1.6; opacity: .9; }
.brand-mark .brand-node { fill: var(--amber); stroke: none; }
.channel { color: var(--ink-dim); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.live-badge {
  display: flex;
  align-items: center;
  gap: .38rem;
  padding: .2rem .55rem;
  border: 1px solid var(--hair-bright);
  border-radius: 999px;
  color: var(--cyan);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.live-badge i { width: .38rem; height: .38rem; border-radius: 50%; background: var(--cyan); animation: breathe-cyan 2.2s ease infinite; }
.live-badge { margin-left: auto; }
.clock { color: var(--ink-muted); font-size: .75rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.conversation-toggle {
  position: relative;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .62rem;
  border: 1px solid var(--hair-bright);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .36rem;
  color: var(--ink-muted);
  background: rgba(13, 18, 32, .72);
  cursor: pointer;
}
.conversation-toggle[hidden] { display: none; }
.conversation-toggle:hover { color: var(--ink); border-color: rgba(95, 212, 230, .5); }
.conversation-toggle svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.conversation-toggle span { font-size: .58rem; letter-spacing: .06em; }
.conversation-toggle i {
  min-width: .92rem;
  height: .92rem;
  padding: 0 .22rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--space-950);
  background: var(--amber);
  font-size: .5rem;
  font-style: normal;
  font-weight: 700;
}
.conversation-toggle i[hidden] { display: none; }
.close { width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--ink-dim); font-size: 1.45rem; line-height: 1; border-radius: 50%; cursor: pointer; }
.close:hover { color: var(--ink); background: var(--space-800); }

.memory-stage { position: relative; min-height: 0; overflow: hidden; }
.blueprint {
  position: absolute;
  inset: 0;
  opacity: .72;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(95, 212, 230, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 212, 230, .055) 1px, transparent 1px),
    linear-gradient(rgba(95, 212, 230, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 212, 230, .02) 1px, transparent 1px);
  background-size: 5rem 5rem, 5rem 5rem, 1rem 1rem, 1rem 1rem;
  background-position: center center;
  mask-image: radial-gradient(circle at center, black 30%, rgba(0, 0, 0, .72) 68%, transparent 100%);
}
.memory-stage::before,
.memory-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: .42;
}
.memory-stage::before { inset: .8rem auto auto .8rem; width: 1.5rem; height: 1.5rem; border-left: 1px solid var(--cyan); border-top: 1px solid var(--cyan); }
.memory-stage::after { inset: auto .8rem .8rem auto; width: 1.5rem; height: 1.5rem; border-right: 1px solid var(--cyan); border-bottom: 1px solid var(--cyan); }

.stage-state {
  position: absolute;
  top: .9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--ink-dim);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease;
}
.memory-graph[data-state="listening"] ~ .voice-console #hint,
.memory-graph[data-state="listening"] + .voice-console #hint { color: var(--cyan); }
.stage-state span[data-state="listening"] { color: var(--cyan); }
.stage-state span[data-state="thinking"],
.stage-state span[data-state="transcribing"] { color: var(--viol); }
.stage-state span[data-state="speaking"] { color: var(--amber); }
.stage-state span[data-state="error"] { color: var(--red); }

.memory-meta { position: absolute; top: 1rem; left: 1rem; z-index: 3; display: flex; flex-direction: column; gap: .18rem; pointer-events: none; }
.memory-meta span { color: var(--ink-dim); font-size: .61rem; letter-spacing: .18em; text-transform: uppercase; }
.memory-meta b { color: var(--ink-dim); font-size: .61rem; font-weight: 500; }

.memory-graph { position: absolute; inset: 2rem 0 8.4rem; }
.memory-graph canvas { display: block; width: 100%; height: 100%; opacity: .94; }

.voice-console {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(42rem, calc(100% - 2rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .58rem;
  pointer-events: none;
}
.voice-console > * { pointer-events: auto; }
#hint { margin: 0; max-width: 34rem; min-height: 1.1rem; color: var(--ink-muted); font-size: .68rem; letter-spacing: .045em; line-height: 1.35; text-align: center; text-wrap: balance; text-shadow: 0 0 12px var(--space-950), 0 0 12px var(--space-950); }
.meter { width: 7.5rem; height: 2px; overflow: hidden; border-radius: 999px; background: var(--hair); }
.meter i { display: block; width: 3%; height: 100%; border-radius: inherit; background: var(--cyan); box-shadow: 0 0 8px rgba(95, 212, 230, .7); transition: width 70ms linear; }

.call-control { width: 100%; display: grid; place-items: center; }

.call {
  --call-accent: var(--amber);
  --call-glow: rgba(245, 165, 36, .62);
  position: relative;
  width: 5.2rem;
  height: 5.2rem;
  flex: none;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--space-950);
  border: 1px solid var(--call-accent);
  background: var(--call-accent);
  box-shadow: 0 0 2.2rem -.35rem var(--call-glow);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .2s ease;
}
.call[hidden] { display: none; }
.call:hover { transform: translateY(-1px); filter: brightness(1.08); }
.call:active { transform: scale(.97); }
.call:disabled { opacity: .58; box-shadow: none; cursor: wait; }
.call[data-mode="listening"] { --call-accent: var(--cyan); --call-glow: rgba(95, 212, 230, .58); }
.call[data-mode="thinking"], .call[data-mode="transcribing"] { --call-accent: var(--viol); --call-glow: rgba(167, 139, 250, .56); }
.call[data-mode="speaking"] { --call-accent: var(--amber); --call-glow: rgba(245, 165, 36, .62); }
.call[data-mode="error"] { --call-accent: var(--red); --call-glow: rgba(229, 72, 77, .5); }
.call[data-active="true"] { color: var(--call-accent); background: var(--space-800); }
.call[data-active="true"] .call-pulse { position: absolute; inset: 0; border: 1px solid var(--call-accent); border-radius: inherit; animation: ping 1.7s ease-out infinite; }
.call[data-active="true"]::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--call-accent); border-radius: inherit; animation: ping 1.7s ease-out -.85s infinite; }
.call[data-active="true"]::after { content: ""; position: absolute; right: .42rem; bottom: .42rem; width: .62rem; height: .62rem; border: 2px solid var(--space-900); border-radius: .2rem; background: var(--red); }
.call-icon { width: 1.05rem; height: 1.65rem; border: 2px solid currentColor; border-radius: .75rem; position: relative; }
.call-icon::after { content: ""; position: absolute; width: 1.5rem; height: .75rem; left: 50%; bottom: -.52rem; transform: translateX(-50%); border: 2px solid currentColor; border-top: 0; border-radius: 0 0 .85rem .85rem; }

.conversation-sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    radial-gradient(circle at 50% 15%, rgba(95, 212, 230, .1), transparent 28rem),
    rgba(5, 7, 13, .975);
  backdrop-filter: blur(18px);
}
.conversation-sheet[hidden] { display: none; }
.conversation-header {
  min-height: 4.3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--hair);
}
.conversation-header > div { min-width: 0; }
.conversation-header span { display: block; color: var(--cyan); font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; }
.conversation-header h2 { margin: .22rem 0 0; overflow: hidden; color: var(--ink); font-size: clamp(1rem, 3.5vw, 1.35rem); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.conversation-header strong { margin-left: auto; color: var(--ink-muted); font-size: .61rem; font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
.conversation-header button { width: 2.25rem; height: 2.25rem; flex: none; border: 1px solid var(--hair); border-radius: 50%; color: var(--ink-muted); background: var(--space-800); font-size: 1.35rem; cursor: pointer; }
.conversation-scroll { width: min(52rem, 100%); margin: 0 auto; padding: clamp(1.2rem, 4vh, 2.8rem) 0 2rem; overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--hair-bright) transparent; }
.conversation-log { display: grid; gap: 1.15rem; }
.conversation-turn { display: grid; gap: .85rem; padding: 1rem 0 1.25rem; border-bottom: 1px solid rgba(44, 58, 92, .55); }
.conversation-turn[hidden] { display: none; }
.conversation-turn p { margin: 0; display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.conversation-turn span { padding-top: .18rem; color: var(--ink-dim); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; }
.conversation-turn .hermes span { color: var(--amber); }
.conversation-turn b { color: var(--ink-muted); font-size: clamp(.9rem, 2.7vw, 1.04rem); line-height: 1.58; font-weight: 480; text-wrap: pretty; white-space: pre-wrap; }
.conversation-turn .hermes b { color: var(--ink); }
.conversation-log .conversation-turn { opacity: .72; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes breathe-cyan { 50% { opacity: .45; box-shadow: 0 0 10px rgba(95, 212, 230, .6); } }
@keyframes ping { from { transform: scale(1); opacity: .55; } to { transform: scale(1.9); opacity: 0; } }

@media (max-width: 700px) {
  .cockpit-header { min-height: 3.2rem; padding-top: max(.48rem, env(safe-area-inset-top)); padding-bottom: .48rem; }
  .channel, .clock { display: none; }
  .conversation-toggle { width: 2rem; padding: 0; }
  .conversation-toggle span { display: none; }
  .conversation-toggle i { position: absolute; top: -.3rem; right: -.3rem; }
  .memory-meta { top: .78rem; left: .72rem; }
  .stage-state { top: .8rem; }
  .memory-graph { inset: 2.4rem -.2rem 8.2rem; }
  .voice-console { bottom: max(1rem, env(safe-area-inset-bottom)); width: calc(100% - 1.4rem); }
  .call { width: 4.55rem; height: 4.55rem; }
  .conversation-sheet { padding-right: max(.8rem, env(safe-area-inset-right)); padding-left: max(.8rem, env(safe-area-inset-left)); }
  .conversation-header strong { display: none; }
  .conversation-turn p { grid-template-columns: 3rem minmax(0, 1fr); gap: .45rem; }
}

@media (max-height: 680px) {
  .memory-meta { top: .65rem; }
  .stage-state { top: .7rem; }
  .voice-console { bottom: .55rem; }
  .memory-graph { inset: 1.7rem 0 6.4rem; }
  #hint { font-size: .62rem; }
  .meter { width: 6rem; }
  .call { width: 4.2rem; height: 4.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}