/* =========================================================================
   VOICEFI DYNAMIC ISLAND HUD & REACTIVE CHARACTER ANIMATIONS
   Shared between macOS Companion HUD, Mocks, and voicefi.org
   ========================================================================= */

.hud-capsule {
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.65), inset 0 1px 1px 0 rgba(255, 255, 255, 0.25);
  transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
  will-change: transform, border-color, box-shadow;
}

.glass-hud {
  background: rgba(12, 14, 20, 0.92);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
}

/* State Borders matching Native macOS HUD */
.hud-state-idle {
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.hud-state-thinking, .glow-thinking {
  border-color: #A855F7 !important;
}
.hud-state-speaking, .glow-speaking {
  border-color: #06B6D4 !important;
}
.hud-state-listening, .glow-listening {
  border-color: #FF2A2A !important;
}
.hud-state-working, .glow-working {
  border-color: #3B82F6 !important;
}

/* Waveform Audio Bars (HUD Speaking State) */
.wave-bar {
  display: inline-block;
  width: 3px;
  border-radius: 2px;
  animation: wavePulseHud 0.75s ease-in-out infinite alternate;
}
.wave-bar:nth-child(1) { animation-delay: 0.1s; height: 10px; }
.wave-bar:nth-child(2) { animation-delay: 0.3s; height: 16px; }
.wave-bar:nth-child(3) { animation-delay: 0.15s; height: 8px; }
.wave-bar:nth-child(4) { animation-delay: 0.4s; height: 14px; }
.wave-bar:nth-child(5) { animation-delay: 0.25s; height: 10px; }

@keyframes wavePulseHud {
  0% { height: 4px; opacity: 0.4; }
  100% { height: 18px; opacity: 1; }
}

/* =========================================================================
   REACTIVE VOICEFI CHARACTER SVG STYLES & KEYFRAMES
   ========================================================================= */
.vifi-wifi-crown, .vifi-wifi-visor, .vifi-wifi-brim,
.vifi-eyes, .vifi-mouth, .vifi-cradle,
.vifi-stem, .vifi-base-stand {
  stroke: #FFFFFF;
}
.vifi-ear-frame { stroke: #FFFFFF; fill: #000000; }
.vifi-ear-dot   { fill: #FFFFFF; }
.vifi-nose-frame { stroke: #FFFFFF; fill: #000000; }
.vifi-nose-pin   { stroke: #FFFFFF; }

/* Thinking: Wi-Fi Crown / Laser Arcs Pulse */
@keyframes wifiLaserCrown {
  0%, 100% { stroke: #ff1a38; stroke-width: 18px; filter: drop-shadow(0 0 3px rgba(255, 0, 51, 0.4)); opacity: 0.85; }
  50% { stroke: #ff0033; stroke-width: 21px; filter: drop-shadow(0 0 6px #ff0033) drop-shadow(0 0 14px rgba(255, 0, 51, 0.65)); opacity: 1; }
}
@keyframes wifiLaserVisor {
  0%, 100% { stroke: #ff1a38; stroke-width: 17px; filter: drop-shadow(0 0 2px rgba(255, 0, 51, 0.35)); opacity: 0.8; }
  40% { stroke: #ff0033; stroke-width: 20px; filter: drop-shadow(0 0 5px #ff0033) drop-shadow(0 0 12px rgba(255, 0, 51, 0.6)); opacity: 1; }
}
@keyframes wifiLaserBrim {
  0%, 100% { stroke: #ff1a38; stroke-width: 16px; filter: drop-shadow(0 0 2px rgba(255, 0, 51, 0.3)); opacity: 0.75; }
  30% { stroke: #ff0033; stroke-width: 19px; filter: drop-shadow(0 0 4px #ff0033) drop-shadow(0 0 10px rgba(255, 0, 51, 0.55)); opacity: 1; }
}
.vifi-active-thinking .vifi-wifi-crown { animation: wifiLaserCrown 1.35s infinite ease-in-out; }
.vifi-active-thinking .vifi-wifi-visor { animation: wifiLaserVisor 1.35s infinite ease-in-out 0.14s; }
.vifi-active-thinking .vifi-wifi-brim  { animation: wifiLaserBrim 1.35s infinite ease-in-out 0.28s; }

/* Listening: Headphone Ears Red Glow + Radiating Waves */
@keyframes earRedGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 0, 51, 0.4)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 8px #ff0033) drop-shadow(0 0 16px rgba(255, 0, 51, 0.7)); transform: scale(1.06); }
}
.vifi-active-listening .vifi-ear-left   { animation: earRedGlowPulse 1.2s infinite ease-in-out; transform-origin: 124px 220px; }
.vifi-active-listening .vifi-ear-right  { animation: earRedGlowPulse 1.2s infinite ease-in-out 0.1s; transform-origin: 388px 220px; }
.vifi-active-listening .vifi-ear-left .vifi-ear-frame,
.vifi-active-listening .vifi-ear-right .vifi-ear-frame { stroke: #ff0033 !important; }
.vifi-active-listening .vifi-ear-dot-l,
.vifi-active-listening .vifi-ear-dot-r  { fill: #ff0033 !important; filter: drop-shadow(0 0 6px #ff0033); }
.vifi-active-listening .vifi-ear-waves  { display: block !important; }
.vifi-ear-waves { display: none; }

/* Speaking: Waveform Smile Mouth & Cradle Jaw Articulation */
@keyframes mouthSpeakingMotion {
  0%, 100% { d: path("M 230 320 Q 256 336 282 320"); stroke: #ff1a38; stroke-width: 7px; filter: drop-shadow(0 0 4px rgba(255, 0, 51, 0.5)); }
  25% { d: path("M 226 318 Q 256 358 286 318"); stroke: #ff0033; stroke-width: 9.5px; filter: drop-shadow(0 0 8px #ff0033) drop-shadow(0 0 16px rgba(255, 0, 51, 0.8)); }
  50% { d: path("M 228 322 Q 256 342 284 322"); stroke: #ff1a38; stroke-width: 8px; filter: drop-shadow(0 0 6px rgba(255, 0, 51, 0.6)); }
  75% { d: path("M 224 316 Q 256 364 288 316"); stroke: #ff0033; stroke-width: 10px; filter: drop-shadow(0 0 9px #ff0033) drop-shadow(0 0 18px rgba(255, 0, 51, 0.85)); }
}
@keyframes jawSpeakingMotion {
  0%, 100% { stroke: #ff1a38; stroke-width: 12px; filter: drop-shadow(0 0 3px rgba(255, 0, 51, 0.4)); }
  25% { stroke: #ff0033; stroke-width: 14px; filter: drop-shadow(0 0 6px #ff0033) drop-shadow(0 0 12px rgba(255, 0, 51, 0.7)); }
  50% { stroke: #ff1a38; stroke-width: 12.5px; filter: drop-shadow(0 0 4px rgba(255, 0, 51, 0.5)); }
  75% { stroke: #ff0033; stroke-width: 15px; filter: drop-shadow(0 0 7px #ff0033) drop-shadow(0 0 14px rgba(255, 0, 51, 0.75)); }
}
.vifi-active-speaking .vifi-mouth  { animation: mouthSpeakingMotion 0.85s infinite ease-in-out; }
.vifi-active-speaking .vifi-cradle { animation: jawSpeakingMotion 0.85s infinite ease-in-out; }

/* Working: Cyber Eyes & USB Data Pin Scan */
@keyframes cyberEyeRedScan {
  0%, 100% { stroke: #ff1a38; stroke-width: 8px; filter: drop-shadow(0 0 3px rgba(255, 0, 51, 0.5)); }
  50% { stroke: #ff0033; stroke-width: 10px; filter: drop-shadow(0 0 8px #ff0033) drop-shadow(0 0 16px rgba(255, 0, 51, 0.8)); }
}
@keyframes usbDataPinRedBlink {
  0%, 100% { stroke: #ff1a38; opacity: 0.6; }
  20%, 40%, 60%, 80% { stroke: #ffffff; opacity: 1; filter: drop-shadow(0 0 5px #ff0033); }
}
.vifi-active-working .vifi-eyes { animation: cyberEyeRedScan 1.1s infinite ease-in-out; }
.vifi-active-working .vifi-nose-pin { animation: usbDataPinRedBlink 0.6s infinite linear; }
.vifi-active-working .vifi-nose-frame { stroke: #ff0033 !important; filter: drop-shadow(0 0 6px #ff0033); }

/* Idle: Standby Luminescence */
@keyframes idleStandby {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)); }
}
.vifi-active-idle { animation: idleStandby 3.5s infinite ease-in-out; }

/* Responsive Simulator Desktop Side-by-Side Grid Layout */
@media (min-width: 820px) {
  #simFloatingBtnWrapper {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin-bottom: 0 !important;
  }
  .grid-cols-1.lg\:grid-cols-12,
  .grid-cols-1.md\:grid-cols-12 {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    align-items: stretch !important;
  }
  .lg\:col-span-5,
  .md\:col-span-5 {
    grid-column: span 5 / span 5 !important;
  }
  .lg\:col-span-7,
  .md\:col-span-7 {
    grid-column: span 7 / span 7 !important;
  }
}