/* Ambient Voice State — JDS Light state MP4 videos
 * Per JDS rule: "VOICE AVATAR: NEVER build the JBIQ avatar using CSS divs,
 * colored dots, or HTML elements. Voice screen: use <video autoplay loop muted
 * playsinline> with CDN MP4 from get_assets('states')."
 *
 * Usage in HTML:
 *   <div class="voice-stage" data-state="idle">
 *     <video class="voice-state idle"      src="<idle MP4>"      autoplay loop muted playsinline></video>
 *     <video class="voice-state listening" src="<listening MP4>" autoplay loop muted playsinline></video>
 *     <video class="voice-state thinking"  src="<thinking MP4>"  autoplay loop muted playsinline></video>
 *     <video class="voice-state speaking"  src="<speaking MP4>"  autoplay loop muted playsinline></video>
 *   </div>
 *
 * Or use the JBIQ.mountVoiceStage(el, 'light' | 'dark') helper that ships with jbiq-voice.js.
 */

.voice-stage {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-stage.size-sm { width: 80px; height: 80px; }
.voice-stage.size-lg { width: 280px; height: 280px; }

.voice-state {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
  background: transparent;
}

.voice-stage[data-state="idle"]      .voice-state.idle      { opacity: 1; }
.voice-stage[data-state="listening"] .voice-state.listening { opacity: 1; }
.voice-stage[data-state="thinking"]  .voice-state.thinking  { opacity: 1; }
.voice-stage[data-state="speaking"]  .voice-state.speaking  { opacity: 1; }

/* ============= Backwards compat shim — old `.ambient-glow` selector =============
 * Prevents existing markup from breaking while we migrate. Falls back to a
 * subtle JDS pulse using primary-50 — but the recommended path is to migrate
 * markup to .voice-stage with MP4 videos.
 */
.ambient-glow {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
}
.ambient-glow.size-sm { width: 80px; height: 80px; }
.ambient-glow .orb,
.ambient-glow .halo,
.ambient-glow .halo.h2 {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
}
.ambient-glow .orb {
  background: var(--primary-50);
  filter: blur(2px);
  opacity: 0.85;
  transition: background 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}
.ambient-glow .halo {
  inset: 0;
  background: var(--primary-20);
  opacity: 0.5;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ambient-glow .halo.h2 {
  inset: -20px;
  background: var(--primary-20);
  opacity: 0.3;
}
@keyframes ambientBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.ambient-glow[data-state="idle"] .orb { animation: ambientBreath 4s ease-in-out infinite; }
.ambient-glow[data-state="listening"] .orb {
  background: var(--sparkle-50);
  animation: ambientBreath 0.8s ease-in-out infinite;
}
.ambient-glow[data-state="thinking"] .orb {
  background: var(--surface-bold);
  animation: ambientBreath 1.6s ease-in-out infinite;
}
.ambient-glow[data-state="speaking"] .orb {
  background: var(--primary-50);
  animation: ambientBreath 0.6s ease-in-out infinite;
}