/* =========================================================
   ZERO — Kiosk (voice UI). Palette matches styles.css (landing page).
   ========================================================= */

:root {
  /* "Golden Hour" — default light theme. [data-theme="dark"] overrides below. */
  --bg-0: #fffefb;
  --bg-1: #fdfbf5;
  --bg-2: #f6f1e4;
  --emerald: #9a6d1d;
  --teal: #c49435;
  --cyan: #e9cd8a;
  --mint: #0c6b58;
  --emerald-rgb: 154, 109, 29;
  --teal-rgb: 196, 148, 53;
  --cyan-rgb: 233, 205, 138;
  --mint-rgb: 12, 107, 88;
  /* Ring-only palette: bolder/more saturated than the button/badge gold above
     so the ring stays clearly visible against the near-white background. */
  --ring1-rgb: 181, 116, 8;
  --ring2-rgb: 217, 155, 25;
  --ring3-rgb: 240, 180, 41;
  --ring1: #b57408;
  --ring2: #d99b19;
  --ring3: #f0b429;
  --text-primary: #1c2420;
  --text-secondary: #4f5f58;
  --text-muted: #7d8c85;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(138, 97, 26, 0.16);
  --danger: #b3382e;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg-0: #05070a;
  --bg-1: #0a0f14;
  --bg-2: #0e151c;
  --emerald: #00ffc2;
  --teal: #22d3ee;
  --cyan: #38bdf8;
  --mint: #5eead4;
  --emerald-rgb: 0, 255, 194;
  --teal-rgb: 34, 211, 238;
  --cyan-rgb: 56, 189, 248;
  --mint-rgb: 94, 234, 212;
  --ring1-rgb: 0, 255, 194;
  --ring2-rgb: 34, 211, 238;
  --ring3-rgb: 56, 189, 248;
  --ring1: #00ffc2;
  --ring2: #22d3ee;
  --ring3: #38bdf8;
  --text-primary: #e8f6f3;
  --text-secondary: #8fb2b0;
  --text-muted: #5b7a78;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.1);
  --danger: #f87171;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* kiosk = fixed single screen, no scroll */
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: "Manrope", system-ui, sans-serif;
}

html[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(60% 45% at 50% 18%, rgba(var(--emerald-rgb), 0.10) 0%, transparent 70%),
    radial-gradient(50% 40% at 80% 85%, rgba(var(--teal-rgb), 0.08) 0%, transparent 70%),
    var(--bg-0);
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  flex-shrink: 0;
}
.topbar__brand { display: flex; align-items: center; gap: 10px; }
.topbar__mark {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--emerald);
  color: var(--emerald);
  display: grid; place-items: center;
  font-family: "Sora", sans-serif; font-weight: 700;
  box-shadow: 0 0 16px rgba(var(--emerald-rgb), 0.35);
}
.topbar__name { font-family: "Sora", sans-serif; font-weight: 700; font-size: 18px; }

.lang-toggle {
  display: flex; align-items: center; gap: 6px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 6px; backdrop-filter: blur(10px);
}
.lang-toggle__btn {
  border: 0; background: transparent; color: var(--text-secondary);
  font: 600 13px "Manrope", sans-serif; padding: 6px 14px; border-radius: 999px;
  cursor: pointer; transition: background .2s, color .2s;
}
.lang-toggle__btn.is-active { background: var(--glass-bg-strong); color: var(--emerald); }

.theme-toggle {
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  color: var(--text-secondary); border-radius: 999px; width: 34px; height: 34px;
  display: grid; place-items: center; cursor: pointer; margin-inline-start: 8px;
}
.theme-toggle__icon--sun { display: none; }
.theme-toggle.is-bright .theme-toggle__icon--moon { display: none; }
.theme-toggle.is-bright .theme-toggle__icon--sun { display: block; }

/* ---------- stage (fills remaining space) ---------- */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 26px;
  min-height: 0;
}

/* ---------- the Ring ---------- */
.ring-wrap {
  position: relative;
  width: min(38vh, 300px);
  height: min(38vh, 300px);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.ring-outer, .ring-mid, .ring-core {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2.5px solid rgba(var(--ring1-rgb), 0.85);
  box-shadow: 0 0 30px rgba(var(--ring1-rgb), 0.35);
  /* No transition on border-color/box-shadow: both derive from rgba(var(--x)),
     and some browsers never re-evaluate a transitioned property when only an
     ancestor's custom property changes (e.g. our theme toggle) — the ring gets
     stuck on the old color. Confirmed via live testing 2026-07-21. State-change
     colors (idle/listening/thinking/speaking) still look fine snapping instantly. */
  transition: transform .25s ease;
}
.ring-mid { inset: 12%; border-color: rgba(var(--ring2-rgb), 0.85); }
.ring-core {
  inset: 26%;
  /* Pure primary-gradient glow (cyan->emerald) — the ring is the logotype, so it
     stays within the accent gradient; the supporting accent (--mint, green in
     Golden Hour) is reserved for small highlights elsewhere per THEME-GOLD.md,
     not the Ring itself. */
  background: radial-gradient(circle at 40% 35%, rgba(var(--ring3-rgb), 0.6), rgba(var(--ring1-rgb), 0.15) 60%, transparent 75%);
  border-color: rgba(var(--ring3-rgb), 0.85);
}
.ring-glyph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "Sora", sans-serif; font-weight: 800;
  font-size: clamp(42px, 9vh, 76px); /* % would be relative to parent font, not ring */
  color: var(--text-primary);
  opacity: 0.85;
  pointer-events: none;
}
canvas.ring-particles { position: absolute; inset: -20%; width: 140%; height: 140%; pointer-events: none; }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
.ring-wrap.state-idle .ring-outer { animation: breathe 3.6s ease-in-out infinite; }
.ring-wrap.state-idle .ring-mid { animation: breathe 3.6s ease-in-out infinite .15s; }
.ring-wrap.state-idle .ring-core { animation: breathe 3.6s ease-in-out infinite .3s; }

/* listening: amplitude-driven via inline transform from JS, plus a live glow */
.ring-wrap.state-listening .ring-outer,
.ring-wrap.state-listening .ring-mid,
.ring-wrap.state-listening .ring-core {
  border-color: var(--ring1);
  box-shadow: 0 0 46px rgba(var(--ring1-rgb), 0.65);
}

@keyframes think-spin {
  to { transform: rotate(360deg); }
}
.ring-wrap.state-thinking .ring-outer {
  border-style: dashed;
  animation: think-spin 2.2s linear infinite;
  border-color: var(--ring3);
}
.ring-wrap.state-thinking .ring-mid {
  animation: think-spin 3s linear infinite reverse;
  border-color: var(--ring2);
}

@keyframes speak-pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.03); opacity: 1; }
}
.ring-wrap.state-speaking .ring-core { animation: speak-pulse 1.1s ease-in-out infinite; }
.ring-wrap.state-speaking .ring-outer,
.ring-wrap.state-speaking .ring-mid {
  border-color: var(--ring3);
  box-shadow: 0 0 36px rgba(var(--ring3-rgb), 0.5);
}

/* ---------- hint / transcript ---------- */
.hint {
  color: var(--text-secondary);
  font-size: 15px;
  text-align: center;
  min-height: 22px;
  transition: opacity .3s;
}
.hint.is-hidden { opacity: 0; }

.transcript-box {
  max-width: 640px;
  width: 100%;
  min-height: 26px;
  text-align: center;
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.5;
  padding: 0 16px;
}
.transcript-box .interim { color: var(--text-muted); font-style: italic; }

.reply-card {
  max-width: 640px;
  width: 100%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 20px 24px;
  backdrop-filter: blur(14px);
  font-size: 17px;
  line-height: 1.55;
  text-align: center;
  display: none;
}
.reply-card.is-visible { display: block; }

/* ---------- yes/no confirm chips ---------- */
.confirm-row {
  display: none;
  gap: 14px;
  justify-content: center;
}
.confirm-row.is-visible { display: flex; }
.confirm-btn {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-primary);
  font: 600 15px "Manrope", sans-serif;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: transform .15s, background .15s;
}
.confirm-btn:hover, .confirm-btn:active { transform: scale(0.97); }
.confirm-btn--yes { border-color: rgba(var(--emerald-rgb), 0.4); color: var(--emerald); }
.confirm-btn--no { border-color: rgba(248, 113, 113, 0.35); color: var(--danger); }

/* ---------- footer ---------- */
.kiosk-footer {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 14px; color: var(--text-muted); font-size: 12px;
}
.kiosk-footer a { color: var(--text-muted); text-decoration: none; }

/* ---------- error banner (mic denied, offline, API down) ---------- */
.banner {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 10px 18px; text-align: center;
  background: rgba(248, 113, 113, 0.14);
  border-bottom: 1px solid rgba(248, 113, 113, 0.3);
  color: #fecaca; font-size: 13px;
  transform: translateY(-100%);
  transition: transform .3s ease;
  z-index: 50;
}
.banner.is-visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .ring-wrap * { animation: none !important; }
}