/* ==========================================================================
   MOVIMIENTO FUTURISTA DEL AVATAR (MAXIQUEEN IA) - CÓDIGO NUEVO
   ========================================================================== */

/* Contenedor base: Levitación magnética y borde de cristal */
.mq-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.95));
    border: 1px solid rgba(34, 211, 238, 0.4);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.2), inset 0 0 10px rgba(34, 211, 238, 0.1);
    animation: mqHoloFloat 4s ease-in-out infinite;
    z-index: 10;
    overflow: hidden; /* Para contener el escáner holográfico */
}

/* Efecto de radar/escáner holográfico girando en el fondo del avatar */
.mq-avatar::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, rgba(34, 211, 238, 0.15), transparent 30%);
    animation: mqRadarSpin 4s linear infinite;
    z-index: -1;
}

/* Antena: Base */
.mq-antenna {
    position: absolute;
    top: -10px;
    width: 3px;
    height: 10px;
    background: #facc15;
    box-shadow: 0 0 8px #facc15;
    z-index: 2;
}

/* Antena: Foco brillante latiendo como un núcleo de energía */
.mq-antenna::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -2px;
    width: 7px;
    height: 7px;
    background: #facc15;
    border-radius: 50%;
    box-shadow: 0 0 12px #facc15;
    animation: mqPulseNeon 1.5s ease-in-out infinite alternate;
}

/* Ojos: Resplandor Cyan y parpadeo glitcheado */
.mq-eye {
    position: absolute;
    top: 14px;
    width: 10px;
    height: 4px;
    background: #22d3ee;
    border-radius: 4px;
    box-shadow: 0 0 12px #22d3ee, 0 0 20px rgba(34, 211, 238, 0.6);
    animation: mqCyberBlink 5s infinite;
    z-index: 2;
}
.mq-eye-left { left: 10px; }
.mq-eye-right { right: 10px; }

/* Boca: Modulación de voz en reposo (cambia entre púrpura y cyan) */
.mq-mouth {
    position: absolute;
    bottom: 12px;
    width: 14px;
    height: 3px;
    background: #c084fc;
    border-radius: 2px;
    box-shadow: 0 0 10px #c084fc;
    animation: mqVoiceWave 2s infinite alternate;
    z-index: 2;
}

/* ==========================================================================
   KEYFRAMES DE ANIMACIÓN FUTURISTA
   ========================================================================== */

/* Levitación: Sube, baja, escala un poco y cambia el color del aura a púrpura */
@keyframes mqHoloFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 15px rgba(34, 211, 238, 0.2), inset 0 0 10px rgba(34, 211, 238, 0.1);
        border-color: rgba(34, 211, 238, 0.4);
    }
    50% {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 10px 25px rgba(192, 132, 252, 0.3), inset 0 0 15px rgba(192, 132, 252, 0.2);
        border-color: rgba(192, 132, 252, 0.6);
    }
}

/* Rotación del escáner de fondo */
@keyframes mqRadarSpin {
    100% { transform: rotate(360deg); }
}

/* Latido del neón de la antena */
@keyframes mqPulseNeon {
    0% { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 18px #facc15; }
}

/* Parpadeo robótico rápido (estilo glitch) */
@keyframes mqCyberBlink {
    0%, 90%, 100% { transform: scaleY(1); opacity: 1; }
    92% { transform: scaleY(0.1); opacity: 0.5; }
    94% { transform: scaleY(1); opacity: 1; }
    96% { transform: scaleY(0.1); opacity: 0.5; }
}

/* Animación sutil de la boca como si procesara datos en silencio */
@keyframes mqVoiceWave {
    0%, 100% { width: 14px; transform: translateX(0); background: #c084fc; box-shadow: 0 0 10px #c084fc; }
    50% { width: 8px; transform: translateX(3px); background: #22d3ee; box-shadow: 0 0 10px #22d3ee; }
}

/* ==========================================================================
   CORRECCIÓN: ELIMINAR ESPACIO VACÍO Y SCROLL EN MÓVILES
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Bloquea el scroll innecesario del fondo de la página */
    body, html, .mq-widget-page {
        overflow: hidden !important;
        height: 100dvh;
        margin: 0;
        padding: 0;
    }

    /* 2. Ajusta el contenedor para que mida exactamente la pantalla */
    .mq-widget-shell {
        height: 100dvh;
        min-height: 100dvh;
        padding: 12px; /* Margen elegante para que no pegue a los bordes */
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0; /* Anula cualquier gap que esté sumando espacio invisible */
    }

    /* 3. Obliga al chat a expandirse y tragarse todo el espacio libre */
    .mq-widget-page .mq-chat {
        height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        margin: 0;
        flex-grow: 1; /* Esta es la clave para que rellene el hueco */
    }
}