/* ==========================================
   YZG STUDIO - VOICE ENGINE (voice.css)
   Animaciones de Audio y Aura de Neón
   ========================================== */

/* 1. EL BOTÓN DEL MICRÓFONO */
.voice-btn { transition: all 0.3s ease; }
.voice-btn.active { color: var(--accent); animation: pulseMic 2s infinite; }
.voice-btn.speaking { color: #fff; animation: pulseMicWhite 2s infinite; }

@keyframes pulseMic { 
  0% { transform: scale(1); text-shadow: 0 0 0px var(--accent); }
  50% { transform: scale(1.1); text-shadow: 0 0 10px var(--accent); }
  100% { transform: scale(1); text-shadow: 0 0 0px var(--accent); }
}
@keyframes pulseMicWhite { 
  0% { transform: scale(1); text-shadow: 0 0 0px #fff; }
  50% { transform: scale(1.1); text-shadow: 0 0 10px #fff; }
  100% { transform: scale(1); text-shadow: 0 0 0px #fff; }
}

/* 2. EFECTOS EN LA CAJA DE TEXTO (INPUT BOX) */
.input-box { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* Modo Listening (Tú hablando) - Azul Índigo */
.input-box.voice-listening {
  border-color: var(--accent) !important;
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.3), inset 0 0 12px rgba(99, 102, 241, 0.1) !important;
  background: rgba(99, 102, 241, 0.05) !important;
}

/* Modo AI Speaking (IA respondiendo) - Blanco Puro */
.input-box.voice-ai-speaking {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 0 32px rgba(255, 255, 255, 0.2), inset 0 0 16px rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* 3. EL EQUALIZADOR DE AUDIO (Oculta el textarea y muestra las barras) */
.voice-equalizer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 12px;
}

.input-box.voice-listening #user-input, 
.input-box.voice-listening #builder-input,
.input-box.voice-ai-speaking #user-input, 
.input-box.voice-ai-speaking #builder-input {
  display: none; /* Ocultamos la caja de texto normal */
}

/* Las barras individuales */
.voice-bar {
  width: 4px;
  height: 4px; /* Altura mínima en silencio */
  border-radius: 4px;
  transition: height 0.1s ease; /* Transición súper rápida para que reaccione al volumen real */
}

/* Color de las barras cuando escuchan (Azul) */
.input-box.voice-listening .voice-bar { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* Color de las barras cuando la IA habla (Blanco) */
.input-box.voice-ai-speaking .voice-bar { background: #fff; box-shadow: 0 0 12px #fff; }

/* 4. ANIMACIÓN BASE (Respiración en Silencio) */
/* Si no hay sonido, las barras hacen una pequeña "respiración" para indicar que están activas */
.voice-equalizer.idle .voice-bar {
  animation: idleBreathe 1.5s ease-in-out infinite alternate;
}
.voice-equalizer.idle .voice-bar:nth-child(2) { animation-delay: 0.2s; }
.voice-equalizer.idle .voice-bar:nth-child(3) { animation-delay: 0.4s; }
.voice-equalizer.idle .voice-bar:nth-child(4) { animation-delay: 0.2s; }
.voice-equalizer.idle .voice-bar:nth-child(5) { animation-delay: 0.6s; }

@keyframes idleBreathe {
  0% { height: 4px; opacity: 0.5; }
  100% { height: 8px; opacity: 1; }
}

/* ==========================================
   SUBTÍTULOS EN VIVO Y TIMER DE SILENCIO
   ========================================== */
.voice-subtitles {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 18, 23, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 8px 16px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--accent-hover);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
  animation: fadeInSub 0.3s ease;
}

.voice-subtitles .sub-text {
  flex: 1;
  font-style: italic;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-subtitles .sub-timer {
  font-family: var(--code-font);
  font-size: 11px;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

@keyframes fadeInSub {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}