:root {
--bg: #0a0e1a;
--text: #b8b8c4;
--text-bright: #ffffff;
--accent: #6c8cff;
--error: #ff4040;
}

.stage { position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background: radial-gradient(ellipse at 50% 38%, rgba(90,140,255,0.07), transparent 60%), var(--bg); overflow:hidden; }

/* Contorno dinamico de pantalla */
.screen-frame { position:fixed; inset:10px; pointer-events:none; z-index:40; border-radius:26px; border:1.5px solid rgba(140,170,255,0.06); box-shadow: 0 0 18px rgba(140,170,255,0.04), inset 0 0 24px rgba(140,170,255,0.03); transition: border-color 0.45s ease, box-shadow 0.45s ease; }
.screen-frame::before { content:""; position:absolute; inset:-6px; border-radius:32px; border:1px solid rgba(140,170,255,0.10); opacity:0.35; filter:blur(6px); transition:opacity 0.45s ease; }
.screen-frame::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(ellipse at 50% 45%, rgba(140,170,255,0.10), transparent 70%); opacity:0.12; transition:opacity 0.45s ease; filter:blur(10px); }
.stage[data-state="listening"] .screen-frame { border-color: rgba(0,255,136,calc(0.6 * var(--frame-alpha, 1))); box-shadow: 0 0 30px rgba(0,255,136,0.35), inset 0 0 36px rgba(0,255,136,0.15); }
.stage[data-state="listening"] .screen-frame::before { border-color: rgba(0,255,136,0.5); opacity:0.6; }
.stage[data-state="listening"] .screen-frame::after { background:radial-gradient(ellipse at 50% 45%, rgba(0,255,136,0.20), transparent 70%); opacity:0.5; }
.stage[data-state="thinking"] .screen-frame { border-color: rgba(77,163,255,0.20); box-shadow: 0 0 24px rgba(77,163,255,0.12), inset 0 0 28px rgba(77,163,255,0.06); }
.stage[data-state="speaking"] .screen-frame { border-color: rgba(179,136,255,0.35); box-shadow: 0 0 28px rgba(179,136,255,0.20), inset 0 0 32px rgba(179,136,255,0.10); }
.stage[data-state="error"] .screen-frame { border-color: rgba(255,64,64,0.7); box-shadow: 0 0 34px rgba(255,64,64,0.40), inset 0 0 40px rgba(255,64,64,0.18); }
.stage[data-state="error"] .screen-frame::before { border-color: rgba(255,64,64,0.5); opacity:0.55; }
.stage[data-state="error"] .screen-frame::after { background:radial-gradient(ellipse at 50% 45%, rgba(255,64,64,0.22), transparent 70%); opacity:0.5; }


/* ===== Cara SVG ===== */
.face-wrap { position:relative; display:flex; align-items:center; justify-content:center; margin-bottom:7vh; }
.face-svg { display:block; filter: drop-shadow(0 0 14px var(--halo-color, rgba(110,168,255,0.20))); --halo-opacity: 0.35; --smile-opacity: 0.5; --tick-opacity: 0.45; --audio-level: 0; }
.face-halo { position:absolute; width:70%; height:70%; top:15%; left:15%; border-radius:50%; background:radial-gradient(circle, var(--halo-color, rgba(110,168,255,0.25)), transparent 70%); opacity:var(--halo-opacity, 0.35); filter:blur(18px); transition:opacity 0.4s ease; }
.eyes { transform-box: fill-box; transform-origin: center; }
.eye-g { transform-box: fill-box; transform-origin: center 95%; transition:transform 0.35s ease; }
.face-svg .face-smile { opacity:var(--smile-opacity, 0.5); transition:opacity 0.3s ease; }
.face-svg .side-tick { opacity:var(--tick-opacity, 0.45); transition:opacity 0.3s ease; }
.face-svg .think-dots circle { opacity:0; transition:opacity 0.4s ease; }

/* Respiración + audio: escala vertical sutil de ojos */
.stage[data-state="idle"] .eye-g { animation: breathe 5.5s ease-in-out infinite; }
.stage[data-state="listening"] .eye-g { animation: breathe 4.5s ease-in-out infinite; }
.stage[data-state="speaking"] .eye-g { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(calc(1 - 0.05 * (1 - var(--audio-level, 0)))); } }

/* Parpadeo (idle): arcos se aplanan 100-150ms */
.face-svg.blink-anim .eye-g { animation: blinkNow 0.5s ease; }
@keyframes blinkNow { 0%,60%,100% { transform: scaleY(1); } 20% { transform: scaleY(0.10); } 40% { transform: scaleY(1); } }

/* THINKING: puntos se mueven lentamente */
.stage[data-state="thinking"] .think-dots circle { opacity:0.9; animation: dotDrift 2.6s ease-in-out infinite; }
.stage[data-state="thinking"] .think-dots circle:nth-child(1){ animation-delay:0s; }
.stage[data-state="thinking"] .think-dots circle:nth-child(2){ animation-delay:0.35s; }
.stage[data-state="thinking"] .think-dots circle:nth-child(3){ animation-delay:0.7s; }
@keyframes dotDrift { 0%,100% { transform: translateY(0); opacity:0.25; } 50% { transform: translateY(-6px); opacity:1; } }

/* ERROR: pulsos lentos sin cambiar forma */
.stage[data-state="error"] .face-svg { animation: errPulse 2s ease-in-out infinite; }
@keyframes errPulse { 0%,100% { opacity:1; } 50% { opacity:0.55; } }
/* ===== Dimensiones SVG (el archivo externo solo tiene viewBox) ===== */
.face-svg { width:min(340px, 74vw); height:auto; }

/* ===== Nivel de audio: intensidad de halo y opacidad ===== */
.face-wrap { --halo-color:#6FA8FF; --halo-opacity:0.35; }

/* ===== Estado: bullet con color ===== */
.assistant-status { display:flex; align-items:center; justify-content:center; gap:8px; }
.assistant-status::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; flex-shrink:0; }
.stage[data-state="idle"] .assistant-status { color:#8fa8d8; }
.stage[data-state="listening"] .assistant-status { color:#00FF88; animation:statusBlink 1.2s ease-in-out infinite; }
.stage[data-state="thinking"] .assistant-status { color:#4DA3FF; }
.stage[data-state="speaking"] .assistant-status { color:#B388FF; }
.stage[data-state="error"] .assistant-status { color:#FF4040; }
@keyframes statusBlink { 0%,100% { opacity:0.55; } 50% { opacity:1; } }

/* Glow suave del nombre */
.assistant-name { text-shadow:0 0 30px rgba(110,168,255,0.25); }