/* =========================================================
   AURORA PSP
   INTERFAZ GLASS BLUE / FUTURISTA PREMIUM
   Referencia visual: superficies de cristal oscuro,
   bordes luminosos, reflejos y volumen 3D.
   ========================================================= */

:root{
    --bg0:#020610;
    --bg1:#041226;
    --bg2:#071c38;
    --glass:rgba(7,22,42,.68);
    --glass-strong:rgba(5,18,36,.82);
    --glass-soft:rgba(12,39,68,.42);

    --blue:#178cff;
    --blue2:#0a5cff;
    --cyan:#19d8ff;
    --ice:#aeeeff;
    --white:#f4fbff;
    --muted:#91aac3;

    --line:rgba(113,201,255,.26);
    --line-bright:rgba(99,216,255,.62);

    --shadow:rgba(0,0,0,.58);
    --glow:rgba(17,145,255,.34);
}

*,
*::before,
*::after{box-sizing:border-box;}

html,body{
    width:100%;
    height:100%;
    margin:0;
}

body{
    overflow:hidden;
    color:var(--white);
    font-family:"Segoe UI",Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    background:
        radial-gradient(ellipse at 50% -10%,rgba(19,132,255,.30),transparent 35%),
        radial-gradient(circle at 8% 50%,rgba(0,115,255,.13),transparent 31%),
        radial-gradient(circle at 92% 68%,rgba(0,207,255,.12),transparent 34%),
        linear-gradient(145deg,var(--bg0),var(--bg1) 45%,var(--bg2));
}

/* Delicado campo de luz detrás de la interfaz */
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(115deg,transparent 0 44%,rgba(70,190,255,.035) 48%,transparent 53%),
        radial-gradient(circle at 50% 100%,rgba(12,105,210,.10),transparent 42%);
}

/* =========================================================
   CONTENEDOR PRINCIPAL — CRISTAL 3D
   ========================================================= */

.chat-container{
    position:relative;
    width:min(1160px,calc(100vw - 38px));
    height:min(800px,calc(100vh - 42px));
    margin:21px auto;
    padding:18px 25px 20px;

    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    overflow:hidden;

    border:1px solid rgba(119,211,255,.35);
    border-radius:34px;

    background:
        linear-gradient(145deg,rgba(12,42,72,.62),rgba(2,12,27,.80) 48%,rgba(5,25,48,.68)),
        rgba(3,12,25,.72);

    box-shadow:
        0 35px 90px var(--shadow),
        0 0 0 1px rgba(255,255,255,.035) inset,
        0 0 60px rgba(0,119,255,.12),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -35px 70px rgba(0,64,135,.10);

    backdrop-filter:blur(24px) saturate(145%);
    -webkit-backdrop-filter:blur(24px) saturate(145%);
}

/* Borde exterior luminoso */
.chat-container::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
        linear-gradient(125deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,0) 18%,
            transparent 65%,
            rgba(52,194,255,.20));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    padding:1px;
}

/* Reflejo superior tipo cristal */
.chat-container::after{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:0;
    height:105px;
    pointer-events:none;
    border-radius:0 0 50% 50%;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.10),
        rgba(66,194,255,.035) 38%,
        transparent
    );
    filter:blur(1px);
}

/* =========================================================
   IDENTIDAD
   ========================================================= */

.header{
    position:relative;
    z-index:5;
    flex:0 0 clamp(145px,22vh,205px);
    min-height:0;
    padding:5px 10px 10px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.avatar-header{
    width:clamp(58px,8vw,78px);
    height:clamp(58px,8vw,78px);
    margin:0 0 7px;
    object-fit:contain;
    border-radius:18px;

    filter:
        drop-shadow(0 0 8px rgba(38,204,255,.75))
        drop-shadow(0 0 24px rgba(13,103,255,.42));
}

.header-text{
    width:100%;
    line-height:1.15;
}

.header-text strong{
    display:block;
    margin:0;
    font-size:clamp(18px,2.1vw,27px);
    letter-spacing:clamp(2px,.45vw,5px);
    font-weight:700;
    line-height:1;

    color:var(--white);
    text-shadow:
        0 0 10px rgba(122,222,255,.32),
        0 0 26px rgba(0,119,255,.20);
}

.header-text span{
    display:block;
    width:min(100%,700px);
    margin:10px auto 0;

    color:#a9bfd4;
    font-size:clamp(12px,1.2vw,16px);
    font-weight:400;
    line-height:1.4;
}

/* =========================================================
   PORTAL AURORA — NÚCLEO DE ENERGÍA
   ========================================================= */

.aurora-energy-portal{
    position:absolute;
    top:8px;
    left:10px;
    width:100px;
    height:100px;
    z-index:20;
    pointer-events:none;
    overflow:visible;
    isolation:isolate;
}

.aurora-energy-portal::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:74px;
    height:74px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(255,255,255,.20) 0 3%,
        rgba(25,216,255,.24) 10%,
        rgba(14,120,255,.12) 34%,
        transparent 70%);
    filter:blur(7px);
    animation:portalBreath 3s ease-in-out infinite;
}

.energy-sweep{
    position:absolute;
    left:50%;
    top:50%;
    width:78px;
    height:78px;
    margin:-39px 0 0 -39px;
    border-radius:50%;
    border:2px solid transparent;
    border-top-color:rgba(255,255,255,.98);
    border-right-color:rgba(25,216,255,.95);
    border-bottom-color:rgba(20,104,255,.16);
    transform:rotate(-38deg);
    filter:drop-shadow(0 0 5px rgba(25,216,255,.9))
           drop-shadow(0 0 15px rgba(18,122,255,.42));
    animation:portalOrbit 2.2s linear infinite;
}

.energy-sweep::after{
    content:"";
    position:absolute;
    inset:9px;
    border-radius:50%;
    border:1px solid transparent;
    border-left-color:rgba(25,216,255,.66);
    border-top-color:rgba(255,255,255,.40);
    animation:portalCounter 3.7s linear infinite;
}

.energy-ring{
    position:absolute;
    left:50%;
    top:50%;
    width:22px;
    height:22px;
    margin:-11px 0 0 -11px;
    border:1px solid rgba(37,208,255,.78);
    border-radius:50%;
    opacity:0;
    box-shadow:0 0 10px rgba(18,162,255,.40);
    animation:portalWave 4.5s cubic-bezier(.12,.68,.22,1) infinite;
}

.energy-ring.ring-a{animation-delay:0s;}
.energy-ring.ring-b{animation-delay:1.5s;}
.energy-ring.ring-c{animation-delay:3s;}

.energy-core{
    position:absolute;
    left:50%;
    top:50%;
    width:9px;
    height:9px;
    margin:-4.5px 0 0 -4.5px;
    border-radius:50%;
    background:#fff;
    box-shadow:
        0 0 4px #fff,
        0 0 10px #fff,
        0 0 20px var(--cyan),
        0 0 38px rgba(20,117,255,.90);
    animation:portalCore 1.45s ease-in-out infinite;
}

.energy-core::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:70px;
    height:2px;
    transform:translate(-50%,-50%) rotate(-28deg) scaleX(0);
    transform-origin:center;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.98) 44%,var(--cyan) 56%,transparent);
    box-shadow:0 0 8px rgba(255,255,255,.75),0 0 16px var(--cyan);
    opacity:0;
    animation:portalFlash 4.8s ease-out infinite;
}

@keyframes portalOrbit{from{transform:rotate(-38deg)}to{transform:rotate(322deg)}}
@keyframes portalCounter{from{transform:rotate(90deg)}to{transform:rotate(-270deg)}}
@keyframes portalBreath{
    0%,100%{transform:translate(-50%,-50%) scale(.72);opacity:.42}
    50%{transform:translate(-50%,-50%) scale(1.12);opacity:.88}
}
@keyframes portalCore{
    0%,100%{transform:scale(.76);opacity:.78}
    50%{transform:scale(1.35);opacity:1}
}
@keyframes portalWave{
    0%{transform:scale(.18);opacity:.92}
    70%{opacity:.15}
    100%{transform:scale(3.35);opacity:0}
}
@keyframes portalFlash{
    0%,68%{transform:translate(-50%,-50%) rotate(-28deg) scaleX(0);opacity:0}
    76%{transform:translate(-50%,-50%) rotate(-28deg) scaleX(1);opacity:1}
    86%,100%{transform:translate(-50%,-50%) rotate(-28deg) scaleX(1.35);opacity:0}
}

/* =========================================================
   ÁREA DE CONVERSACIÓN
   ========================================================= */

#chat{
    position:relative;
    z-index:3;
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;

    padding:18px 22px;

    display:flex;
    flex-direction:column;
    align-items:stretch;

    border:1px solid rgba(91,184,239,.13);
    border-radius:26px;

    background:
        linear-gradient(180deg,rgba(4,20,38,.28),rgba(2,12,26,.42));

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 0 45px rgba(0,101,190,.055);
    scrollbar-width:thin;
    scrollbar-color:rgba(47,174,255,.55) transparent;
}

#chat::-webkit-scrollbar{width:6px;}
#chat::-webkit-scrollbar-track{background:transparent;}
#chat::-webkit-scrollbar-thumb{
    border-radius:20px;
    background:linear-gradient(180deg,rgba(94,219,255,.65),rgba(21,93,255,.52));
}

/* =========================================================
   MENSAJES — PEQUEÑAS PIEZAS DE CRISTAL
   ========================================================= */

.msg{
    position:relative;
    z-index:4;
    width:fit-content;
    max-width:min(78%,760px);
    min-width:120px;

    margin:8px 0;
    padding:13px 17px;

    border-radius:19px;
    font-size:15px;
    line-height:1.52;
    overflow-wrap:anywhere;
    white-space:pre-wrap;

    animation:messageIn .25s ease-out;
}

.user{
    align-self:flex-end;
    color:#f7fcff;

    border:1px solid rgba(84,201,255,.42);
    border-bottom-right-radius:6px;

    background:
        linear-gradient(145deg,rgba(17,126,224,.72),rgba(5,53,126,.72));

    box-shadow:
        0 12px 30px rgba(0,65,150,.20),
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -12px 24px rgba(0,27,76,.20);
    backdrop-filter:blur(13px);
}

.bot{
    align-self:flex-start;
    color:#e8f5ff;

    border:1px solid rgba(93,167,210,.22);
    border-bottom-left-radius:6px;

    background:
        linear-gradient(145deg,rgba(16,38,61,.76),rgba(4,19,37,.78));

    box-shadow:
        0 12px 28px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.065),
        inset 0 -10px 25px rgba(0,76,145,.07);
    backdrop-filter:blur(14px);
}

.welcome{
    width:auto;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:8px 8px 8px 60px;

    border:0;
    border-radius:0;
    background:transparent;
    color:#eaf7ff;
    font-size:clamp(12px,1.15vw,16px);
    line-height:1.4;
    box-shadow:none;
}

.welcome::before{
    content:"✦";
    position:absolute;
    left:0;
    top:3px;
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border:1px solid rgba(76,210,255,.58);
    border-radius:50%;
    color:#e9fbff;
    font-size:21px;

    background:
        radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 25%),
        linear-gradient(145deg,rgba(18,111,191,.64),rgba(3,29,62,.76));

    box-shadow:
        0 0 16px rgba(17,153,255,.25),
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 -10px 18px rgba(0,35,84,.30);
}

/* =========================================================
   ACCIONES DE RESPUESTA
   ========================================================= */

.message-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
    margin-top:10px;
}

.message-actions button{
    margin-top:0!important;
}

.speak-btn,
.copy-btn{
    width:auto;
    height:auto;
    padding:7px 11px;

    border:1px solid rgba(83,192,240,.25);
    border-radius:999px;

    background:
        linear-gradient(145deg,rgba(30,81,115,.58),rgba(6,29,53,.70));

    color:#b9eaff;
    font-size:12px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 5px 15px rgba(0,72,135,.13);
    backdrop-filter:blur(10px);
}

.speak-btn:hover,
.copy-btn:hover{
    border-color:rgba(80,213,255,.55);
    background:linear-gradient(145deg,rgba(34,112,158,.66),rgba(7,39,72,.76));
    box-shadow:0 0 18px rgba(18,157,255,.18),inset 0 1px 0 rgba(255,255,255,.13);
}

.speak-btn.speaking{
    border-color:rgba(74,224,255,.72);
    box-shadow:0 0 18px rgba(19,184,255,.32),inset 0 0 15px rgba(24,179,255,.12);
}

.speak-btn:disabled{
    cursor:wait;
    opacity:.72;
}

/* =========================================================
   BARRA DE PREGUNTA — PIEZA CENTRAL ESTILO REFERENCIA
   ========================================================= */

.input-area{
    position:relative;
    z-index:8;
    flex:0 0 70px;
    min-width:0;

    display:flex;
    align-items:center;
    gap:8px;

    margin-top:15px;
    padding:5px 7px 5px 9px;

    border:1px solid transparent;
    border-radius:999px;

    background:
        linear-gradient(145deg,rgba(6,23,42,.90),rgba(3,14,29,.92)) padding-box,
        linear-gradient(110deg,
            rgba(52,188,255,.72),
            rgba(20,92,255,.58) 46%,
            rgba(41,207,255,.75)) border-box;

    box-shadow:
        0 16px 40px rgba(0,0,0,.34),
        0 0 35px rgba(0,115,255,.14),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -12px 25px rgba(0,66,135,.16);

    backdrop-filter:blur(18px) saturate(150%);
}

/* Brillo que recorre la cápsula */
.input-area::before{
    content:"";
    position:absolute;
    left:4%;
    top:1px;
    width:30%;
    height:1px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(213,248,255,.85),transparent);
    filter:blur(.4px);
    opacity:.85;
    pointer-events:none;
}

input{
    flex:1 1 auto;
    min-width:0;
    width:100%;
    height:54px;
    padding:0 8px;

    border:0;
    outline:none;
    background:transparent;
    color:#f4fbff;

    font:inherit;
    font-size:16px;
}

input::placeholder{
    color:#7292ae;
}

/* =========================================================
   BOTONES — GLASS 3D
   ========================================================= */

button{
    border:0;
    outline:none;
    color:#fff;
    cursor:pointer;
    font:inherit;
    flex-shrink:0;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease,
        border-color .2s ease;
}

button:hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
}

button:active{transform:scale(.96);}

/* Micro y enviar: cápsulas circulares de cristal */
#voiceBtn,
#sendBtn{
    position:relative;
    width:55px;
    height:55px;

    display:grid;
    place-items:center;
    border-radius:50%;

    color:#ecfbff;
    font-size:22px;

    background:
        radial-gradient(circle at 32% 25%,rgba(255,255,255,.17),transparent 18%),
        linear-gradient(145deg,rgba(18,107,177,.88),rgba(4,39,90,.90));

    border:1px solid rgba(103,216,255,.58);

    box-shadow:
        0 8px 20px rgba(0,59,129,.35),
        0 0 20px rgba(12,145,255,.18),
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -10px 17px rgba(0,25,69,.28);
}

#voiceBtn::after,
#sendBtn::after{
    content:"";
    position:absolute;
    inset:5px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.07);
    pointer-events:none;
}

#voiceBtn:hover,
#sendBtn:hover{
    border-color:rgba(116,229,255,.85);
    box-shadow:
        0 10px 24px rgba(0,74,157,.42),
        0 0 28px rgba(17,178,255,.28),
        inset 0 1px 0 rgba(255,255,255,.25),
        inset 0 -10px 17px rgba(0,25,69,.25);
}

#voiceBtn.recording{
    animation:recordPulse 1.15s ease-in-out infinite;
}

@keyframes recordPulse{
    0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(26,184,255,.28),inset 0 1px 0 rgba(255,255,255,.20)}
    50%{transform:scale(1.07);box-shadow:0 0 34px rgba(26,210,255,.50),0 0 60px rgba(0,101,255,.20),inset 0 1px 0 rgba(255,255,255,.25)}
}

/* Botón de destello */
#sparkleBtn{
    width:45px;
    height:54px;
    margin-left:auto;

    display:grid;
    place-items:center;

    border-left:1px solid rgba(89,173,218,.18);
    border-radius:50%;
    background:transparent;
    color:#a9eaff;
    font-size:24px;

    text-shadow:0 0 12px rgba(42,203,255,.58);
}

#sparkleBtn:hover{
    color:#e8fbff;
    text-shadow:0 0 18px rgba(30,214,255,.82);
}

/* Archivo */
#uploadTxtBtn{
    width:43px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:transparent;
    color:#8ebbd7;
    font-size:19px;
}

#uploadTxtBtn:hover{
    color:#d7f8ff;
    background:rgba(24,153,221,.10);
    text-shadow:0 0 13px rgba(36,203,255,.55);
}

#uploadTxtBtn.attached{
    color:#6ee7ff;
    text-shadow:0 0 13px rgba(40,207,255,.70);
}

/* =========================================================
   ANIMACIÓN DE MENSAJES
   ========================================================= */

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

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:900px){
    .chat-container{
        width:calc(100vw - 22px);
        height:calc(100vh - 22px);
        margin:11px auto;
        padding:14px 17px 16px;
        border-radius:29px;
    }

    .header{flex-basis:clamp(155px,25vh,205px);}
    .header-text strong{font-size:clamp(19px,3.3vw,26px);}
    .header-text span{font-size:13px;}

    #chat{
        padding:16px 17px;
        border-radius:23px;
    }

    .input-area{flex-basis:65px;}
    #voiceBtn,#sendBtn{width:51px;height:51px;}
    #sparkleBtn{width:42px;height:51px;}
}

@media (max-width:600px){
    .chat-container{
        width:100vw;
        height:100dvh;
        margin:0;
        padding:9px;
        border:0;
        border-radius:0;
    }

    .chat-container::before{border-radius:0;}
    .header{
        flex:0 0 157px;
        padding:2px 4px 7px;
    }

    .avatar-header{
        width:59px;
        height:59px;
        margin-bottom:6px;
    }

    .header-text strong{
        font-size:23px;
        letter-spacing:2.4px;
    }

    .header-text span{
        max-width:94%;
        margin-top:7px;
        font-size:11px;
        line-height:1.3;
    }

    .aurora-energy-portal{
        top:3px;
        left:3px;
        transform:scale(.78);
        transform-origin:top left;
    }

    #chat{
        padding:13px 13px;
        border-radius:20px;
    }

    .msg{
        max-width:89%;
        min-width:88px;
        padding:10px 13px;
        font-size:13.5px;
    }

    .welcome{
        padding:7px 6px 7px 52px;
        font-size:15px;
    }

    .welcome::before{
        width:38px;
        height:38px;
        font-size:19px;
    }

    .input-area{
        flex:0 0 60px;
        margin-top:9px;
        gap:4px;
        padding:3px 5px 3px 6px;
    }

    input{
        height:48px;
        padding:0 4px;
        font-size:14px;
    }

    #voiceBtn,#sendBtn{
        width:47px;
        height:47px;
        font-size:20px;
    }

    #sparkleBtn{
        width:37px;
        height:47px;
        font-size:20px;
    }

    #uploadTxtBtn{
        width:36px;
        height:47px;
        font-size:18px;
    }
}

@media (max-width:390px){
    .chat-container{padding:6px;}

    .header{flex-basis:142px;}
    .avatar-header{width:52px;height:52px;}

    .header-text strong{
        font-size:20px;
        letter-spacing:1.8px;
    }

    .header-text span{font-size:10px;}

    #chat{
        padding:11px;
        border-radius:18px;
    }

    .input-area{flex-basis:56px;}
    #sparkleBtn{display:none;}

    #voiceBtn,#sendBtn{
        width:44px;
        height:44px;
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
    }
}


/* ============================================================
   AURORA PSP — CRYSTAL INTERFACE
   EDICION HOLOGRAFICA PREMIUM
   SOLO CAPA VISUAL — SIN CAMBIOS EN LA LOGICA
   ============================================================ */

:root{
    --crystal-bg:#020816;
    --crystal-deep:#031329;
    --crystal-blue:#087dff;
    --crystal-cyan:#43e7ff;
    --crystal-ice:#baf7ff;
    --crystal-line:rgba(116,225,255,.48);
    --crystal-glass:rgba(8,37,66,.48);
}

/* ---------- ATMOSFERA: AURORA DENTRO DEL CRISTAL ---------- */

body{
    overflow:hidden;
    background:
        radial-gradient(ellipse 70% 40% at 50% -10%,rgba(35,181,255,.22),transparent 58%),
        radial-gradient(circle at 4% 52%,rgba(0,88,255,.13),transparent 30%),
        radial-gradient(circle at 96% 47%,rgba(0,214,255,.11),transparent 28%),
        linear-gradient(135deg,#01030a 0%,#020b19 35%,#031b34 68%,#01050e 100%);
}

/* Dos halos móviles crean sensación de espacio profundo */
body::before{
    content:"";
    position:fixed;
    width:58vw;
    height:58vw;
    max-width:850px;
    max-height:850px;
    left:50%;
    top:45%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    pointer-events:none;
    z-index:-2;
    background:
        radial-gradient(circle,rgba(0,196,255,.075) 0%,rgba(0,106,255,.035) 25%,transparent 62%);
    filter:blur(22px);
    animation:crystalBreath 9s ease-in-out infinite;
}
@keyframes crystalBreath{
    0%,100%{transform:translate(-50%,-50%) scale(.90);opacity:.55}
    50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}
}

body::after{
    content:"";
    position:fixed;
    inset:-30%;
    z-index:-3;
    pointer-events:none;
    background:
        conic-gradient(from 30deg at 50% 50%,
            transparent 0deg,
            rgba(0,174,255,.025) 52deg,
            transparent 104deg,
            rgba(34,88,255,.025) 180deg,
            transparent 245deg,
            rgba(0,222,255,.025) 310deg,
            transparent 360deg);
    filter:blur(30px);
    animation:crystalOrbit 28s linear infinite;
}
@keyframes crystalOrbit{
    to{transform:rotate(360deg)}
}

/* ---------- EL DISPOSITIVO: CRISTAL FLOTANTE ---------- */

.chat-container{
    isolation:isolate;
    position:relative;
    border:1px solid rgba(111,224,255,.58);
    background:
        linear-gradient(145deg,
            rgba(29,83,126,.30),
            rgba(3,19,39,.76) 27%,
            rgba(1,8,19,.90) 57%,
            rgba(6,36,68,.55) 100%);
    box-shadow:
        0 50px 130px rgba(0,0,0,.78),
        0 18px 60px rgba(0,54,139,.25),
        0 0 0 1px rgba(255,255,255,.07) inset,
        0 0 100px rgba(0,129,255,.13),
        inset 0 2px 0 rgba(255,255,255,.22),
        inset 0 -70px 100px rgba(0,64,139,.14);
    backdrop-filter:blur(38px) saturate(185%);
    -webkit-backdrop-filter:blur(38px) saturate(185%);
    animation:deviceFloat 8s ease-in-out infinite;
}
@keyframes deviceFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-3px)}
}

/* Reflejo diagonal de cristal */
.chat-container::before{
    background:
        linear-gradient(122deg,
            rgba(255,255,255,.34) 0%,
            rgba(255,255,255,.11) 7%,
            transparent 17%,
            transparent 62%,
            rgba(51,209,255,.20) 84%,
            rgba(255,255,255,.10) 100%);
    opacity:.9;
}

/* Brillo horizontal superior */
.chat-container::after{
    left:4%;
    right:4%;
    top:0;
    height:145px;
    background:
        radial-gradient(ellipse at 50% 0%,rgba(198,248,255,.15),transparent 54%),
        linear-gradient(180deg,rgba(255,255,255,.11),transparent 74%);
    filter:blur(1px);
}

/* ---------- MARCO HOLOGRAFICO ---------- */

.chat-container .header{
    position:relative;
}
.chat-container .header::before{
    content:"";
    position:absolute;
    left:2%;
    right:2%;
    top:8px;
    height:28px;
    border-radius:50%;
    background:radial-gradient(ellipse,rgba(45,208,255,.055),transparent 68%);
    filter:blur(5px);
    pointer-events:none;
}
.chat-container .header::after{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    bottom:1px;
    height:1px;
    background:linear-gradient(90deg,
        transparent,
        rgba(28,144,255,.08) 13%,
        rgba(141,239,255,.92) 50%,
        rgba(28,144,255,.08) 87%,
        transparent);
    box-shadow:
        0 0 5px rgba(100,228,255,.72),
        0 0 20px rgba(0,132,255,.30);
}

/* ---------- LOGOTIPO: NUCLEO OPTICO ---------- */

.avatar-header{
    position:relative;
    border-radius:23px;
    filter:
        drop-shadow(0 6px 5px rgba(0,0,0,.50))
        drop-shadow(0 0 9px rgba(116,237,255,.95))
        drop-shadow(0 0 28px rgba(0,119,255,.58))
        drop-shadow(0 0 52px rgba(0,77,255,.22));
    animation:logoCrystal 5.5s ease-in-out infinite;
}
@keyframes logoCrystal{
    0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
    50%{transform:translateY(-3px) rotate(.35deg) scale(1.025)}
}

.header-text strong{
    background:linear-gradient(180deg,#fff 8%,#d9f8ff 45%,#70caff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    letter-spacing:clamp(3px,.65vw,7px);
    text-shadow:0 0 12px rgba(135,236,255,.40),0 0 32px rgba(0,117,255,.25);
}
.header-text span{
    color:#c7dced;
    text-shadow:0 2px 9px rgba(0,0,0,.60);
}

/* ---------- PORTAL: MINI HOLOGRAMA ---------- */

.aurora-energy-portal{
    width:112px;
    height:112px;
    top:4px;
    left:5px;
    filter:drop-shadow(0 0 16px rgba(0,191,255,.24));
}
.aurora-energy-portal::after{
    content:"";
    position:absolute;
    inset:17px;
    border-radius:50%;
    border:1px solid rgba(132,236,255,.18);
    box-shadow:inset 0 0 16px rgba(0,156,255,.10),0 0 24px rgba(0,183,255,.12);
    animation:holoRing 4.8s ease-in-out infinite;
}
@keyframes holoRing{
    0%,100%{transform:scale(.86);opacity:.28}
    50%{transform:scale(1.14);opacity:.95}
}
.energy-core{
    box-shadow:
        0 0 5px #fff,
        0 0 14px #fff,
        0 0 26px var(--cyan),
        0 0 52px rgba(0,138,255,1),
        0 0 85px rgba(0,219,255,.38);
}

/* ---------- CHAT: VENTANA DE OBSERVACION ---------- */

#chat{
    border:1px solid rgba(93,207,255,.21);
    background:
        linear-gradient(180deg,rgba(9,38,67,.25),rgba(0,8,19,.50)),
        radial-gradient(ellipse at 50% 0%,rgba(28,169,255,.055),transparent 45%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 75px rgba(0,105,220,.07),
        inset 0 -30px 60px rgba(0,31,80,.10);
    backdrop-filter:blur(14px);
}

/* ---------- MENSAJES: FRAGMENTOS DE CRISTAL ---------- */

.msg{
    border-radius:22px;
    transform:translateZ(0);
    transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.msg:hover{transform:translateY(-2px)}

.user{
    border-color:rgba(91,225,255,.60);
    background:
        linear-gradient(145deg,
            rgba(27,157,247,.78),
            rgba(5,67,159,.80) 55%,
            rgba(2,29,74,.86));
    box-shadow:
        0 19px 42px rgba(0,59,157,.30),
        inset 0 1px 0 rgba(255,255,255,.26),
        inset 0 -17px 34px rgba(0,25,76,.30),
        0 0 26px rgba(25,165,255,.10);
}
.bot{
    border-color:rgba(116,210,243,.35);
    background:
        linear-gradient(145deg,
            rgba(25,58,88,.84),
            rgba(4,20,40,.90) 60%,
            rgba(1,9,21,.93));
    box-shadow:
        0 19px 42px rgba(0,0,0,.27),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -17px 34px rgba(0,72,148,.12);
}

/* ---------- BIENVENIDA: CRISTAL INTERACTIVO ---------- */

.welcome::before{
    width:46px;
    height:46px;
    border-color:rgba(105,235,255,.80);
    background:
        radial-gradient(circle at 28% 20%,rgba(255,255,255,.34),transparent 22%),
        linear-gradient(145deg,rgba(28,151,229,.78),rgba(2,36,75,.91));
    box-shadow:
        0 0 24px rgba(16,172,255,.37),
        inset 0 1px 0 rgba(255,255,255,.32),
        inset 0 -13px 25px rgba(0,31,77,.42);
}

/* ---------- BARRA DE INTERACCION: PIEZA CENTRAL ---------- */

.input-area{
    position:relative;
    flex-basis:80px;
    margin-top:18px;
    padding:7px 9px 7px 12px;
    border-radius:999px;
    background:
        linear-gradient(145deg,
            rgba(18,66,101,.94),
            rgba(2,16,34,.97) 46%,
            rgba(6,37,66,.92)) padding-box,
        linear-gradient(105deg,
            rgba(78,218,255,.98),
            rgba(12,93,255,.86) 34%,
            rgba(39,226,255,.96) 68%,
            rgba(188,247,255,.58)) border-box;
    box-shadow:
        0 25px 60px rgba(0,0,0,.52),
        0 0 62px rgba(0,121,255,.21),
        0 0 25px rgba(36,210,255,.13),
        inset 0 2px 0 rgba(255,255,255,.23),
        inset 0 -18px 34px rgba(0,61,132,.25);
    backdrop-filter:blur(28px) saturate(190%);
    -webkit-backdrop-filter:blur(28px) saturate(190%);
}

/* Línea de cristal superior */
.input-area::before{
    left:9%;
    top:2px;
    width:32%;
    height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),rgba(125,235,255,.92),transparent);
    box-shadow:0 0 11px rgba(145,240,255,.80);
}

/* Línea inferior */
.input-area::after{
    content:"";
    position:absolute;
    left:9%;
    right:9%;
    bottom:2px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(26,174,255,.12),rgba(176,243,255,.62),rgba(26,174,255,.12),transparent);
    box-shadow:0 0 12px rgba(0,190,255,.26);
    pointer-events:none;
}

/* ---------- BOTONES: CRISTALES INDEPENDIENTES ---------- */

#uploadTxtBtn,#voiceBtn,#sparkleBtn,#sendBtn{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(134,229,255,.50);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -9px 18px rgba(0,43,100,.30),
        0 9px 22px rgba(0,0,0,.28);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease;
}
#uploadTxtBtn:hover,#voiceBtn:hover,#sparkleBtn:hover,#sendBtn:hover{
    transform:translateY(-2px) scale(1.04);
    border-color:rgba(175,241,255,.90);
    filter:saturate(1.18) brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 0 30px rgba(22,181,255,.31),
        0 12px 28px rgba(0,0,0,.30);
}

/* Barrido de luz al interactuar */
#uploadTxtBtn::after,#voiceBtn::after,#sparkleBtn::after,#sendBtn::after{
    content:"";
    position:absolute;
    top:-25%;
    left:-70%;
    width:38%;
    height:160%;
    transform:rotate(25deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
    filter:blur(1px);
    opacity:0;
    transition:left .58s ease,opacity .20s ease;
    pointer-events:none;
}
#uploadTxtBtn:hover::after,#voiceBtn:hover::after,#sparkleBtn:hover::after,#sendBtn:hover::after{
    left:125%;
    opacity:.95;
}

#sendBtn{
    background:
        radial-gradient(circle at 30% 22%,rgba(255,255,255,.50),transparent 17%),
        radial-gradient(circle at 70% 74%,rgba(73,109,255,.42),transparent 35%),
        linear-gradient(145deg,#48eaff,#087aff 54%,#063bb7);
    box-shadow:
        0 0 28px rgba(21,185,255,.37),
        0 14px 31px rgba(0,52,151,.36),
        inset 0 1px 0 rgba(255,255,255,.44),
        inset 0 -12px 22px rgba(0,35,121,.32);
}
#voiceBtn{
    background:
        radial-gradient(circle at 30% 21%,rgba(255,255,255,.32),transparent 20%),
        linear-gradient(145deg,#39adff,#0d58cb 57%,#082c7b);
}
#uploadTxtBtn{
    background:
        radial-gradient(circle at 30% 21%,rgba(255,255,255,.27),transparent 20%),
        linear-gradient(145deg,#2585c3,#0a406f 57%,#061f3e);
}
#sparkleBtn{
    background:
        radial-gradient(circle at 32% 23%,rgba(255,255,255,.35),transparent 19%),
        linear-gradient(145deg,#2666bc,#143084 58%,#081741);
}

/* Estado activo de voz */
#voiceBtn.recording{
    border-color:rgba(155,244,255,1);
    box-shadow:
        0 0 17px rgba(38,219,255,.68),
        0 0 42px rgba(0,124,255,.46),
        inset 0 0 22px rgba(30,197,255,.23);
    animation:voiceReactor 1s ease-in-out infinite;
}
@keyframes voiceReactor{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.055)}
}

/* ---------- CAMPO DE TEXTO ---------- */

#input{
    color:#f7fdff;
    text-shadow:0 1px 5px rgba(0,0,0,.38);
}
#input::placeholder{
    color:#96b7cf;
}

/* ---------- SCROLLBAR ---------- */

#chat::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,rgba(130,239,255,.92),rgba(25,136,255,.78),rgba(75,84,232,.52));
    box-shadow:0 0 12px rgba(21,157,255,.38);
}

/* ---------- RESPONSIVE: CRISTAL COMPACTO ---------- */

@media (max-width:720px){
    .chat-container{
        width:calc(100vw - 12px);
        height:calc(100vh - 12px);
        margin:6px auto;
        padding:12px 10px 12px;
        border-radius:27px;
    }
    .header{flex-basis:136px}
    .aurora-energy-portal{
        width:80px;
        height:80px;
        top:3px;
        left:1px;
        transform:scale(.75);
        transform-origin:top left;
    }
    .input-area{
        flex-basis:69px;
        margin-top:13px;
        gap:5px;
        padding-left:7px;
        padding-right:6px;
    }
    #uploadTxtBtn,#voiceBtn,#sparkleBtn,#sendBtn{
        flex:0 0 43px;
        width:43px;
        height:43px;
    }
}

@media (max-width:480px){
    .header{flex-basis:121px}
    .avatar-header{
        width:56px;
        height:56px;
        border-radius:18px;
    }
    .header-text strong{
        font-size:18px;
        letter-spacing:3px;
    }
    .header-text span{
        max-width:92%;
        font-size:11px;
        line-height:1.32;
    }
    #chat{
        padding:12px 9px;
        border-radius:22px;
    }
    .msg{
        max-width:90%;
        font-size:14px;
        line-height:1.48;
    }
    .input-area{flex-basis:62px}
    #uploadTxtBtn,#voiceBtn,#sparkleBtn,#sendBtn{
        flex-basis:39px;
        width:39px;
        height:39px;
    }
}

/* Respeto a preferencias de movimiento */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}

/* AURORA CRYSTAL INTERFACE 2.0 — REFRACCIÓN HOLOGRÁFICA */
:root{
  --crystal-cyan:#55e8ff;
  --crystal-blue:#147bff;
  --crystal-deep:#02091d;
  --glass:rgba(8,30,68,.42);
}
body{
  perspective:1400px;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    linear-gradient(rgba(83,225,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(83,225,255,.035) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 45%,#000 0 35%,transparent 75%);
  z-index:-3;
  transform:perspective(700px) rotateX(58deg) translateY(28%);
  transform-origin:center bottom;
  opacity:.55;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:100;
  background:linear-gradient(120deg,transparent 0 42%,rgba(120,235,255,.035) 48%,transparent 54%);
  background-size:240% 100%;
  animation:crystalSweep 9s linear infinite;
  mix-blend-mode:screen;
}
.chat-container{
  transform:translateZ(0) rotateX(.35deg);
  border-radius:34px;
  border:1px solid rgba(150,235,255,.30);
  background:linear-gradient(145deg,rgba(15,51,102,.58),rgba(2,12,34,.66) 55%,rgba(8,29,64,.52));
  box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.035) inset,0 0 70px rgba(28,156,255,.12);
}
.chat-container::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:26px;
  border:1px solid rgba(130,225,255,.08);
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.025) inset;
}
.chat-container::after{
  content:"AURORA / CRYSTAL CORE";
  position:absolute;
  right:22px;
  top:14px;
  font:600 8px/1 Arial,sans-serif;
  letter-spacing:2.6px;
  color:rgba(160,235,255,.28);
  pointer-events:none;
}
header{
  position:relative;
  overflow:hidden;
}
header::before{
  content:"";
  position:absolute;
  left:-10%;right:-10%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--crystal-cyan),rgba(255,255,255,.9),var(--crystal-blue),transparent);
  box-shadow:0 0 14px var(--crystal-cyan);
  opacity:.65;
}
header::after{
  content:"";
  position:absolute;
  width:180px;height:180px;
  right:-80px;top:-120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(52,205,255,.18),transparent 68%);
  filter:blur(4px);
  pointer-events:none;
}
.aurora-energy-portal{
  filter:drop-shadow(0 0 9px rgba(60,224,255,.55));
  transform:translateZ(20px);
}
.aurora-energy-portal::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 0 16px rgba(80,220,255,.35),0 0 22px rgba(25,145,255,.2);
  animation:crystalPulse 4s ease-in-out infinite;
}
#chat{
  position:relative;
  background:linear-gradient(180deg,rgba(2,14,36,.30),rgba(2,9,25,.44));
  border:4px solid rgba(120,220,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 45px rgba(0,75,160,.08);
}
#chat::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(110,235,255,.5),transparent);
  pointer-events:none;
}
.msg{
  position:relative;
  backdrop-filter:blur(18px) saturate(145%);
  border:0.5px solid rgba(160,235,255,.10);
  box-shadow:0 12px 35px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.msg:hover{
  transform:translateY(-1px) translateZ(8px);
  border-color:rgba(100,225,255,.22);
  box-shadow:0 16px 42px rgba(0,0,0,.25),0 0 24px rgba(22,150,255,.08),inset 0 1px 0 rgba(255,255,255,.08);
}
.msg::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.075),transparent 24% 76%,rgba(80,220,255,.035));
}
.user::before,.bot::before{
  content:"";
  position:absolute;
  top:9px;bottom:9px;width:2px;
  border-radius:10px;
  background:linear-gradient(180deg,transparent,var(--crystal-cyan),transparent);
  box-shadow:0 0 10px rgba(50,220,255,.35);
}
.user::before{right:8px}.bot::before{left:8px}
.input-area{
  position:relative;
  border-radius:26px;
  background:linear-gradient(145deg,rgba(19,55,105,.52),rgba(2,14,36,.72));
  border:1px solid rgba(130,230,255,.22);
  box-shadow:0 18px 55px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -18px 35px rgba(0,60,140,.08);
}
.input-area::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:25px;
  border-top:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}
#input{
  background:rgba(0,8,24,.30)!important;
  border:1px solid rgba(110,220,255,.12)!important;
  box-shadow:inset 0 0 20px rgba(0,80,170,.10)!important;
}
#input:focus{
  border-color:rgba(85,232,255,.45)!important;
  box-shadow:0 0 0 3px rgba(65,205,255,.06),inset 0 0 25px rgba(0,90,190,.14)!important;
}
#sendBtn{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(160,245,255,.48)!important;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.34),rgba(36,159,255,.28) 32%,rgba(5,42,104,.75) 72%)!important;
  box-shadow:0 0 24px rgba(35,193,255,.30),inset 0 1px 0 rgba(255,255,255,.28)!important;
}
#sendBtn::before{
  content:"";
  position:absolute;
  width:160%;height:2px;
  left:-30%;top:48%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform:rotate(-18deg);
  animation:reactorSweep 3.2s ease-in-out infinite;
}
#uploadTxtBtn,#voiceBtn,#sparkleBtn,#sendBtn{
  transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;
}
#uploadTxtBtn:hover,#voiceBtn:hover,#sparkleBtn:hover,#sendBtn:hover{
  transform:translateY(-2px) scale(1.035);
  filter:brightness(1.16);
}
@keyframes crystalSweep{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes crystalPulse{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:.9;transform:scale(1.04)}}
@keyframes reactorSweep{0%,25%{transform:translateX(-80%) rotate(-18deg);opacity:0}45%{opacity:.9}70%,100%{transform:translateX(80%) rotate(-18deg);opacity:0}}
@media(max-width:700px){
  .chat-container{border-radius:24px}
  .chat-container::after{display:none}
  body::before{background-size:34px 34px;opacity:.3}
}
@media(prefers-reduced-motion:reduce){body::after,.aurora-energy-portal::after,#sendBtn::before{animation:none!important}}


/* AURORA CRYSTAL 2.1 — eliminación del halo elíptico superior del logo */
.chat-container::before {
    display: none !important;
}
.avatar-header::before,
.avatar-header::after {
    display: none !important;
}


/* AURORA CRYSTAL 2.2 — HEADER LIMPIO
   Sin halo, resplandor, sombreado ni luz elíptica en la parte superior/logo. */
.chat-container::before,
.chat-container::after,
.chat-container .header::before,
.chat-container .header::after,
header::before,
header::after,
.avatar-header::before,
.avatar-header::after,
.avatar-header img::before,
.avatar-header img::after {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
}

header,
.header,
.avatar-header {
    box-shadow: none !important;
    filter: none !important;
}


/* Solo clip y pregunta a Aurora */
#uploadTxtBtn,
#sparkleBtn {
    border: 1px solid rgba(134, 229, 255, 0.0) !important;
}

#uploadTxtBtn:hover,
#sparkleBtn:hover {
    border-color: rgba(175, 241, 255, 0.0) !important;
}

/* =========================================================
   AURORA PSP — AJUSTE FINAL
   CLIP Y PREGUNTA A AURORA SIN BORDE CIRCULAR
   NO AFECTA VOICE NI SEND
   ========================================================= */

#uploadTxtBtn,
#sparkleBtn {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
}

/* El borde no reaparece al pasar el cursor */
#uploadTxtBtn:hover,
#sparkleBtn:hover,
#uploadTxtBtn:focus,
#sparkleBtn:focus,
#uploadTxtBtn:active,
#sparkleBtn:active {
    border: 0 !important;
    outline: 0 !important;
}

/* Conserva el volumen del cristal sin dibujar una circunferencia */
#uploadTxtBtn,
#sparkleBtn {
    box-shadow: none !important;
}

/* Mantiene solamente el brillo del icono */
#uploadTxtBtn {
    text-shadow: 0 0 10px rgba(36,203,255,.30);
}

#sparkleBtn {
    text-shadow: 0 0 12px rgba(42,203,255,.58);
}

/* Al interactuar, ilumina el icono pero no el contorno */
#uploadTxtBtn:hover,
#sparkleBtn:hover {
    box-shadow: none !important;
}

/* =========================================================
   CORRECCIÓN DEFINITIVA MÓVIL — COMPOSITOR DENTRO DEL MARCO
   Solo afecta pantallas de 600px o menos.
   ========================================================= */
@media screen and (max-width:600px){
    .chat-container{
        width:calc(100vw - 16px) !important;
        max-width:calc(100vw - 16px) !important;
        height:calc(100dvh - 16px) !important;
        margin:8px auto !important;
        padding-left:7px !important;
        padding-right:7px !important;
        padding-bottom:7px !important;
        overflow:hidden !important;
    }

    .input-area{
        box-sizing:border-box !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        flex:0 0 50px !important;
        height:50px !important;
        min-height:50px !important;
        max-height:50px !important;
        margin:7px 0 0 !important;
        padding:2px 4px !important;
        gap:2px !important;
        overflow:hidden !important;
    }

    .input-area > button{
        box-sizing:border-box !important;
        flex:0 0 34px !important;
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;
        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;
        padding:0 !important;
        margin:0 !important;
    }

    .input-area > input{
        box-sizing:border-box !important;
        flex:1 1 auto !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        height:38px !important;
        min-height:0 !important;
        padding:0 3px !important;
        margin:0 !important;
        font-size:13px !important;
    }
}

@media screen and (max-width:390px){
    .chat-container{
        width:calc(100vw - 12px) !important;
        max-width:calc(100vw - 12px) !important;
        margin:6px auto !important;
        padding-left:5px !important;
        padding-right:5px !important;
        padding-bottom:5px !important;
    }

    .input-area{
        flex-basis:46px !important;
        height:46px !important;
        min-height:46px !important;
        max-height:46px !important;
        padding:2px 3px !important;
    }

    .input-area > button{
        flex-basis:31px !important;
        width:31px !important;
        min-width:31px !important;
        max-width:31px !important;
        height:31px !important;
        min-height:31px !important;
        max-height:31px !important;
        font-size:14px !important;
    }

    .input-area > input{
        height:34px !important;
        font-size:12px !important;
    }
}

/* =========================================================
   AJUSTE FINAL MÓVIL — BOTONES MÁS GRANDES Y SIN DESBORDE
   ========================================================= */
@media screen and (max-width:600px){
    .input-area{
        flex-basis:54px !important;
        height:54px !important;
        min-height:54px !important;
        max-height:54px !important;
        padding:2px 4px !important;
        gap:3px !important;
    }

    .input-area > button{
        flex:0 0 38px !important;
        width:38px !important;
        min-width:38px !important;
        max-width:38px !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        padding:0 !important;
        margin:0 !important;
        font-size:16px !important;
    }

    .input-area > input{
        flex:1 1 0 !important;
        width:0 !important;
        min-width:0 !important;
        max-width:none !important;
        height:40px !important;
        font-size:13px !important;
        padding:0 3px !important;
    }
}

@media screen and (max-width:390px){
    .input-area{
        flex-basis:50px !important;
        height:50px !important;
        min-height:50px !important;
        max-height:50px !important;
        padding:2px 3px !important;
        gap:2px !important;
    }

    .input-area > button{
        flex-basis:36px !important;
        width:36px !important;
        min-width:36px !important;
        max-width:36px !important;
        height:36px !important;
        min-height:36px !important;
        max-height:36px !important;
        font-size:15px !important;
    }

    .input-area > input{
        height:36px !important;
        font-size:12px !important;
    }
}



/* =========================================================
   AURORA PSP — AJUSTE FINAL CELULAR
   Botones más grandes + texto de respuesta ligeramente mayor
   ========================================================= */

@media (max-width: 600px) {

  .input-area {
    flex-basis: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    gap: 3px !important;
    padding: 3px 4px !important;
  }

  .input-area > button {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 18px !important;
  }

  .input-area > input {
    height: 44px !important;
    font-size: 14px !important;
    min-width: 0 !important;
  }

  /* Texto de las respuestas de Aurora */
  #chat {
    font-size: 16px !important;
  }

  #chat .message,
  #chat .assistant-message,
  #chat .bot-message,
  #chat .response,
  #chat .aurora-message {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 390px) {

  .input-area {
    flex-basis: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    gap: 2px !important;
    padding: 2px !important;
  }

  .input-area > button {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 17px !important;
  }

  .input-area > input {
    height: 40px !important;
    font-size: 13.5px !important;
  }

  #chat {
    font-size: 15.5px !important;
  }

  #chat .message,
  #chat .assistant-message,
  #chat .bot-message,
  #chat .response,
  #chat .aurora-message {
    font-size: 15.5px !important;
    line-height: 1.52 !important;
  }
}


/* =========================================================
   AURORA PSP — SIN BOTÓN CLIP EN CELULAR
   El botón de adjuntar TXT queda oculto.
   ========================================================= */

#uploadTxtBtn {
  display: none !important;
}