/* =====================================================================
   Dottie Voice Mode — world-class immersive overlay
   Three visual iterations, switchable via [data-voice-theme] on #voiceOverlay:
     - "aurora"  : ChatGPT-faithful (immersive dark, liquid gradient orb)
     - "halo"    : Diamond Tours brand (navy/gold, reactive halo rings)
     - "beyond"  : original award-style (frequency ring + depth)
   All amplitude reactivity is driven by --amp (0..1) and state classes
   set from JS. Keep motion on transform/opacity for GPU smoothness.
   ===================================================================== */

:root { --vm-ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* ---------- Overlay shell ---------- */
#voiceOverlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--vm-ease-out);
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}
#voiceOverlay.open { opacity: 1; pointer-events: auto; }
#voiceOverlay[hidden] { display: none; }

/* Backdrops per theme */
#voiceOverlay[data-voice-theme="diamond"] {
  background: radial-gradient(125% 125% at 50% 32%, #0a2144 0%, #061633 58%, #020a1c 100%);
}
#voiceOverlay[data-voice-theme="aurora"] { background: #050608; }
#voiceOverlay[data-voice-theme="halo"] {
  background: radial-gradient(120% 120% at 50% 30%, #16294d 0%, #0c1830 55%, #060c1a 100%);
}
#voiceOverlay[data-voice-theme="beyond"] {
  background: radial-gradient(130% 130% at 50% 40%, #0a1120 0%, #05070f 60%, #02030a 100%);
}

/* ---------- Top bar ---------- */
.vm-topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  box-sizing: border-box;
}
.vm-brand { display: flex; align-items: center; gap: 10px; }
.vm-brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #d4af37; box-shadow: 0 0 12px rgba(212,175,55,.8);
}
.vm-brand-name { color: #fff; font-weight: 700; letter-spacing: .2px; font-size: 15px; }
.vm-status {
  color: rgba(255,255,255,.62);
  font-size: 13px; font-weight: 500; min-height: 18px;
  transition: color 200ms var(--vm-ease-out);
}

/* ---------- Transcript ---------- */
.vm-transcript {
  width: min(680px, 90vw);
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 8px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 8px), transparent 100%);
  scrollbar-width: thin;
}
.vm-line { font-size: 17px; line-height: 1.5; max-width: 92%; }
.vm-line.user { align-self: flex-end; color: #fff; text-align: right; }
.vm-line.dottie { align-self: flex-start; color: rgba(255,255,255,.86); }
.vm-line .who {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; opacity: .5; margin-bottom: 2px;
}
.vm-line.interim { opacity: .55; font-style: italic; }

/* ---------- Orb stage ---------- */
.vm-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: min(46vh, 420px);
}

/* Orb sizing scales with amplitude via --amp (0..1) */
.vm-orb {
  --amp: 0;
  position: relative;
  width: clamp(180px, 34vw, 300px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  will-change: transform, border-radius, filter;
  transform: scale(calc(1 + var(--amp) * 0.22));
  transition: transform 90ms linear;
}

/* ===== Iteration D: DIAMOND SPARK (brand gem + gold sparkle) =====
   The orb becomes the Diamond Tours logo mark: a faceted navy gem that
   gleams and a gold star-sparkle that pulses/rotates with the voice. */
.vm-gem { position: absolute; inset: 0; display: none; }
[data-voice-theme="diamond"] .vm-gem { display: block; }
/* In diamond mode the round orb backdrop is invisible; the SVG gem is the star. */
[data-voice-theme="diamond"] .vm-orb {
  background: none; box-shadow: none; filter: none; border-radius: 0;
  animation: none;
}
[data-voice-theme="diamond"] .vm-orb::after { display: none; }
.vm-gem-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 26px rgba(47,111,192,.55)) drop-shadow(0 0 60px rgba(20,70,150,.35));
}
/* Gentle continuous gleam of the gem; amplitude adds extra brightness/rotation */
.vm-gem-rot {
  transform-box: fill-box; transform-origin: center;
  animation: vm-gem-spin 14s linear infinite;
}
[data-voice-theme="diamond"] .vm-orb {
  filter: brightness(calc(1 + var(--amp) * 0.5)) !important;
}
@keyframes vm-gem-spin {
  0%   { transform: rotate(-4deg); }
  50%  { transform: rotate(4deg); }
  100% { transform: rotate(-4deg); }
}
.vm-glint { animation: vm-glint 3.2s ease-in-out infinite; }
@keyframes vm-glint { 0%,100% { opacity: .35; } 50% { opacity: .85; } }

/* ---- Gem sub-look visibility (data-gem = brilliant | crystal | logo) ---- */
.vm-gem-svg, .vm-glass, .vm-emblem { display: none; }
[data-gem="brilliant"] .vm-gem-svg { display: block; }
[data-gem="crystal"] .vm-glass { display: block; }
[data-gem="logo"] .vm-emblem { display: block; }

/* Crystal Glass: translucent faceted gem */
.vm-glass {
  position: absolute; left: 50%; top: 50%;
  width: 62%; aspect-ratio: 1/1;
  transform: translate(-50%,-50%) rotate(45deg);
  border-radius: 16%;
  background:
    linear-gradient(135deg, rgba(210,235,255,.55) 0%, rgba(90,150,220,.35) 42%, rgba(10,60,120,.55) 100%);
  border: 2px solid rgba(230,245,255,.7);
  box-shadow:
    inset 0 0 40px rgba(255,255,255,.45),
    inset 0 -18px 40px rgba(10,50,110,.6),
    0 0 46px rgba(120,180,255,.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  overflow: hidden;
  animation: vm-gem-spin 16s ease-in-out infinite;
}
.vm-glass::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
}
.vm-glass-hi {
  position: absolute; top: 10%; left: 14%; width: 34%; height: 34%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 70%);
  border-radius: 50%;
}
.vm-glass-hi2 {
  position: absolute; bottom: 16%; right: 18%; width: 20%; height: 20%;
  background: radial-gradient(circle, rgba(180,220,255,.8), transparent 70%);
  border-radius: 50%;
}

/* Logo Faithful: the actual emblem art */
.vm-emblem {
  position: absolute; left: 50%; top: 52%;
  width: 74%; height: auto;
  transform: translate(-50%,-50%) scale(calc(1 + var(--amp) * 0.14));
  transition: transform 90ms linear;
  filter: drop-shadow(0 0 22px rgba(47,111,192,.6)) drop-shadow(0 0 48px rgba(20,70,150,.4));
}
/* the emblem already includes the gold sparkle, so hide the synthetic one */
[data-gem="logo"] .vm-spark { display: none; }

/* Gold star-sparkle at the top corner of the gem, like the logo's dotted i */
.vm-spark {
  position: absolute;
  top: -6%; left: 50%;
  width: 42%; aspect-ratio: 1/1;
  transform: translate(-50%, -50%) scale(calc(0.85 + var(--amp) * 0.9));
  transition: transform 90ms linear;
  filter: drop-shadow(0 0 14px rgba(244,165,43,.9)) drop-shadow(0 0 30px rgba(244,165,43,.55));
}
.vm-spark svg { width: 100%; height: 100%; overflow: visible; }
.vm-star {
  transform-box: fill-box; transform-origin: center;
  animation: vm-star-spin 9s linear infinite;
}
@keyframes vm-star-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.vm-star-core { animation: vm-star-core 2.4s ease-in-out infinite; }
@keyframes vm-star-core { 0%,100% { opacity: .7; r: 8; } 50% { opacity: 1; r: 11; } }
#voiceOverlay.state-speaking[data-voice-theme="diamond"] .vm-star { animation-duration: 4s; }
#voiceOverlay.state-user[data-voice-theme="diamond"] .vm-spark { filter: drop-shadow(0 0 22px rgba(244,165,43,1)) drop-shadow(0 0 44px rgba(244,165,43,.7)); }

/* ===== Iteration A: AURORA (liquid gradient) ===== */
[data-voice-theme="aurora"] .vm-orb {
  background:
    radial-gradient(60% 60% at 38% 32%, #a7e9ff 0%, rgba(167,233,255,0) 60%),
    radial-gradient(70% 70% at 68% 70%, #7b6cff 0%, rgba(123,108,255,0) 62%),
    conic-gradient(from 120deg, #59c2ff, #7b6cff, #35e0c8, #59c2ff);
  filter: blur(2px) saturate(1.15);
  box-shadow: 0 0 90px 10px rgba(90,140,255,.45), inset 0 0 60px rgba(255,255,255,.25);
  animation: vm-liquid 7s ease-in-out infinite;
}
[data-voice-theme="aurora"] .vm-orb::after {
  content: ""; position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,170,255,.35) 0%, transparent 65%);
  filter: blur(14px);
  animation: vm-liquid 9s ease-in-out infinite reverse;
}
@keyframes vm-liquid {
  0%,100% { border-radius: 52% 48% 46% 54% / 50% 54% 46% 50%; }
  33%     { border-radius: 46% 54% 58% 42% / 56% 44% 56% 44%; }
  66%     { border-radius: 56% 44% 42% 58% / 44% 58% 42% 56%; }
}

/* ===== Iteration B: HALO (brand navy/gold rings) ===== */
[data-voice-theme="halo"] .vm-orb {
  background:
    radial-gradient(55% 55% at 42% 38%, #ffe9a8 0%, rgba(255,233,168,0) 58%),
    radial-gradient(circle at 50% 50%, #1c3a6e 0%, #0f2246 70%, #0a1834 100%);
  box-shadow: 0 0 70px 6px rgba(212,175,55,.35), inset 0 0 50px rgba(212,175,55,.18);
  animation: vm-breathe 5s ease-in-out infinite;
}
[data-voice-theme="halo"] .vm-ring {
  position: absolute; inset: 0; margin: auto;
  width: clamp(180px, 34vw, 300px); aspect-ratio: 1/1;
  border-radius: 50%;
  border: 2px solid rgba(212,175,55,.55);
  transform: scale(calc(1.18 + var(--amp) * 0.5));
  opacity: calc(0.5 + var(--amp) * 0.5);
  transition: transform 110ms linear, opacity 110ms linear;
}
[data-voice-theme="halo"] .vm-ring.r2 { border-color: rgba(120,170,255,.4); transform: scale(calc(1.4 + var(--amp) * 0.8)); }
[data-voice-theme="halo"] .vm-ring.r3 { border-color: rgba(255,255,255,.14); transform: scale(calc(1.65 + var(--amp) * 1.1)); }
/* rings only visible for halo theme */
.vm-ring { display: none; }
[data-voice-theme="halo"] .vm-ring { display: block; }

/* ===== Iteration C: BEYOND (frequency ring + core) ===== */
[data-voice-theme="beyond"] .vm-orb {
  background:
    radial-gradient(50% 50% at 45% 40%, #eafff8 0%, rgba(53,224,200,.15) 55%, transparent 70%),
    radial-gradient(circle at 50% 55%, #35e0c8 0%, #1f8fd4 55%, #2a2f7a 100%);
  box-shadow: 0 0 80px 8px rgba(53,224,200,.4), inset 0 0 50px rgba(255,255,255,.28);
  filter: saturate(1.2);
  animation: vm-breathe 4.5s ease-in-out infinite;
}
.vm-bars { position: absolute; inset: 0; margin: auto; pointer-events: none; display: none; }
[data-voice-theme="beyond"] .vm-bars { display: block; }

@keyframes vm-breathe {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.12); }
}

/* State tints on the status word */
#voiceOverlay.state-listening .vm-status { color: #8fd0ff; }
#voiceOverlay.state-user .vm-status { color: #fff; }
#voiceOverlay.state-thinking .vm-status { color: rgba(255,255,255,.6); }
#voiceOverlay.state-speaking .vm-status { color: #ffe29a; }

/* When Dottie or user is active, intensify the orb glow */
#voiceOverlay.state-user .vm-orb,
#voiceOverlay.state-speaking .vm-orb { animation-duration: 3.2s; }

/* ---------- Controls ---------- */
.vm-controls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 20px 0 34px;
  box-sizing: border-box;
}
.vm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; color: #fff;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  transition: transform 160ms var(--vm-ease-out), background 160ms var(--vm-ease-out);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vm-btn:hover { background: rgba(255,255,255,.2); }
.vm-btn:active { transform: scale(0.94); }
.vm-btn svg { width: 24px; height: 24px; }
.vm-btn.secondary { width: 56px; height: 56px; }
.vm-btn.end {
  width: 68px; height: 68px;
  background: #e5484d;
  box-shadow: 0 8px 24px rgba(229,72,77,.4);
}
.vm-btn.end:hover { background: #f05a5f; }
.vm-btn.muted { background: rgba(229,72,77,.28); }
.vm-btn.muted:hover { background: rgba(229,72,77,.38); }
.vm-btn-label {
  position: absolute; margin-top: 74px; font-size: 11px; color: rgba(255,255,255,.5);
  pointer-events: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .vm-line { font-size: 16px; }
  .vm-orb, [data-voice-theme="halo"] .vm-ring { width: clamp(160px, 60vw, 240px); }
  .vm-controls { gap: 20px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-voice-theme] .vm-orb,
  [data-voice-theme] .vm-orb::after { animation: none !important; }
  .vm-orb { transition: transform 140ms var(--vm-ease-out); }
}