:root {
    --md-background: #0b1326;
    --md-on-background: #dae2fd;
    --md-surface-container-highest: #2d3449;
    --md-surface-tint: #b8c3ff;
    --md-on-surface: #dae2fd;
    --md-surface: #0b1326;
    --md-primary: #b8c3ff;
    --md-primary-container: #2e5bff;
    --md-tertiary: #dab9ff;
    --md-outline: #8e90a2;
    --md-on-secondary-container: #00616d;
    --md-outline-variant: #434656;
    --md-surface-container: #171f33;
    --md-on-primary-container: #efefff;
    --md-on-primary: #002388;
    --md-surface-container-high: #222a3d;
    --md-surface-container-lowest: #060e20;
    --md-secondary-container: #00e3fd;
    --md-secondary: #bdf4ff;
    --md-on-surface-variant: #c4c5d9;
    --md-surface-variant: #2d3449;
    --md-surface-container-low: #131b2e;
}

html.light {
    --md-background: #f8f9fa;
    --md-on-background: #171f33;
    --md-surface-container-highest: #e1e3e9;
    --md-surface-tint: #3f51b5;
    --md-on-surface: #171f33;
    --md-surface: #ffffff;
    --md-primary: #3f51b5;
    --md-primary-container: #c5cae9;
    --md-tertiary: #7b1fa2;
    --md-outline: #79747e;
    --md-on-secondary-container: #004f58;
    --md-outline-variant: #cac4d0;
    --md-surface-container: #f1f3f9;
    --md-on-primary-container: #1a237e;
    --md-on-primary: #ffffff;
    --md-surface-container-high: #ffffff;
    --md-surface-container-lowest: #f1f3f9;
    --md-secondary-container: #b2ebf2;
    --md-secondary: #0097a7;
    --md-on-surface-variant: #49454f;
    --md-surface-variant: #e7e7ec;
    --md-surface-container-low: #f8f9fa;
}
html.light .agent-core {
    border: 2px solid rgba(184, 195, 255, 0.3);
}

html.light .agent-core:not([class*="agent-happy"]):not([class*="agent-sad"]):not([class*="agent-angry"]):not([class*="agent-surprised"]):not([class*="agent-inlove"]):not([class*="agent-sleeping"]):not([class*="agent-scared"]):not([class*="agent-hysterical"]):not([class*="agent-suspicious"]):not([class*="agent-shy"]):not([class*="agent-smug"]):not([class*="agent-ashamed"]):not([class*="agent-crying"]):not([class*="agent-blushing"]):not([class*="agent-dizzy"]) {
    background: radial-gradient(circle at center, rgba(184, 195, 255, 0.2) 0%, #0b1326 75%) !important;
    box-shadow: 0 10px 30px rgba(11, 19, 38, 0.2), inset 0 0 80px rgba(184, 195, 255, 0.08) !important;
}
.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }

        @keyframes voiceBar {
            0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
            50%       { transform: scaleY(1.0); opacity: 1.0; }
        }

        
        .agent-core {
            background: radial-gradient(circle at center, rgba(184, 195, 255, 0.15) 0%, rgba(11, 19, 38, 0) 70%);
            box-shadow: inset 0 0 100px rgba(184, 195, 255, 0.05);
            transition: background 0.6s ease, box-shadow 0.6s ease;
        }

        /* --- Fondo de la cara por estado de ánimo --- */

        /* Feliz: brillo cálido amarillo dorado */
        .agent-happy.agent-core {
            background: radial-gradient(circle at center, rgba(255, 220, 80, 0.30) 0%, rgba(255, 180, 0, 0.05) 70%);
            box-shadow: inset 0 0 120px rgba(255, 220, 80, 0.15);
        }

        /* Triste: azul profundo y frío */
        .agent-sad.agent-core {
            background: radial-gradient(circle at center, rgba(70, 130, 220, 0.30) 0%, rgba(30, 60, 150, 0.05) 70%);
            box-shadow: inset 0 0 120px rgba(70, 130, 220, 0.15);
        }

        /* Enojado: rojo feroz */
        .agent-angry.agent-core {
            background: radial-gradient(circle at center, rgba(255, 70, 70, 0.35) 0%, rgba(180, 20, 20, 0.05) 70%);
            box-shadow: inset 0 0 120px rgba(255, 70, 70, 0.20);
        }

        /* Sorprendido: blanco-cian eléctrico */
        .agent-surprised.agent-core {
            background: radial-gradient(circle at center, rgba(0, 230, 255, 0.30) 0%, rgba(0, 100, 200, 0.05) 70%);
            box-shadow: inset 0 0 120px rgba(0, 230, 255, 0.15);
        }

        /* Enamorado: rosa profundo romántico */
        .agent-inlove.agent-core {
            background: radial-gradient(circle at center, rgba(255, 80, 150, 0.30) 0%, rgba(200, 20, 80, 0.05) 70%);
            box-shadow: inset 0 0 120px rgba(255, 80, 150, 0.20);
        }

        /* Durmiendo: índigo oscuro y calmado */
        .agent-sleeping.agent-core {
            background: radial-gradient(circle at center, rgba(100, 80, 200, 0.25) 0%, rgba(30, 20, 80, 0.08) 70%);
            box-shadow: inset 0 0 120px rgba(100, 80, 200, 0.10);
        }

        /* Asustado: miedo frío cian-púrpura */
        .agent-scared.agent-core {
            background: radial-gradient(circle at center, rgba(130, 180, 255, 0.25) 0%, rgba(20, 30, 80, 0.08) 70%);
            box-shadow: inset 0 0 120px rgba(130, 180, 255, 0.15);
        }

        /* Histérico: vibración de pánico verde-amarillento enfermizo */
        .agent-hysterical.agent-core {
            background: radial-gradient(circle at center, rgba(180, 255, 80, 0.28) 0%, rgba(80, 150, 0, 0.05) 70%);
            box-shadow: inset 0 0 120px rgba(180, 255, 80, 0.18);
        }

        /* Sospechoso: verde oliva turbio */
        .agent-suspicious.agent-core {
            background: radial-gradient(circle at center, rgba(150, 160, 50, 0.25) 0%, rgba(60, 70, 10, 0.08) 70%);
            box-shadow: inset 0 0 120px rgba(150, 160, 50, 0.15);
        }

        /* Tímido: rosa ruborizado delicado */
        .agent-shy.agent-core {
            background: radial-gradient(circle at center, rgba(255, 150, 180, 0.28) 0%, rgba(200, 80, 120, 0.05) 70%);
            box-shadow: inset 0 0 120px rgba(255, 150, 180, 0.18);
        }

        /* Presumido: rico púrpura-violeta */
        .agent-smug.agent-core {
            background: radial-gradient(circle at center, rgba(160, 80, 255, 0.28) 0%, rgba(80, 20, 180, 0.05) 70%);
            box-shadow: inset 0 0 120px rgba(160, 80, 255, 0.18);
        }

        /* Apenado: terracota/naranja cálido */
        .agent-ashamed.agent-core {
            background: radial-gradient(circle at center, rgba(255, 130, 70, 0.28) 0%, rgba(180, 60, 20, 0.05) 70%);
            box-shadow: inset 0 0 120px rgba(255, 130, 70, 0.18);
        }

        /* Llorando: azul-plateado acuoso */
        .agent-crying.agent-core {
            background: radial-gradient(circle at center, rgba(140, 190, 255, 0.30) 0%, rgba(60, 110, 200, 0.05) 70%);
            box-shadow: inset 0 0 120px rgba(140, 190, 255, 0.18);
        }

        /* Sonrojado: coral-rosa vibrante */
        .agent-blushing.agent-core {
            background: radial-gradient(circle at center, rgba(255, 100, 130, 0.32) 0%, rgba(200, 50, 80, 0.05) 70%);
            box-shadow: inset 0 0 120px rgba(255, 100, 130, 0.22);
        }

        /* Mareado: verde giratorio nauseabundo */
        .agent-dizzy.agent-core {
            background: radial-gradient(circle at center, rgba(100, 255, 120, 0.35) 0%, rgba(10, 100, 30, 0.08) 70%);
            box-shadow: inset 0 0 120px rgba(100, 255, 120, 0.25);
            animation: dizzyFaceSway 4s infinite ease-in-out;
        }
        
        .eye-container {
            position: relative;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid rgba(0, 0, 0, 0.1);
            box-shadow: 
                inset 5px 5px 15px rgba(0, 0, 0, 0.2),
                0 0 20px rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: all 0.3s ease;
            z-index: 2;
        }
        
        .pupil {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            background: #6b4423; /* Iris marrón */
            box-shadow: 0 0 10px rgba(107, 68, 35, 0.8), inset 0 0 5px #3a2210;
            position: absolute;
            transition: transform 0.1s ease-out;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Círculo negro dentro (pupila) */
        .pupil::before {
            content: '';
            position: absolute;
            width: 36px;
            height: 36px;
            background: #000;
            border-radius: 50%;
        }

        /* Reflejo (brillo en los ojos) */
        .pupil::after {
            content: '';
            position: absolute;
            width: 17px;
            height: 17px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            top: 15px;
            right: 18px;
            box-shadow: -9px 22px 0 -3px rgba(255, 255, 255, 0.4);
        }
        
        .mouth {
            width: 200px;
            height: 50px;
            background: radial-gradient(ellipse at 50% 100%,
                rgba(255, 84, 112, 0.95) 0%,
                rgba(255, 60, 110, 0.5) 12%,
                rgba(220, 30, 80, 0.15) 30%,
                #000000 50%
            );
            border: 1.5px solid #000000;
            border-radius: 25px 25px 66px 66px / 17px 17px 50px 50px;
            margin-top: 50px;
            box-shadow:
                inset 0 0 25px rgba(0, 0, 0, 0.95);
            transition: all 0.3s ease;
            animation: mouthMove 3s infinite ease-in-out;
            position: relative;
            overflow: hidden;
        }



        @keyframes mouthMove {
            0%, 100% { height: 50px; width: 200px; border-radius: 25px 25px 66px 66px / 17px 17px 50px 50px; }
            50% { height: 54px; width: 196px; border-radius: 23px 23px 70px 70px / 15px 15px 54px 54px; transform: translateY(2px); }
        }

        /* Animación de hablar */
        @keyframes talkingMouthAnim {
            0% { transform: scaleY(1) translateY(0); }
            100% { transform: scaleY(1.4) translateY(2px); }
        }
        
        .agent-core.is-talking .mouth {
            animation: talkingMouthAnim 0.15s infinite alternate ease-in-out !important;
        }
        
        /* Dizzy */
        .agent-dizzy .eyebrow {
            background: #85f5b2;
            box-shadow: 0 0 10px rgba(133, 245, 178, 0.4);
            animation: dizzyEyebrowWobble 2s infinite ease-in-out;
        }
        .agent-dizzy .eye-wrapper:first-child .eyebrow { transform: translateY(-8px) rotate(-18deg); }
        .agent-dizzy .eye-wrapper:last-child .eyebrow { transform: translateY(-8px) rotate(18deg); }
        
        .agent-dizzy .eye-container {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 2px solid #000000;
            box-shadow: inset 0 0 15px rgba(133, 245, 178, 0.35), 0 0 20px rgba(133, 245, 178, 0.2);
            animation: dizzyEyeRoll 3s infinite ease-in-out;
            justify-content: center;
            align-items: center;
        }
        .agent-dizzy .pupil {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            /* ¡Gradiente cónico de molinete verde enfermizo! */
            background: conic-gradient(
                from 0deg, 
                #85f5b2 0deg 45deg, 
                #053d20 45deg 90deg, 
                #85f5b2 90deg 135deg, 
                #053d20 135deg 180deg, 
                #85f5b2 180deg 225deg, 
                #053d20 225deg 270deg, 
                #85f5b2 270deg 315deg, 
                #053d20 315deg 360deg
            );
            border: 2px solid #000000;
            box-shadow: 0 0 15px rgba(133, 245, 178, 0.7);
            position: absolute;
        }
        .agent-dizzy .eye-wrapper:first-child .pupil {
            animation: dizzySpinLeft 1.2s infinite linear;
        }
        .agent-dizzy .eye-wrapper:last-child .pupil {
            animation: dizzySpinRight 1.2s infinite linear;
        }
        .agent-dizzy .mouth {
            width: 60px;
            height: 32px;
            background: radial-gradient(ellipse at 50% 50%, #0d381c 0%, #041208 100%);
            border: 2px solid #85f5b2;
            box-shadow: inset 0 3px 6px rgba(0,0,0,0.8), 0 0 12px rgba(133, 245, 178, 0.35);
            animation: dizzyMouthWobble 1.8s infinite ease-in-out;
        }
        .agent-dizzy .mouth::after { display: none; }

        @keyframes dizzySpinLeft {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes dizzySpinRight {
            0% { transform: rotate(360deg); }
            100% { transform: rotate(0deg); }
        }
        @keyframes dizzyMouthWobble {
            0%, 100% { 
                transform: scale(1) translate(0, 0) rotate(0deg); 
                border-radius: 40% 60% 30% 70% / 50% 60% 40% 50%; 
            }
            33% { 
                transform: scale(1.08, 0.92) translate(-3px, 2px) rotate(-6deg); 
                border-radius: 60% 40% 70% 30% / 40% 50% 60% 50%; 
            }
            66% { 
                transform: scale(0.92, 1.08) translate(3px, -2px) rotate(6deg); 
                border-radius: 30% 70% 40% 60% / 60% 40% 50% 50%; 
            }
        }
        @keyframes dizzyEyebrowWobble {
            0%, 100% { transform: translateY(-8px) scaleY(1); }
            50% { transform: translateY(-11px) scaleY(0.95); }
        }
        @keyframes dizzyEyeRoll {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(-2px, -3px); }
            50% { transform: translate(2px, 3px); }
            75% { transform: translate(-3px, 2px); }
        }
        @keyframes dizzyFaceSway {
            0%, 100% { transform: rotate(0deg) translateY(0) translateX(0); }
            25% { transform: rotate(-4deg) translateY(-3px) translateX(-4px); }
            50% { transform: rotate(0deg) translateY(3px) translateX(0); }
            75% { transform: rotate(4deg) translateY(-3px) translateX(4px); }
        }

        /* Angry */
        .agent-angry.agent-core {
            animation: angryPulse 1.5s infinite ease-in-out;
        }
        .agent-angry .eyebrow {
            background: #ff5470;
            box-shadow: 0 0 12px rgba(255, 84, 112, 0.6);
        }
        .agent-angry .eye-wrapper:first-child .eyebrow { transform: rotate(18deg) translateY(16px); }
        .agent-angry .eye-wrapper:last-child .eyebrow { transform: rotate(-18deg) translateY(16px); }
        .agent-angry .eye-container {
            border-radius: 15% 15% 50% 50% / 15% 15% 50% 50%;
            height: 115px;
            width: 140px;
            background: #ffffff;
            border-color: rgba(255, 84, 112, 0.4);
            box-shadow: inset 0 6px 12px rgba(0,0,0,0.15), 0 0 20px rgba(255, 84, 112, 0.2);
            align-items: flex-start;
            justify-content: center;
        }
        .agent-angry .pupil {
            background: #ff5470;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            box-shadow: 0 0 15px rgba(255, 84, 112, 0.8), inset 0 0 5px #7e0018;
            position: absolute;
            top: 30px;
        }
        .agent-angry .mouth {
            width: 110px;
            height: 35px;
            border-radius: 90px 90px 20px 20px / 75px 75px 12px 12px;
            background: radial-gradient(ellipse at 50% 0%, #3a0005 0%, #1a0005 100%);
            border: 2px solid #000000;
            box-shadow: inset 0 -4px 8px rgba(0,0,0,0.8);
            animation: angryMouthVibe 0.5s infinite linear;
        }
        .agent-angry .mouth::after { display: none; }
        @keyframes angryPulse {
            0%, 100% { box-shadow: inset 0 0 100px rgba(255, 70, 70, 0.2); }
            50% { box-shadow: inset 0 0 140px rgba(255, 70, 70, 0.4); }
        }
        @keyframes angryMouthVibe {
            0%, 100% { transform: translate(0, 0); }
            20% { transform: translate(-1px, 1px); }
            40% { transform: translate(1px, -1px); }
            60% { transform: translate(-1px, -1px); }
            80% { transform: translate(1px, 1px); }
        }

        /* Happy */
        /* Mejillas */
        .agent-happy.agent-core::before,
        .agent-happy.agent-core::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 40px;
            background: radial-gradient(circle, rgba(255, 100, 130, 0.45) 0%, rgba(255, 100, 130, 0) 75%);
            border-radius: 50%;
            z-index: 1;
            pointer-events: none;
            bottom: 42%;
            filter: blur(1.5px);
            transition: all 0.5s ease;
        }
        .agent-happy.agent-core::before {
            left: 20%;
        }
        .agent-happy.agent-core::after {
            right: 20%;
        }

        /* Ojos: Entrecerrados cálidos / levantamiento de mejillas */
        .agent-happy .eye-container {
            border-radius: 50% 50% 35% 35% / 50% 50% 45% 45%;
            height: 125px;
            width: 140px;
            background: #ffffff;
            box-shadow: inset 0 -6px 14px rgba(0,0,0,0.1), 0 0 25px rgba(255, 220, 100, 0.25);
            align-items: center;
            justify-content: center;
        }
        .agent-happy .pupil {
            width: 66px;
            height: 66px;
            border-radius: 50%;
            background: #6b4423;
            box-shadow: 0 0 10px rgba(107, 68, 35, 0.6), inset 0 0 5px #3a2210;
            position: absolute;
            bottom: 15px;
            transition: transform 0.1s ease-out;
        }
        /* Escala del brillo chispeante en los ojos */
        .agent-happy .pupil::after {
            transform: scale(1.2);
        }
        /* Cejas doradas cálidas moviéndose */
        .agent-happy .eyebrow {
            background: #ffcc5c;
            box-shadow: 0 0 12px rgba(255, 204, 92, 0.7);
        }
        .agent-happy .eye-wrapper:first-child .eyebrow {
            animation: happyEyebrowDanceLeft 2s infinite ease-in-out;
        }
        .agent-happy .eye-wrapper:last-child .eyebrow {
            animation: happyEyebrowDanceRight 2s infinite ease-in-out;
        }
        
        @keyframes happyEyebrowDanceLeft {
            0%, 100% { transform: translateY(-16px) rotate(-8deg); }
            50% { transform: translateY(-22px) rotate(-11deg); }
        }
        @keyframes happyEyebrowDanceRight {
            0%, 100% { transform: translateY(-16px) rotate(8deg); }
            50% { transform: translateY(-22px) rotate(11deg); }
        }

        /* Sonrisa orgánica rica con micro-estiramiento */
        .agent-happy .mouth {
            width: 170px;
            height: 55px;
            border-radius: 20px 20px 85px 85px / 12px 12px 65px 65px;
            background: radial-gradient(ellipse at 50% 100%,
                #ff5470 0%,
                #d01c3b 25%,
                #1a0005 75%
            );
            border: 2px solid #000000;
            box-shadow: inset 0 6px 12px rgba(0,0,0,0.8);
            animation: happyMouthPlay 2s infinite ease-in-out;
        }
        /* Lengua brillante con gradiente 3D */
        .agent-happy .mouth::after {
            content: '';
            position: absolute;
            width: 90px;
            height: 34px;
            background: radial-gradient(circle at center, #ff85a2 0%, #ff5470 100%);
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 50%;
            box-shadow: 0 -4px 15px rgba(255, 84, 112, 0.5);
        }
        @keyframes happyMouthPlay {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05) translateY(-2px); }
        }

        /* Sad */
        .agent-sad .eyebrow {
            background: #8e90a2;
        }
        .agent-sad .eye-wrapper:first-child .eyebrow { transform: rotate(-16deg) translateY(-8px) translateX(4px); }
        .agent-sad .eye-wrapper:last-child .eyebrow { transform: rotate(16deg) translateY(-8px) translateX(-4px); }
        .agent-sad .eye-container {
            border-radius: 45% 45% 55% 55% / 35% 35% 65% 65%;
            height: 120px;
            width: 140px;
            background: #ffffff;
            box-shadow: inset 0 6px 14px rgba(0,0,0,0.1), 0 0 25px rgba(70, 130, 220, 0.15);
        }
        .agent-sad .pupil {
            width: 60px;
            height: 60px;
            transform: translateY(15px) !important;
        }
        .agent-sad .mouth {
            width: 90px;
            height: 25px;
            border-radius: 80px 80px 15px 15px / 60px 60px 10px 10px;
            background: radial-gradient(ellipse at 50% 0%, #171f33 0%, #060e20 100%);
            border: 2.5px solid #000;
            box-shadow: inset 0 -4px 8px rgba(0,0,0,0.8);
            animation: sadTremble 3s infinite ease-in-out;
        }
        .agent-sad .mouth::after { display: none; }
        @keyframes sadTremble {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(1.5px) scale(0.98); }
        }

        /* Surprised */
        .agent-surprised .eyebrow {
            transform: translateY(-26px);
            background: #b8c3ff;
            box-shadow: 0 0 12px rgba(184, 195, 255, 0.6);
        }
        .agent-surprised .eye-container {
            height: 150px;
            width: 150px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: inset 0 0 18px rgba(0,0,0,0.1), 0 0 30px rgba(0, 230, 255, 0.2);
        }
        .agent-surprised .pupil {
            width: 34px;
            height: 34px;
            box-shadow: none;
        }
        .agent-surprised .mouth {
            width: 48px;
            height: 65px;
            border-radius: 50%;
            background: radial-gradient(ellipse at center, #171f33 0%, #060e20 100%);
            border: 2.5px solid #000000;
            box-shadow: inset 0 8px 16px rgba(0,0,0,0.9);
            animation: surpriseMouth 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        @keyframes surpriseMouth {
            0% { transform: scale(0.6); }
            100% { transform: scale(1); }
        }

        /* Inlove */
        .agent-inlove.agent-core::before,
        .agent-inlove.agent-core::after {
            content: '';
            position: absolute;
            width: 90px;
            height: 45px;
            background: radial-gradient(circle, rgba(255, 64, 129, 0.45) 0%, rgba(255, 64, 129, 0) 75%);
            border-radius: 50%;
            z-index: 1;
            bottom: 42%;
            filter: blur(1px);
        }
        .agent-inlove.agent-core::before { left: 20%; }
        .agent-inlove.agent-core::after { right: 20%; }
        .agent-inlove .eyebrow {
            background: #ff80ab;
            box-shadow: 0 0 10px rgba(255, 128, 171, 0.6);
        }
        .agent-inlove .eye-wrapper:first-child .eyebrow { transform: rotate(-10deg) translateY(-8px); }
        .agent-inlove .eye-wrapper:last-child .eyebrow { transform: rotate(10deg) translateY(-8px); }
        .agent-inlove .pupil {
            background: #ff4081;
            width: 76px;
            height: 76px;
            border-radius: 50%;
            box-shadow: 0 0 25px rgba(255, 64, 129, 0.8), inset 0 0 10px #7e0030;
            animation: heartBeat 1.2s infinite ease-in-out;
            position: absolute;
        }
        .agent-inlove .pupil::before {
            content: '';
            position: absolute;
            background: #ffffff;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            top: 15px;
            right: 15px;
            display: block;
        }
        .agent-inlove .pupil::after { display: none; }
        .agent-inlove .mouth {
            width: 110px;
            height: 40px;
            border-radius: 0 0 65px 65px;
            background: radial-gradient(ellipse at 50% 100%, #ff4081 0%, #c2185b 35%, #1a000d 80%);
            border: 2px solid #000;
            box-shadow: inset 0 4px 8px rgba(0,0,0,0.8);
            animation: inloveMouth 2s infinite ease-in-out;
        }
        @keyframes heartBeat {
            0%, 100% { transform: scale(1); }
            25% { transform: scale(1.15); }
            40% { transform: scale(1.05); }
            60% { transform: scale(1.2); }
        }
        @keyframes inloveMouth {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08) translateY(-1px); }
        }

        /* Sleeping */
        .agent-sleeping .eyebrow {
            transform: translateY(12px);
            background: #434656;
        }
        .agent-sleeping .eye-container {
            height: 12px;
            width: 140px;
            border-radius: 6px;
            background: #434656;
            margin-top: 55px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.3);
            border: none;
        }
        .agent-sleeping .pupil { display: none; }
        .agent-sleeping .mouth {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: transparent;
            border: 3.5px solid #b8c3ff;
            box-shadow: 0 0 15px rgba(184, 195, 255, 0.4);
            animation: snore 3s infinite ease-in-out;
        }
        .agent-sleeping .mouth::after { display: none; }

        /* Asustado (Miedo Genuino/Aterrorizado) */
        .agent-scared .eyebrow {
            background: #a2b4cd;
            box-shadow: 0 0 10px rgba(162, 180, 205, 0.4);
        }
        .agent-scared .eye-wrapper:first-child .eyebrow { transform: translateY(-14px) rotate(-10deg); }
        .agent-scared .eye-wrapper:last-child .eyebrow { transform: translateY(-14px) rotate(10deg); }
        .agent-scared .eye-container {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: #ffffff;
            border-color: #a2b4cd;
            box-shadow: inset 0 0 15px rgba(162, 180, 205, 0.3), 0 0 25px rgba(162, 180, 205, 0.2);
            animation: scaredEyePulse 2s infinite ease-in-out;
            justify-content: center;
            align-items: center;
        }
        .agent-scared .pupil {
            width: 40px;
            height: 40px;
            background: radial-gradient(circle at 35% 35%, #556677 0%, #151a22 80%);
            border: 2px solid #a2b4cd;
            animation: scaredPupilJitter 1.5s infinite ease-in-out;
        }
        .agent-scared .mouth {
            width: 76px;
            height: 26px;
            border-radius: 12px 12px 18px 18px;
            background: radial-gradient(ellipse at 50% 50%, #202b3c 0%, #0d121b 100%);
            border: 2px solid #a2b4cd;
            box-shadow: inset 0 4px 8px rgba(0,0,0,0.8), 0 0 10px rgba(162, 180, 205, 0.15);
            animation: scaredMouthTremble 2.5s infinite ease-in-out;
        }
        .agent-scared .mouth::after { display: none; }

        /* Histérico (¡La animación original de susto de alta tensión!) */
        .agent-hysterical .eyebrow {
            background: #ffb4ab;
        }
        .agent-hysterical .eye-wrapper:first-child .eyebrow { transform: translateY(-14px) rotate(12deg); }
        .agent-hysterical .eye-wrapper:last-child .eyebrow { transform: translateY(-14px) rotate(-12deg); }
        .agent-hysterical .eye-container {
            width: 125px;
            height: 150px;
            border-radius: 45px;
            background: #ffffff;
            border-color: #ffb4ab;
            box-shadow: inset 0 0 15px rgba(255, 180, 171, 0.4), 0 0 35px rgba(255, 180, 171, 0.3);
            animation: shiver 0.15s infinite linear;
            justify-content: center;
            align-items: center;
        }
        .agent-hysterical .pupil {
            width: 28px;
            height: 28px;
            animation: shiver 0.15s infinite linear;
            position: absolute;
        }
        .agent-hysterical .mouth {
            width: 105px;
            height: 45px;
            border-radius: 20px 20px 30px 30px;
            background: radial-gradient(ellipse at 50% 50%, #5c000d 0%, #1a0005 100%);
            border: 2px solid #ffb4ab;
            box-shadow: inset 0 5px 10px rgba(0,0,0,0.8), 0 0 15px rgba(255, 180, 171, 0.2);
            animation: shiver 0.12s infinite linear;
        }
        .agent-hysterical .mouth::after { display: none; }

        @keyframes shiver {
            0%, 100% { transform: translate(0, 0); }
            10% { transform: translate(-2px, 1px); }
            30% { transform: translate(2px, -1px); }
            50% { transform: translate(-1px, 2px); }
            70% { transform: translate(2px, 1px); }
            90% { transform: translate(-2px, -1px); }
        }

        @keyframes scaredEyePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(0.97); }
        }

        @keyframes scaredPupilJitter {
            0%, 100% { transform: translate(0, 0) scale(1); }
            20% { transform: translate(-1px, 2px) scale(0.95); }
            40% { transform: translate(2px, -1px) scale(1.05); }
            60% { transform: translate(-2px, -1px) scale(0.95); }
            80% { transform: translate(1px, 1px) scale(1.02); }
        }

        @keyframes scaredMouthTremble {
            0%, 100% { transform: scale(1) translateY(0); }
            25% { transform: scale(0.98, 1.02) translateY(1px) skewX(-1deg); }
            50% { transform: scale(1.02, 0.98) translateY(-1px) skewX(1deg); }
            75% { transform: scale(0.99, 1.01) translateY(0.5px) skewX(-0.5deg); }
        }

        /* Suspicious */
        .agent-suspicious .eye-wrapper:first-child .eyebrow { transform: rotate(12deg) translateY(12px); }
        .agent-suspicious .eye-wrapper:last-child .eyebrow { transform: rotate(-8deg) translateY(-14px); }
        .agent-suspicious .eye-container {
            height: 48px;
            width: 140px;
            margin-top: 40px;
            border-radius: 12px;
            background: #ffffff;
            box-shadow: inset 0 3px 6px rgba(0,0,0,0.2), 0 0 15px rgba(184, 195, 255, 0.1);
        }
        .agent-suspicious .pupil {
            width: 58px;
            height: 36px;
            transform: translateX(22px) !important;
        }
        .agent-suspicious .mouth {
            width: 80px;
            height: 12px;
            border-radius: 10px;
            background: transparent;
            border-bottom: 4px solid #b8c3ff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            transform: rotate(4deg) translateX(-4px);
        }
        .agent-suspicious .mouth::after { display: none; }

        /* Shy */
        .agent-shy.agent-core::before,
        .agent-shy.agent-core::after {
            content: '';
            position: absolute;
            width: 85px;
            height: 40px;
            background: radial-gradient(circle, rgba(255, 133, 162, 0.5) 0%, rgba(255, 133, 162, 0) 75%);
            border-radius: 50%;
            z-index: 1;
            bottom: 42%;
            filter: blur(1px);
        }
        .agent-shy.agent-core::before { left: 18%; }
        .agent-shy.agent-core::after { right: 18%; }
        .agent-shy .pupil {
            transform: translateY(12px) translateX(-5px) !important;
        }
        .agent-shy .mouth {
            width: 50px;
            height: 18px;
            border-radius: 0 0 35px 35px;
            background: radial-gradient(ellipse at 50% 100%, #ff85a2 0%, #d81b60 100%);
            border: 2px solid #000;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
        }

        /* Smug */
        .agent-smug .eye-wrapper:first-child .eyebrow { transform: rotate(-12deg) translateY(-14px); }
        .agent-smug .eye-wrapper:last-child .eyebrow { transform: rotate(8deg) translateY(6px); }
        .agent-smug .eye-container {
            height: 90px;
            margin-top: 25px;
            border-radius: 50% 50% 15% 15% / 70% 70% 30% 30%;
            background: #ffffff;
            box-shadow: inset 0 -4px 10px rgba(0,0,0,0.1), 0 0 20px rgba(160, 80, 255, 0.15);
        }
        .agent-smug .pupil {
            transform: translateY(-2px) translateX(6px) !important;
        }
        .agent-smug .mouth {
            width: 90px;
            height: 20px;
            border-radius: 5px 35px 25px 5px / 3px 20px 15px 3px;
            background: radial-gradient(ellipse at 80% 100%, #a050ff 0%, #6a1b9a 100%);
            border: 2px solid #000;
            box-shadow: inset 0 3px 6px rgba(0,0,0,0.8);
            transform: rotate(-8deg) translateX(-6px);
        }
        .agent-smug .mouth::after { display: none; }

        /* Ashamed */
        .agent-ashamed.agent-core::before,
        .agent-ashamed.agent-core::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 45px;
            background: radial-gradient(circle, rgba(255, 64, 129, 0.6) 0%, rgba(255, 64, 129, 0) 75%);
            border-radius: 50%;
            z-index: 1;
            bottom: 40%;
            filter: blur(1px);
        }
        .agent-ashamed.agent-core::before { left: 15%; }
        .agent-ashamed.agent-core::after { right: 15%; }
        .agent-ashamed .eyebrow { transform: translateY(10px); }
        .agent-ashamed .eye-container {
            height: 15px;
            width: 135px;
            margin-top: 55px;
            border-radius: 7px;
            background: #ff80ab;
            box-shadow: 0 0 15px rgba(255, 128, 171, 0.4);
            border: none;
        }
        .agent-ashamed .pupil { display: none; }
        .agent-ashamed .mouth {
            width: 45px;
            height: 12px;
            border-radius: 6px;
            background: #000;
            border: 1.5px solid #ff4081;
        }

        /* Crying */
        .agent-crying .eye-wrapper:first-child .eyebrow { transform: rotate(-10deg) translateY(-5px); }
        .agent-crying .eye-wrapper:last-child .eyebrow { transform: rotate(10deg) translateY(-5px); }
        .agent-crying .eye-container {
            border-radius: 50% 50% 30% 30%;
            height: 120px;
            width: 140px;
            background: #ffffff;
            border-bottom: 6px solid #00daf3;
            animation: tearStream 1.5s infinite ease-in-out;
        }
        .agent-crying .mouth {
            width: 100px;
            height: 30px;
            border-radius: 55px 55px 15px 15px / 45px 45px 8px 8px;
            background: radial-gradient(ellipse at 50% 0%, #002f3d 0%, #00141a 100%);
            border: 2px solid #00daf3;
            box-shadow: inset 0 -4px 8px rgba(0,0,0,0.8);
            animation: sadTremble 0.25s infinite linear;
        }
        .agent-crying .mouth::after { display: none; }
        @keyframes tearStream {
            0%, 100% { box-shadow: 0 15px 15px -5px rgba(0, 218, 243, 0.4); }
            50% { box-shadow: 0 25px 25px -3px rgba(0, 218, 243, 0.75); }
        }

        /* Blushing */
        .agent-blushing.agent-core::before,
        .agent-blushing.agent-core::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 40px;
            background: radial-gradient(circle, rgba(255, 64, 129, 0.45) 0%, rgba(255, 64, 129, 0) 75%);
            border-radius: 50%;
            z-index: 1;
            bottom: 42%;
            filter: blur(1.5px);
        }
        .agent-blushing.agent-core::before { left: 20%; }
        .agent-blushing.agent-core::after { right: 20%; }
        .agent-blushing .eye-container {
            box-shadow: 0 0 30px rgba(255, 64, 129, 0.35);
            border-color: #ffb4ab;
        }
        .agent-blushing .mouth {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: radial-gradient(ellipse at center, #ff4081 0%, #c2185b 40%, #1a000a 80%);
            border: 2px solid #000;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
            animation: happyMouthPlay 2s infinite ease-in-out;
        }

        /* Keyframes */
        @keyframes snore {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); }
        }

        /* Dizzy */
        .agent-dizzy .eye-container {
            animation: dizzyEye 0.5s infinite linear;
        }
        .agent-dizzy .pupil {
            width: 32px;
            height: 32px;
            background: #1e1e1e;
            animation: dizzyPupil 0.6s infinite linear !important;
        }
        .agent-dizzy .mouth {
            border-color: transparent;
            background: #1e1e1e;
            transform: scale(0.6) rotate(15deg);
            animation: dizzyMouth 1s infinite alternate ease-in-out;
        }
        
        @keyframes dizzyEye {
            0% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(0.9) rotate(180deg); }
            100% { transform: scale(1) rotate(360deg); }
        }
        @keyframes dizzyPupil {
            0% { transform: translate(15px, 0) !important; }
            25% { transform: translate(0, 15px) !important; }
            50% { transform: translate(-15px, 0) !important; }
            75% { transform: translate(0, -15px) !important; }
            100% { transform: translate(15px, 0) !important; }
        }
        @keyframes dizzyMouth {
            0% { transform: scale(0.6) rotate(-15deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
            100% { transform: scale(0.7) rotate(15deg); border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
        }

        .speech-bubble {
            opacity: 0;
            transform: translateX(-50%) translateY(20px) scale(0.9);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            pointer-events: none;
        }
        .show-bubble {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
        }

        
        @keyframes naturalBlink {
            0%   { transform: scaleY(1); }
            35%  { transform: scaleY(0.05); }  /* fast close */
            55%  { transform: scaleY(0.05); }  /* brief hold */
            100% { transform: scaleY(1); }     /* slow open */
        }

        .eye-container.blink {
            animation: naturalBlink 0.25s ease-in-out forwards;
            transform-origin: center;
        }