/**
 * 📞 Voice Call Modal v2.0 - Refactorizado con Sistema de Tema
 *
 * USANDO VARIABLES DE theme.css (responde automáticamente a modo claro/oscuro)
 * Modos visuales: Character.AI y WhatsApp Fullscreen
 * Compatible con voice-call.js para switching dinámico
 *
 * MODOS DISPONIBLES:
 * - Character.AI: Interfaz centrada en branding con gradientes
 * - WhatsApp: Experiencia fullscreen con avatar como fondo
 *
 * ESTRUCTURA:
 * 1. Base Voice Call Overlay (común para ambos modos)
 * 2. Modo Character.AI (brand-focused)
 * 3. Modo WhatsApp (fullscreen experience)
 * 4. Voice Activity Indicators (estados de voz)
 * 5. Responsive Design
 * 6. Animations & Transitions
 */

/* =============================================
   📞 BASE VOICE CALL OVERLAY
   ============================================= */

/* Override del call-overlay base cuando está en modo específico */
.call-overlay[class*="voice-mode"] {
    /* Pantalla completa para modos específicos */
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    /* Transiciones suaves */
    transition: all 250ms ease-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.call-overlay[class*="voice-mode"].active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Content container base para modos específicos */
.call-overlay[class*="voice-mode"] .call-content {
    position: relative;
    z-index: 10;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 1.5rem;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
}

/* =============================================
   🤖 MODO CHARACTER.AI STYLE
   ============================================= */
.call-overlay.voice-mode-character {
    /* Gradiente dinámico usando variables de tema */
    background: radial-gradient(
        ellipse at top,
        var(--theme-voice-char-secondary) 0%,
        var(--theme-voice-char-primary) 50%,
        var(--theme-voice-char-accent) 100%
    );
}

.call-overlay.voice-mode-character .call-content {
    justify-content: center;
    max-width: 400px;
    width: 90%;
    margin: 0 auto;
    animation: voiceSlideInCharacter 350ms ease-out;
}

/* Brand Section - Visible solo en Character.AI */
.call-overlay.voice-mode-character .voice-brand-section {
    display: block;
    margin-bottom: 3rem;
}

.call-overlay.voice-mode-character .voice-brand-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--theme-overlay-light);
    backdrop-filter: blur(10px);
    border: 3px solid var(--theme-overlay-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 3rem;
    color: var(--theme-text-primary);
    box-shadow: 0 8px 32px var(--theme-overlay-heavy);
    position: relative;
    overflow: hidden;
}

.call-overlay.voice-mode-character .voice-brand-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.call-overlay.voice-mode-character .voice-brand-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--theme-text-primary);
    z-index: 1;
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Ocultar fallback cuando imagen se carga */
.call-overlay.voice-mode-character
    .voice-brand-image:not([style*="display: none"])
    + .voice-brand-fallback {
    opacity: 0;
    pointer-events: none;
}

.call-overlay.voice-mode-character .voice-brand-name {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

/* Ocultar avatar container en modo Character.AI */
.call-overlay.voice-mode-character .call-avatar-container {
    display: none;
}

/* Estilos específicos para textos en Character.AI */
.call-overlay.voice-mode-character .call-title {
    color: var(--theme-text-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.call-overlay.voice-mode-character .call-status {
    color: var(--theme-text-secondary);
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 3rem;
}

/* =============================================
   📱 MODO WHATSAPP FULLSCREEN STYLE
   ============================================= */
.call-overlay.voice-mode-whatsapp {
    /* Overlay base usando variables de tema */
    background: var(--theme-voice-wa-overlay);
}

/* Avatar como fondo de pantalla completa */
.call-overlay.voice-mode-whatsapp.has-avatar {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.call-overlay.voice-mode-whatsapp.has-avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--theme-overlay-heavy);
    backdrop-filter: blur(1px) brightness(0.8);
    -webkit-backdrop-filter: blur(1px) brightness(0.8);
}

/* Ocultar brand section en WhatsApp */
.call-overlay.voice-mode-whatsapp .voice-brand-section {
    display: none;
}

/* Ocultar avatar container (ya está de fondo) */
.call-overlay.voice-mode-whatsapp .call-avatar-container {
    display: none;
}

/* Info centrada con sombras para legibilidad */
.call-overlay.voice-mode-whatsapp .call-info {
    margin-top: auto;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px var(--theme-overlay-heavy);
}

.call-overlay.voice-mode-whatsapp .call-title {
    color: var(--theme-text-primary);
    text-shadow: 0 2px 8px var(--theme-overlay-heavy);
    font-size: 1.75rem;
    font-weight: 600;
}

.call-overlay.voice-mode-whatsapp .call-status {
    color: var(--theme-text-secondary);
    text-shadow: 0 2px 8px var(--theme-overlay-heavy);
    font-size: 1.125rem;
    font-weight: 500;
    opacity: 0.9;
}

/* Controles con margen para safe area */
.call-overlay.voice-mode-whatsapp .call-controls {
    margin-bottom: calc(2rem + env(safe-area-inset-bottom));
}

/* =============================================
   🎤 VOICE ACTIVITY INDICATORS
   ============================================= */

/* Voice Activity específico para modos de llamada */
.call-overlay[class*="voice-mode"] .voice-activity {
    position: absolute;
    top: calc(1rem + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1020;
}

.call-overlay[class*="voice-mode"] .voice-activity-content {
    width: 24px;
    height: 24px;
    background: var(--theme-voice-activity);
    border-radius: 50%;
    border: 2px solid var(--theme-overlay-medium);
    box-shadow: 0 2px 8px rgba(0, 168, 132, 0.4),
        0 0 0 4px rgba(0, 168, 132, 0.1);
    animation: voiceActivityPulse 2s infinite ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-overlay[class*="voice-mode"] .voice-activity-content::after {
    content: "";
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    opacity: 0.9;
}

/* Estado thinking */
.call-overlay[class*="voice-mode"] .voice-activity-content.thinking {
    background: var(--theme-voice-thinking);
    box-shadow: 0 2px 8px rgba(255, 171, 0, 0.4),
        0 0 0 4px rgba(255, 171, 0, 0.1);
    animation: voiceThinkingPulse 1.5s infinite ease-in-out;
}

/* Voice Activity Label */
.call-overlay[class*="voice-mode"] .voice-activity-label {
    font-size: 0.75rem;
    color: var(--theme-text-primary);
    font-weight: 500;
    margin-top: 4px;
    text-shadow: 0 1px 2px var(--theme-overlay-heavy);
}

/* =============================================
   🎛️ CALL CONTROLS ENHANCEMENTS
   ============================================= */

/* Mejoras para botones en modos específicos */
.call-overlay[class*="voice-mode"] .call-control-btn {
    transition: all 150ms ease-out;
    backdrop-filter: blur(10px);
    border: 2px solid var(--theme-overlay-light);
}

.call-overlay[class*="voice-mode"] .call-control-btn:hover {
    transform: scale(1.05);
    border-color: var(--theme-overlay-medium);
}

.call-overlay[class*="voice-mode"] .call-control-btn:active {
    transform: scale(0.95);
}

/* =============================================
   🎬 ANIMATIONS ESPECÍFICAS DE VOICE
   ============================================= */

@keyframes voiceSlideInCharacter {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes voiceFadeInWhatsApp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes voiceActivityPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 168, 132, 0.4),
            0 0 0 4px rgba(0, 168, 132, 0.1);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 168, 132, 0.6),
            0 0 0 8px rgba(0, 168, 132, 0.2);
    }
}

@keyframes voiceThinkingPulse {
    0%,
    100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* =============================================
   📱 RESPONSIVE DESIGN ESPECÍFICO
   ============================================= */

@media (max-width: 480px) {
    .call-overlay.voice-mode-character .call-content {
        padding: 1.5rem;
    }

    .call-overlay.voice-mode-character .voice-brand-name {
        font-size: 1.75rem;
    }

    .call-overlay.voice-mode-character .voice-brand-logo {
        width: 100px;
        height: 100px;
    }

    .call-overlay.voice-mode-whatsapp .call-content {
        padding: 1.5rem 1rem;
    }

    .call-overlay.voice-mode-whatsapp .call-title {
        font-size: 1.5rem;
    }

    .call-overlay.voice-mode-whatsapp .call-status {
        font-size: 1rem;
    }

    .call-overlay[class*="voice-mode"] .voice-activity {
        top: calc(0.75rem + env(safe-area-inset-top));
    }
}

@media (min-width: 768px) {
    .call-overlay.voice-mode-character .call-content {
        max-width: 500px;
    }

    .call-overlay.voice-mode-whatsapp .call-title {
        font-size: 2rem;
    }

    .call-overlay.voice-mode-whatsapp .call-status {
        font-size: 1.25rem;
    }
}

/* =============================================
   🔧 UTILIDADES Y OVERRIDES
   ============================================= */

/* Asegurar que voice activity esté visible solo cuando call overlay está activo */
.call-overlay:not(.active) .voice-activity {
    display: none !important;
}

.call-overlay.active[class*="voice-mode"] .voice-activity {
    display: flex;
}

/* Ocultar elementos no necesarios en modos específicos */
.call-overlay[class*="voice-mode"] .welcome-message {
    display: none;
}

/* Clase de utilidad para ocultar elementos */
.voice-mode-hidden {
    display: none !important;
}

.voice-mode-visible {
    display: block !important;
}

/* =============================================
   🎨 THEME ADAPTATIONS
   ============================================= */

/* Adaptaciones adicionales que responden automáticamente al tema */
.call-overlay.voice-mode-character .voice-brand-logo {
    /* En modo claro, el fondo será más translúcido */
    background: var(--theme-overlay-light);
    border-color: var(--theme-overlay-medium);
}

.call-overlay.voice-mode-whatsapp::before {
    /* En modo claro, overlay más claro */
    background: var(--theme-overlay-heavy);
}

/* Text shadows que se adaptan al tema */
.call-overlay.voice-mode-whatsapp .call-title,
.call-overlay.voice-mode-whatsapp .call-status,
.call-overlay[class*="voice-mode"] .voice-activity-label {
    text-shadow: 0 2px 8px var(--theme-overlay-heavy);
}

/* =============================================
   🤖 BOT STATUS - Enhanced Typography
   ============================================= */

.bot-status-text {
    /* 📏 TIPOGRAFÍA MEJORADA - Más prominente */
    font-size: var(--font-size-lg); /* Era var(--font-size-sm) */
    font-weight: var(
        --font-weight-semibold
    ); /* Era var(--font-weight-medium) */
    line-height: 1.3;
    letter-spacing: -0.01em;

    /* 🎨 COLORES - Usando design system existente */
    color: var(--text-primary); /* Color base más visible */
    text-align: center;

    /* 📱 ESPACIADO */
    margin: 0;
    padding: 0.25rem 0;

    /* ✨ EFECTOS VISUALES */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    /* 🔄 TRANSICIONES SUAVES */
    transition: all var(--transition-normal);
}

/* =============================================
   🎨 ESTADOS CON COLORES DEL ROOT
   ============================================= */

/* 🟡 Estado: Pensando */
.bot-status-text.thinking {
    color: var(--color-warning); /* Amarillo del sistema */
    text-shadow: 0 1px 3px rgba(255, 171, 0, 0.3);
}

/* 🔵 Estado: Respondiendo */
.bot-status-text.responding {
    color: var(--color-primary); /* Azul primario del sistema */
    text-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
}

/* 🟢 Estado: Listo/Conectado */
.bot-status-text.ready {
    color: var(--color-success); /* Verde del sistema */
    text-shadow: 0 1px 3px rgba(0, 216, 86, 0.3);
}

/* 🔴 Estado: Error */
.bot-status-text.error {
    color: var(--color-danger); /* Rojo del sistema */
    text-shadow: 0 1px 3px rgba(255, 107, 107, 0.3);
}

/* ⚪ Estado: Conectando */
.bot-status-text.connecting {
    color: var(--text-secondary); /* Gris del sistema */
    text-shadow: 0 1px 3px rgba(134, 150, 160, 0.3);
}

/* =============================================
   ✨ ANIMACIÓN DE PUNTOS SUSPENSIVOS
   ============================================= */

/* 🎭 Contenedor para la animación de puntos */
.bot-status-text .animated-dots {
    display: inline-block;
    position: relative;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
}

/* 🎪 Los tres puntos individuales */
.bot-status-text .animated-dots::after {
    content: "";
    display: inline-block;
    width: 20px; /* Espacio para 3 puntos */
    text-align: left;
    animation: typingDots 1.5s infinite;
}

/* 🌟 Keyframes para la animación de puntos */
@keyframes typingDots {
    0% {
        content: "";
    }
    25% {
        content: ".";
    }
    50% {
        content: "..";
    }
    75% {
        content: "...";
    }
    100% {
        content: "";
    }
}
/* 🟢 Indicador visual del micrófono */
.user-mic-indicator {
    /* Tamaño y forma */
    width: 24px;
    height: 24px;
    border-radius: 50%;

    /* Color verde WhatsApp - Usuario hablando */
    background: rgba(0, 168, 132, 0.95);

    /* Bordes y sombras */
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 168, 132, 0.4),
        0 0 0 4px rgba(0, 168, 132, 0.15);

    /* Animación sutil de pulso */
    animation: userMicPulse 2s infinite ease-in-out;

    /* Posición relativa para punto interno */
    position: relative;
}

/* Punto blanco interno */
.user-mic-indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    opacity: 0.9;
}

/* 📝 Label del usuario */
.user-mic-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

    /* Texto centrado */
    text-align: center;
    white-space: nowrap;

    /* Evitar selección */
    user-select: none;
    -webkit-user-select: none;
}
/* =============================================
   🎨 VARIANTE ALTERNATIVA - Puntos que pulsan
   ============================================= */

/* 🔄 Animación alternativa: puntos que aparecen secuencialmente */
.bot-status-text .pulsing-dots {
    display: inline-block;
}

.bot-status-text .pulsing-dots .dot {
    opacity: 0;
    animation: dotPulse 1.4s infinite;
}

.bot-status-text .pulsing-dots .dot:nth-child(1) {
    animation-delay: 0s;
}

.bot-status-text .pulsing-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.bot-status-text .pulsing-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%,
    20% {
        opacity: 0;
        transform: scale(1);
    }
    40% {
        opacity: 1;
        transform: scale(1.1);
    }
    60%,
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* =============================================
   📱 RESPONSIVE DESIGN - Tamaños adaptativos
   ============================================= */

/* 📱 Mobile: Texto ligeramente más pequeño pero aún prominente */
@media (max-width: 480px) {
    .bot-status-text {
        font-size: var(--font-size-base); /* En lugar de lg */
        font-weight: var(--font-weight-medium);
        padding: 0.125rem 0;
    }
}

/* 💻 Desktop: Texto más grande y espacioso */
@media (min-width: 768px) {
    .bot-status-text {
        font-size: var(--font-size-xl); /* Aún más grande en desktop */
        font-weight: var(--font-weight-semibold);
        padding: 0.375rem 0;
        letter-spacing: -0.02em;
    }
}