/* ═══════════════════════════════════════════════════
   JARVIS Neural Interface — HUD overlay
   Self-contained: copies the BD design tokens so this
   immersive page doesn't inherit the homepage chrome.
═══════════════════════════════════════════════════ */
:root {
  --void:       #000008;
  --void-2:     #05050f;
  --cyan:       #00e5ff;
  --violet:     #7c3aed;
  --magenta:    #ff006e;
  --white:      #f0f0ff;
  --muted:      rgba(240, 240, 255, 0.55);
  --glass:      rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
}

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

.jarvis-body {
  background: var(--void);
  color: var(--white);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; color: inherit; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ─── Background layers ───────────────────────────── */
#neural-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
}
.neural-unsupported { display: none; }

.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}
.orb-a {
  width: 50vw; height: 50vw;
  top: -10vw; left: -10vw;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.5), transparent 70%);
  animation: orbDrift 18s ease-in-out infinite alternate;
}
.orb-b {
  width: 45vw; height: 45vw;
  bottom: -12vw; right: -8vw;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.4), transparent 70%);
  animation: orbDrift 22s ease-in-out infinite alternate-reverse;
}
@keyframes orbDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(6vw, 5vw); }
}

/* Static fallback brain when WebGL is unavailable */
.no-webgl::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 42% 50%, rgba(0, 229, 255, 0.28), transparent 28%),
    radial-gradient(circle at 58% 50%, rgba(124, 58, 237, 0.28), transparent 28%);
  filter: blur(8px);
}

/* ─── HUD ─────────────────────────────────────────── */
#hud {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 4vw, 40px);
  pointer-events: none;
}
#hud button, #hud a, #hud input { pointer-events: auto; }

.hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hud-back {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--muted);
  transition: color 0.25s ease;
}
.hud-back:hover { color: var(--cyan); }

#state-indicator {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.4s ease, text-shadow 0.4s ease;
  color: var(--cyan);
}
#state-indicator[data-state="idle"]      { color: var(--cyan); }
#state-indicator[data-state="listening"] { color: var(--cyan);    text-shadow: 0 0 12px var(--cyan); }
#state-indicator[data-state="thinking"]  { color: var(--violet);  text-shadow: 0 0 14px var(--violet); }
#state-indicator[data-state="speaking"]  { color: var(--magenta); text-shadow: 0 0 14px var(--magenta); }

.hud-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.response {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 3.4vw, 34px);
  line-height: 1.3;
  text-shadow: 0 0 40px rgba(0, 229, 255, 0.35);
  min-height: 1.3em;
}

.hud-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.transcript {
  text-align: center;
  min-height: 1.4em;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mic-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid;
  place-items: center;
  transition: box-shadow 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}
.mic-btn:hover { border-color: rgba(0, 229, 255, 0.5); }
.mic-btn svg { width: 30px; height: 30px; stroke: var(--white); }
.mic-btn.listening {
  border-color: var(--cyan);
  box-shadow: 0 0 30px var(--cyan), 0 0 70px rgba(0, 229, 255, 0.4);
  animation: micPulse 1.4s ease-in-out infinite;
}
.mic-btn.listening svg { stroke: var(--cyan); }
.mic-btn.disabled { opacity: 0.35; pointer-events: none; }
@keyframes micPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.text-fallback input {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--white);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  width: min(420px, 80vw);
  outline: none;
  transition: border-color 0.25s ease;
}
.text-fallback input:focus { border-color: rgba(0, 229, 255, 0.5); }
.text-fallback input::placeholder { color: var(--muted); }

.hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .mic-btn.listening, .orb-a, .orb-b { animation: none; }
}