/* =========================================================
   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;
}



/* =========================================================
   AURORA PSP — ESMERALDA / COBRE
   Dirección cromática inspirada en la imagen de referencia:
   verde petróleo profundo, cobre satinado y marfil cálido.
   Capa visual añadida al final para respetar la estructura,
   las reglas responsive y los estados funcionales existentes.
   ========================================================= */

:root {
  --bg0: #041b16;
  --bg1: #06382d;
  --bg2: #0a4b3b;
  --glass: rgba(4, 45, 35, .76);
  --glass-strong: rgba(3, 31, 25, .92);
  --glass-soft: rgba(12, 75, 58, .48);

  --blue: #c58b62;
  --blue2: #8f593c;
  --cyan: #d9ad88;
  --ice: #f2d8bd;
  --white: #fff8ef;
  --muted: #c4b7a5;

  --line: rgba(220, 170, 128, .30);
  --line-bright: rgba(247, 203, 163, .72);
  --shadow: rgba(0, 12, 9, .68);
  --glow: rgba(204, 137, 89, .23);

  --aurora-emerald: #073c30;
  --aurora-deep: #031d18;
  --aurora-copper: #c58b62;
  --aurora-copper-light: #f0c7a2;
  --aurora-ivory: #fff8ef;
}

html, body {
  background-color: var(--aurora-deep);
}

body {
  color: var(--aurora-ivory);
  background:
    radial-gradient(ellipse at 12% 18%, rgba(26, 118, 85, .34), transparent 36%),
    radial-gradient(ellipse at 88% 80%, rgba(190, 117, 72, .14), transparent 34%),
    radial-gradient(ellipse at 52% 0%, rgba(18, 91, 68, .30), transparent 42%),
    linear-gradient(135deg, #021510 0%, #06382c 46%, #041e18 100%);
}

body::before {
  background:
    radial-gradient(circle at 18% 25%, rgba(38, 153, 109, .13), transparent 32%),
    linear-gradient(115deg, transparent 0 43%, rgba(245, 201, 161, .035) 49%, transparent 54%);
}

body::after {
  background:
    linear-gradient(120deg, transparent 0 40%, rgba(245, 201, 161, .045) 48%, transparent 55%);
  mix-blend-mode: screen;
}

.chat-container {
  border: 1px solid rgba(224, 174, 132, .56) !important;
  background:
    linear-gradient(145deg, rgba(15, 83, 62, .80), rgba(3, 31, 24, .94) 48%, rgba(7, 57, 43, .88)),
    rgba(3, 29, 22, .90) !important;
  box-shadow:
    0 42px 110px rgba(0, 10, 7, .72),
    0 0 0 1px rgba(255, 248, 239, .04) inset,
    0 0 65px rgba(23, 132, 91, .16),
    0 0 32px rgba(197, 139, 98, .08),
    inset 0 2px 0 rgba(255, 241, 223, .18),
    inset 0 -55px 85px rgba(0, 17, 12, .22) !important;
  backdrop-filter: blur(30px) saturate(145%);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
}

.chat-container::before {
  background: linear-gradient(125deg,
    rgba(255, 245, 226, .30),
    rgba(255, 245, 226, 0) 20%,
    transparent 62%,
    rgba(222, 164, 119, .28)) !important;
}

.chat-container::after {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 224, 192, .12), transparent 56%),
    linear-gradient(180deg, rgba(255, 242, 222, .08), transparent 74%) !important;
}

.header::after,
.chat-container .header::after {
  background: linear-gradient(90deg, transparent, rgba(197, 139, 98, .22) 14%,
    rgba(247, 211, 177, .94) 50%, rgba(197, 139, 98, .22) 86%, transparent) !important;
  box-shadow: 0 0 7px rgba(226, 174, 132, .45), 0 0 20px rgba(197, 139, 98, .20) !important;
}

.avatar-header {
  filter:
    drop-shadow(0 5px 5px rgba(0, 0, 0, .42))
    drop-shadow(0 0 9px rgba(226, 183, 145, .60))
    drop-shadow(0 0 26px rgba(28, 135, 91, .42)) !important;
}

.header-text strong {
  background: linear-gradient(180deg, #fff8ef 5%, #f0d0b1 45%, #bd8158 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 0 12px rgba(232, 184, 143, .22), 0 0 30px rgba(20, 121, 82, .18) !important;
}

.header-text span {
  color: #d8d1c5 !important;
}

.aurora-energy-portal {
  filter: drop-shadow(0 0 15px rgba(42, 156, 109, .24)) !important;
}

.aurora-energy-portal::before {
  background: radial-gradient(circle,
    rgba(255, 248, 239, .20) 0 3%,
    rgba(229, 183, 143, .24) 10%,
    rgba(32, 151, 103, .20) 35%,
    transparent 72%) !important;
}

.energy-sweep {
  border-top-color: #fff8ef !important;
  border-right-color: #e2b18a !important;
  border-bottom-color: rgba(38, 150, 101, .28) !important;
  filter: drop-shadow(0 0 5px rgba(242, 202, 164, .78))
          drop-shadow(0 0 15px rgba(25, 134, 88, .34)) !important;
}

.energy-ring {
  border-color: rgba(227, 177, 137, .76) !important;
  box-shadow: 0 0 10px rgba(197, 139, 98, .28) !important;
}

.energy-core {
  box-shadow: 0 0 4px #fff8ef, 0 0 12px #fff8ef,
    0 0 22px #e4b48c, 0 0 42px rgba(26, 151, 100, .70) !important;
}

.energy-core::after {
  background: linear-gradient(90deg, transparent, #fff8ef 44%, #d9a77e 56%, transparent) !important;
  box-shadow: 0 0 8px rgba(255, 248, 239, .72), 0 0 16px rgba(217, 167, 126, .65) !important;
}

#chat {
  border: 1px solid rgba(221, 174, 133, .20) !important;
  background:
    linear-gradient(180deg, rgba(7, 51, 38, .60), rgba(2, 25, 19, .76)),
    radial-gradient(ellipse at 50% 0%, rgba(31, 139, 93, .10), transparent 46%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 235, .07),
    inset 0 0 65px rgba(21, 115, 77, .09),
    inset 0 -28px 55px rgba(0, 18, 12, .16) !important;
  scrollbar-color: rgba(204, 148, 105, .75) rgba(2, 25, 19, .25) !important;
}

#chat::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f0c7a2, #c58b62 52%, #1b8b60) !important;
  box-shadow: 0 0 12px rgba(197, 139, 98, .28) !important;
}

.msg {
  border-radius: 20px;
  border-color: rgba(241, 205, 171, .18) !important;
  box-shadow: 0 12px 32px rgba(0, 12, 8, .22),
    inset 0 1px 0 rgba(255, 248, 239, .07) !important;
}

.user {
  color: #fff9f1 !important;
  border: 1px solid rgba(239, 194, 154, .60) !important;
  background:
    linear-gradient(145deg, rgba(20, 111, 78, .98), rgba(7, 70, 49, .98) 58%, rgba(3, 43, 31, .98)) !important;
  box-shadow:
    0 15px 34px rgba(0, 24, 15, .28),
    0 0 20px rgba(26, 135, 88, .10),
    inset 0 1px 0 rgba(255, 248, 239, .20),
    inset 0 -14px 28px rgba(0, 31, 20, .24) !important;
}

.bot {
  color: #fff6eb !important;
  border: 1px solid rgba(224, 177, 137, .34) !important;
  background:
    linear-gradient(145deg, rgba(16, 71, 54, .96), rgba(5, 42, 32, .98) 62%, rgba(3, 29, 23, .99)) !important;
  box-shadow:
    0 14px 34px rgba(0, 13, 8, .24),
    inset 0 1px 0 rgba(255, 248, 239, .09),
    inset 0 -12px 25px rgba(0, 21, 14, .18) !important;
}

.welcome {
  color: #fff6eb !important;
}

.welcome::before {
  color: #fff7ed !important;
  border-color: rgba(232, 188, 148, .72) !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 248, 239, .30), transparent 24%),
    linear-gradient(145deg, #197c57, #06432f 70%, #03271d) !important;
  box-shadow: 0 0 22px rgba(25, 132, 88, .28),
    inset 0 1px 0 rgba(255, 248, 239, .24),
    inset 0 -12px 24px rgba(0, 31, 20, .32) !important;
}

.message-actions .speak-btn,
.message-actions .copy-btn,
.speak-btn,
.copy-btn {
  color: #f6d5b5 !important;
  border: 1px solid rgba(220, 169, 125, .34) !important;
  background: linear-gradient(145deg, rgba(21, 91, 65, .84), rgba(4, 43, 31, .92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 248, 239, .10), 0 5px 15px rgba(0, 19, 12, .18) !important;
}

.speak-btn:hover,
.copy-btn:hover,
.speak-btn.speaking {
  color: #fff8ef !important;
  border-color: rgba(246, 204, 164, .82) !important;
  background: linear-gradient(145deg, #247f5a, #0a5039) !important;
  box-shadow: 0 0 18px rgba(197, 139, 98, .18), inset 0 1px 0 rgba(255, 248, 239, .16) !important;
}

.input-area {
  border: 1px solid transparent !important;
  background:
    linear-gradient(145deg, rgba(5, 47, 35, .98), rgba(2, 28, 21, .99) 48%, rgba(7, 60, 43, .98)) padding-box,
    linear-gradient(105deg, #e8bc95, #8e5a3e 30%, #2b9a6b 66%, #f0c7a2) border-box !important;
  box-shadow:
    0 20px 48px rgba(0, 12, 8, .42),
    0 0 38px rgba(25, 131, 84, .14),
    inset 0 2px 0 rgba(255, 248, 239, .15),
    inset 0 -14px 28px rgba(0, 23, 15, .24) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.input-area::before {
  background: linear-gradient(90deg, transparent, rgba(255, 242, 222, .94), rgba(224, 174, 132, .82), transparent) !important;
  box-shadow: 0 0 11px rgba(224, 174, 132, .48) !important;
}

.input-area::after {
  background: linear-gradient(90deg, transparent, rgba(37, 144, 96, .20), rgba(239, 193, 153, .62), rgba(37, 144, 96, .20), transparent) !important;
  box-shadow: 0 0 12px rgba(197, 139, 98, .20) !important;
}

input,
#input {
  color: #fff8ef !important;
  caret-color: #e8bc95;
}

input::placeholder,
#input::placeholder {
  color: #b7c8b9 !important;
}

button {
  -webkit-tap-highlight-color: transparent;
}

#uploadTxtBtn, #voiceBtn, #sparkleBtn, #sendBtn {
  border: 1px solid rgba(236, 194, 156, .50) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 239, .25),
    inset 0 -9px 18px rgba(0, 28, 18, .26),
    0 9px 22px rgba(0, 15, 9, .25) !important;
}

#sendBtn {
  color: #183d2e !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 248, 239, .72), transparent 18%),
    linear-gradient(145deg, #f5d6b7, #d3a078 52%, #a96f4b) !important;
  box-shadow:
    0 0 24px rgba(211, 160, 120, .23),
    0 12px 28px rgba(0, 20, 12, .30),
    inset 0 1px 0 rgba(255, 248, 239, .48),
    inset 0 -10px 20px rgba(105, 61, 37, .18) !important;
}

#voiceBtn {
  color: #fff8ef !important;
  background:
    radial-gradient(circle at 30% 21%, rgba(255, 248, 239, .28), transparent 20%),
    linear-gradient(145deg, #21875d, #0b5a3e 57%, #063b2a) !important;
}

#uploadTxtBtn {
  color: #f3cfac !important;
  background: linear-gradient(145deg, #286d50, #104a36 60%, #073324) !important;
}

#sparkleBtn {
  color: #f0c7a2 !important;
  background: linear-gradient(145deg, #9e6a49, #70452f 60%, #41291e) !important;
}

#uploadTxtBtn:hover, #voiceBtn:hover, #sparkleBtn:hover, #sendBtn:hover {
  border-color: rgba(255, 239, 218, .90) !important;
  filter: saturate(1.12) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 239, .34),
    0 0 26px rgba(220, 169, 125, .22),
    0 12px 28px rgba(0, 15, 9, .30) !important;
}

#voiceBtn.recording {
  border-color: #ffe4c8 !important;
  box-shadow: 0 0 17px rgba(240, 199, 162, .55),
    0 0 42px rgba(30, 145, 94, .36),
    inset 0 0 22px rgba(255, 224, 190, .18) !important;
}

#uploadTxtBtn.attached {
  color: #f8d6b5 !important;
  text-shadow: 0 0 13px rgba(240, 199, 162, .50) !important;
}

button:focus-visible,
input:focus-visible,
#input:focus-visible {
  outline: 2px solid #f0c7a2 !important;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .chat-container,
  .avatar-header,
  .aurora-energy-portal::before,
  .energy-sweep,
  .energy-ring,
  .energy-core {
    animation: none !important;
  }
}

@media (max-width: 600px) {
  .chat-container {
    border-color: rgba(224, 174, 132, .38) !important;
    background: linear-gradient(145deg, rgba(8, 63, 46, .98), rgba(2, 29, 22, .99)) !important;
  }
}


/* ============================================================
   AURORA PSP — CONVERSACIONES EN ORO SATINADO
   Ajuste visual: burbujas del usuario y de Aurora en degradados oro.
   ============================================================ */
:root {
  --aurora-gold-light: #fff0bd;
  --aurora-gold: #e7bd72;
  --aurora-gold-deep: #a96b2d;
  --aurora-gold-shadow: rgba(91, 51, 16, .25);
  --aurora-ink: #2b1b0d;
  --aurora-ink-soft: #49311b;
}

/* Mensajes enviados por el usuario: oro intenso y pulido */
.msg.user,
.user.msg,
.user {
  color: var(--aurora-ink) !important;
  border: 1px solid rgba(255, 235, 181, .92) !important;
  background:
    linear-gradient(118deg,
      rgba(255, 246, 211, .98) 0%,
      rgba(238, 199, 126, .98) 24%,
      rgba(190, 128, 57, .98) 48%,
      rgba(255, 224, 157, .98) 72%,
      rgba(208, 157, 83, .98) 100%) !important;
  box-shadow:
    0 12px 30px var(--aurora-gold-shadow),
    0 0 22px rgba(231, 189, 114, .17),
    inset 0 1px 0 rgba(255, 255, 255, .88),
    inset 0 -8px 18px rgba(125, 75, 26, .15) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .22);
}

/* Respuestas de Aurora: champán claro con reflejos oro */
.msg.bot,
.bot.msg,
.bot {
  color: var(--aurora-ink) !important;
  border: 1px solid rgba(255, 229, 174, .88) !important;
  background:
    linear-gradient(128deg,
      rgba(255, 250, 235, .99) 0%,
      rgba(246, 224, 184, .99) 25%,
      rgba(222, 183, 123, .98) 52%,
      rgba(255, 239, 204, .99) 76%,
      rgba(220, 179, 113, .99) 100%) !important;
  box-shadow:
    0 12px 28px rgba(74, 45, 18, .20),
    0 0 18px rgba(231, 189, 114, .13),
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -8px 18px rgba(142, 94, 39, .12) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}

/* Evita que el brillo decorativo tape el contenido de los mensajes */
.msg.user::after,
.msg.bot::after {
  background: linear-gradient(120deg,
    rgba(255, 255, 255, .20),
    transparent 32% 72%,
    rgba(255, 247, 220, .10)) !important;
}

/* Acciones dentro de las respuestas: detalles metálicos coordinados */
.msg .message-actions button,
.message-actions .speak-btn,
.message-actions .copy-btn {
  color: #fff7e6 !important;
  border-color: rgba(255, 226, 166, .72) !important;
  background: linear-gradient(135deg, #986126, #d9ad64 52%, #8e5925) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36),
              0 4px 12px rgba(80, 48, 18, .18) !important;
}

.msg .message-actions button:hover,
.message-actions .speak-btn:hover,
.message-actions .copy-btn:hover {
  filter: brightness(1.12) saturate(1.06);
  box-shadow: 0 0 16px rgba(231, 189, 114, .30),
              inset 0 1px 0 rgba(255, 255, 255, .48) !important;
}

/* ============================================================
   AURORA PSP — CAMBIO DE VERDE A AZUL MARINO
   Se conserva el oro satinado de las conversaciones.
   ============================================================ */
:root {
  --aurora-navy: #06182f;
  --aurora-navy-mid: #0a2545;
  --aurora-navy-light: #12385a;
  --aurora-navy-line: rgba(111, 159, 202, .42);
  --aurora-navy-glow: rgba(12, 54, 103, .38);
}

html, body {
  background-color: var(--aurora-navy) !important;
}

body {
  background:
    radial-gradient(ellipse at 50% -8%, rgba(31, 82, 133, .34), transparent 52%),
    radial-gradient(circle at 8% 62%, rgba(12, 48, 91, .30), transparent 32%),
    radial-gradient(circle at 92% 45%, rgba(27, 74, 117, .24), transparent 34%),
    linear-gradient(145deg, #030b18 0%, #06182f 46%, #0a2545 76%, #020914 100%) !important;
}

body::before {
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(190, 211, 232, .035) 48%, transparent 53%),
    radial-gradient(circle at 50% 100%, rgba(24, 72, 124, .18), transparent 44%) !important;
}

.chat-container {
  border-color: rgba(176, 196, 218, .34) !important;
  background: linear-gradient(145deg,
    rgba(20, 53, 86, .82),
    rgba(5, 19, 39, .96) 48%,
    rgba(9, 35, 64, .91)) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .58),
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 0 64px rgba(12, 54, 103, .26),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -35px 70px rgba(1, 11, 29, .30) !important;
}

.chat-container::before {
  background: linear-gradient(125deg,
    rgba(255, 255, 255, .22),
    transparent 20% 62%,
    rgba(142, 180, 219, .22)) !important;
}

.chat-container::after {
  background: linear-gradient(180deg,
    rgba(222, 232, 244, .10),
    rgba(116, 157, 201, .035) 38%,
    transparent) !important;
}

.header-text span { color: #c2d1e1 !important; }
.header-text strong {
  background: linear-gradient(180deg, #fff9eb 8%, #f0d7a5 48%, #d4ad6c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.aurora-energy-portal,
.avatar-header { filter: drop-shadow(0 0 10px rgba(211, 176, 113, .36)) !important; }
.aurora-energy-portal::before {
  background: radial-gradient(circle,
    rgba(255, 247, 224, .20) 0 3%,
    rgba(221, 184, 119, .20) 10%,
    rgba(34, 91, 146, .22) 36%,
    transparent 70%) !important;
}
.energy-sweep {
  border-top-color: #fff4d5 !important;
  border-right-color: #d8b574 !important;
  filter: drop-shadow(0 0 5px rgba(225, 190, 126, .72))
          drop-shadow(0 0 15px rgba(23, 75, 126, .46)) !important;
}
.energy-core { box-shadow: 0 0 4px #fff, 0 0 12px #f3d79f, 0 0 28px #c59a58, 0 0 44px rgba(24, 76, 130, .9) !important; }

#chat {
  border-color: rgba(130, 165, 201, .26) !important;
  background: linear-gradient(180deg, rgba(9, 30, 54, .66), rgba(3, 13, 29, .78)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), inset 0 0 65px rgba(13, 54, 97, .16) !important;
  scrollbar-color: rgba(198, 161, 97, .72) transparent !important;
}
#chat::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f5dfae, #c59a58, #8d6539) !important;
}

/* Elementos de control que antes utilizaban verde */
.input-area {
  background:
    linear-gradient(145deg, rgba(13, 39, 67, .98), rgba(3, 15, 32, .99) 52%, rgba(11, 40, 70, .98)) padding-box,
    linear-gradient(105deg, #d7b779, #718fb0 38%, #e8c98b 72%, #a7bfd7) border-box !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .42), 0 0 34px rgba(11, 50, 92, .22), inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}

#voiceBtn {
  background: radial-gradient(circle at 30% 21%, rgba(255,255,255,.22), transparent 20%),
    linear-gradient(145deg, #244e79, #102e50 58%, #071a31) !important;
  border-color: rgba(188, 207, 227, .56) !important;
}
#uploadTxtBtn {
  color: #e3c891 !important;
  background: linear-gradient(145deg, #1a4269, #0a2543 60%, #06172c) !important;
  border-color: rgba(188, 207, 227, .42) !important;
}
#sparkleBtn {
  color: #f0d6a0 !important;
  background: linear-gradient(145deg, #274b72, #122e51 58%, #081b34) !important;
  border-color: rgba(214, 184, 126, .52) !important;
  text-shadow: 0 0 12px rgba(220, 185, 119, .40) !important;
}
#sendBtn {
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.42), transparent 18%),
    linear-gradient(145deg, #f5dfad, #c69a58 55%, #81562e) !important;
  color: #1b2633 !important;
  border-color: rgba(255, 235, 190, .86) !important;
  box-shadow: 0 0 24px rgba(198, 154, 88, .25), 0 12px 28px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255,255,255,.48) !important;
}
#uploadTxtBtn:hover, #voiceBtn:hover, #sparkleBtn:hover, #sendBtn:hover {
  border-color: rgba(255, 231, 183, .90) !important;
  box-shadow: 0 0 26px rgba(198, 154, 88, .24), 0 10px 24px rgba(0, 0, 0, .26) !important;
}

.welcome { color: #f3ead9 !important; }
.welcome::before {
  color: #fff4d9 !important;
  border-color: rgba(224, 191, 132, .72) !important;
  background: linear-gradient(145deg, #234a70, #0a2543 76%) !important;
  box-shadow: 0 0 20px rgba(21, 62, 102, .35), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

@media (max-width: 600px) {
  .chat-container {
    border-color: rgba(175, 194, 216, .26) !important;
    background: linear-gradient(145deg, rgba(9, 34, 60, .99), rgba(3, 14, 29, .99)) !important;
  }
}

/* ============================================================
   AURORA PSP — VERDE MENTA + ORO
   Sustituye los tonos azul marino por verde menta;
   conserva los degradados dorados de las conversaciones.
   ============================================================ */
:root {
  --aurora-mint: #9AF0D0;
  --aurora-mint-mid: #4FC9A6;
  --aurora-mint-deep: #123F35;
  --aurora-mint-dark: #082B25;
  --aurora-mint-line: rgba(154, 240, 208, .48);
  --aurora-mint-glow: rgba(79, 201, 166, .24);
}

html, body {
  background-color: var(--aurora-mint-dark) !important;
}

body {
  background:
    radial-gradient(ellipse at 50% -8%, rgba(111, 230, 190, .24), transparent 52%),
    radial-gradient(circle at 8% 62%, rgba(47, 166, 131, .22), transparent 32%),
    radial-gradient(circle at 92% 45%, rgba(154, 240, 208, .15), transparent 34%),
    linear-gradient(145deg, #061F1B 0%, #0B332B 46%, #145342 76%, #041A17 100%) !important;
}

body::before {
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(211, 255, 238, .045) 48%, transparent 53%),
    radial-gradient(circle at 50% 100%, rgba(79, 201, 166, .17), transparent 44%) !important;
}

.chat-container {
  border-color: rgba(154, 240, 208, .42) !important;
  background: linear-gradient(145deg,
    rgba(31, 91, 73, .78),
    rgba(5, 32, 27, .96) 48%,
    rgba(12, 61, 48, .92)) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 0 64px rgba(79, 201, 166, .18),
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -35px 70px rgba(2, 25, 20, .28) !important;
}

.chat-container::before {
  background: linear-gradient(125deg,
    rgba(255, 255, 255, .22),
    transparent 20% 62%,
    rgba(154, 240, 208, .24)) !important;
}

.chat-container::after {
  background: linear-gradient(180deg,
    rgba(226, 255, 243, .11),
    rgba(154, 240, 208, .04) 38%,
    transparent) !important;
}

.header-text span { color: #C9E9DC !important; }

.aurora-energy-portal,
.avatar-header {
  filter: drop-shadow(0 0 10px rgba(154, 240, 208, .40)) !important;
}

.aurora-energy-portal::before {
  background: radial-gradient(circle,
    rgba(255, 255, 255, .20) 0 3%,
    rgba(154, 240, 208, .24) 10%,
    rgba(79, 201, 166, .20) 36%,
    transparent 70%) !important;
}

.energy-sweep {
  border-top-color: #F8FFF9 !important;
  border-right-color: #9AF0D0 !important;
  filter: drop-shadow(0 0 5px rgba(154, 240, 208, .78))
          drop-shadow(0 0 15px rgba(79, 201, 166, .40)) !important;
}

.energy-core {
  box-shadow: 0 0 4px #fff, 0 0 12px #D7FFEE,
    0 0 28px #69DDB7, 0 0 44px rgba(49, 174, 137, .78) !important;
}

#chat {
  border-color: rgba(154, 240, 208, .28) !important;
  background: linear-gradient(180deg,
    rgba(12, 56, 44, .70), rgba(4, 28, 23, .82)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 0 65px rgba(79, 201, 166, .12) !important;
  scrollbar-color: rgba(198, 161, 97, .72) transparent !important;
}

/* La barra de entrada pasa de azul marino a menta; el oro se conserva. */
.input-area {
  background:
    linear-gradient(145deg, rgba(20, 75, 59, .98), rgba(5, 35, 28, .99) 52%, rgba(19, 83, 63, .98)) padding-box,
    linear-gradient(105deg, #D7B779, #76D9B8 38%, #E8C98B 72%, #A6EBD3) border-box !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .38),
    0 0 34px rgba(79, 201, 166, .18),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

#voiceBtn {
  background: radial-gradient(circle at 30% 21%, rgba(255,255,255,.24), transparent 20%),
    linear-gradient(145deg, #58CDA7, #1B795D 58%, #0A3A2D) !important;
  border-color: rgba(176, 245, 220, .62) !important;
}

#uploadTxtBtn {
  color: #F0D6A0 !important;
  background: linear-gradient(145deg, #2C8B6D, #14563F 60%, #083326) !important;
  border-color: rgba(176, 245, 220, .46) !important;
}

#sparkleBtn {
  color: #F0D6A0 !important;
  background: linear-gradient(145deg, #3D9E7D, #1B634C 58%, #0A382B) !important;
  border-color: rgba(214, 184, 126, .56) !important;
  text-shadow: 0 0 12px rgba(220, 185, 119, .40) !important;
}

.welcome::before {
  background: linear-gradient(145deg, #4ABF98, #145B43 76%) !important;
  box-shadow: 0 0 20px rgba(79, 201, 166, .28),
    inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

@media (max-width: 600px) {
  .chat-container {
    border-color: rgba(154, 240, 208, .28) !important;
    background: linear-gradient(145deg,
      rgba(10, 52, 40, .99), rgba(4, 28, 23, .99)) !important;
  }
}

/* ============================================================
   AURORA PSP — GRAFITO + ORO
   Sustituye los tonos verdes/azul marino por grises modernos;
   conserva los degradados dorados de las conversaciones.
   ============================================================ */
:root {
  --aurora-gray-0: #101216;
  --aurora-gray-1: #1B1E23;
  --aurora-gray-2: #292D33;
  --aurora-gray-3: #41464E;
  --aurora-gray-line: rgba(205, 211, 220, .30);
  --aurora-gray-glow: rgba(176, 185, 197, .14);
}

html, body {
  background-color: var(--aurora-gray-0) !important;
}

body {
  background:
    radial-gradient(ellipse at 50% -8%, rgba(198, 204, 214, .13), transparent 52%),
    radial-gradient(circle at 8% 62%, rgba(130, 139, 152, .12), transparent 32%),
    radial-gradient(circle at 92% 45%, rgba(220, 224, 231, .08), transparent 34%),
    linear-gradient(145deg, #111318 0%, #252930 46%, #343941 76%, #101216 100%) !important;
}

body::before {
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(245, 247, 250, .035) 48%, transparent 53%),
    radial-gradient(circle at 50% 100%, rgba(176, 185, 197, .10), transparent 44%) !important;
}

.chat-container {
  border-color: rgba(202, 208, 217, .34) !important;
  background: linear-gradient(145deg,
    rgba(75, 80, 89, .78),
    rgba(22, 24, 29, .97) 48%,
    rgba(48, 52, 60, .94)) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .56),
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 0 58px rgba(176, 185, 197, .10),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -35px 70px rgba(0, 0, 0, .24) !important;
}

.chat-container::before {
  background: linear-gradient(125deg,
    rgba(255, 255, 255, .22), transparent 20% 62%, rgba(211, 216, 224, .16)) !important;
}

.chat-container::after {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .10), rgba(214, 219, 226, .035) 38%, transparent) !important;
}

.header-text span { color: #D0D3D9 !important; }

.aurora-energy-portal,
.avatar-header {
  filter: drop-shadow(0 0 10px rgba(209, 215, 224, .28)) !important;
}

.aurora-energy-portal::before {
  background: radial-gradient(circle,
    rgba(255, 255, 255, .20) 0 3%,
    rgba(220, 224, 231, .16) 10%,
    rgba(132, 141, 154, .14) 36%, transparent 70%) !important;
}

.energy-sweep {
  border-top-color: #FFF8E9 !important;
  border-right-color: #C7CDD6 !important;
  filter: drop-shadow(0 0 5px rgba(202, 208, 217, .50))
          drop-shadow(0 0 15px rgba(126, 135, 148, .28)) !important;
}

.energy-core {
  box-shadow: 0 0 4px #fff, 0 0 12px #E5E8ED,
    0 0 28px #AEB5C0, 0 0 44px rgba(112, 120, 132, .62) !important;
}

#chat {
  border-color: rgba(197, 204, 214, .24) !important;
  background: linear-gradient(180deg,
    rgba(48, 52, 60, .72), rgba(22, 24, 29, .86)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 0 65px rgba(160, 168, 180, .07) !important;
  scrollbar-color: rgba(198, 161, 97, .72) transparent !important;
}

.input-area {
  background:
    linear-gradient(145deg, rgba(57, 61, 69, .98), rgba(25, 27, 32, .99) 52%, rgba(44, 48, 56, .98)) padding-box,
    linear-gradient(105deg, #D7B779, #AEB5C0 38%, #E8C98B 72%, #D4D8DF) border-box !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .42),
    0 0 30px rgba(176, 185, 197, .10),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

#voiceBtn {
  background: radial-gradient(circle at 30% 21%, rgba(255,255,255,.22), transparent 20%),
    linear-gradient(145deg, #777F8B, #414751 58%, #242830) !important;
  border-color: rgba(205, 211, 220, .52) !important;
}

#uploadTxtBtn {
  color: #F0D6A0 !important;
  background: linear-gradient(145deg, #656C77, #343941 60%, #1C1F25) !important;
  border-color: rgba(205, 211, 220, .38) !important;
}

#sparkleBtn {
  color: #F0D6A0 !important;
  background: linear-gradient(145deg, #747B86, #414650 58%, #22252B) !important;
  border-color: rgba(214, 184, 126, .56) !important;
  text-shadow: 0 0 12px rgba(220, 185, 119, .40) !important;
}

.welcome::before {
  background: linear-gradient(145deg, #858C97, #3D424B 76%) !important;
  box-shadow: 0 0 20px rgba(176, 185, 197, .16),
    inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

@media (max-width: 600px) {
  .chat-container {
    border-color: rgba(202, 208, 217, .28) !important;
    background: linear-gradient(145deg,
      rgba(39, 42, 49, .99), rgba(18, 20, 25, .99)) !important;
  }
}

/* =========================================================
   AURORA PSP — EDICIÓN NEGRO PROFUNDO + ORO
   Sustituye los tonos verdes, azul marino y grises por negro;
   conserva los degradados dorados de las conversaciones.
   ========================================================= */
:root {
  --bg0: #030303 !important;
  --bg1: #080808 !important;
  --bg2: #101010 !important;
  --glass: rgba(8, 8, 8, .78) !important;
  --glass-strong: rgba(3, 3, 3, .94) !important;
  --glass-soft: rgba(18, 18, 18, .68) !important;
  --blue: #0A0A0A !important;
  --blue2: #000000 !important;
  --cyan: #D8B56D !important;
  --crystal-bg: #030303 !important;
  --crystal-deep: #080808 !important;
  --crystal-blue: #111111 !important;
  --crystal-cyan: #D8B56D !important;
  --crystal-glass: rgba(8, 8, 8, .82) !important;
}

body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(194, 155, 79, .08), transparent 48%),
    radial-gradient(circle at 8% 55%, rgba(255, 255, 255, .018), transparent 30%),
    linear-gradient(145deg, #000 0%, #080808 52%, #121212 100%) !important;
  color: #FFF8E9 !important;
}

.chat-container {
  border-color: rgba(214, 184, 126, .36) !important;
  background: linear-gradient(145deg,
    rgba(35, 32, 27, .96), rgba(4, 4, 4, .99) 48%, rgba(17, 17, 17, .98)) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .78),
    0 0 0 1px rgba(255, 255, 255, .025) inset,
    0 0 46px rgba(201, 161, 83, .07),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

.chat-container::before {
  background: linear-gradient(125deg,
    rgba(255, 255, 255, .18), transparent 20% 62%, rgba(214, 184, 126, .16)) !important;
}

.chat-container::after {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .07), rgba(214, 184, 126, .025) 38%, transparent) !important;
}

#chat {
  border-color: rgba(214, 184, 126, .20) !important;
  background: linear-gradient(180deg, rgba(15, 15, 15, .94), rgba(2, 2, 2, .98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045),
    inset 0 0 55px rgba(0, 0, 0, .42) !important;
  scrollbar-color: rgba(198, 161, 97, .78) #090909 !important;
}

/* Los mensajes conservan el acabado oro y champán. */
.msg.user {
  color: #30200D !important;
  border: 1px solid rgba(255, 231, 178, .76) !important;
  background: linear-gradient(120deg, #FFF1C5 0%, #E8C477 30%, #B77B37 58%, #F8DFA0 78%, #C99A52 100%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .30),
    0 0 18px rgba(214, 174, 96, .10),
    inset 0 1px 0 rgba(255, 255, 255, .64) !important;
}

.msg.bot {
  color: #342512 !important;
  border: 1px solid rgba(245, 220, 172, .78) !important;
  background: linear-gradient(125deg, #FFFAEC 0%, #F1DDB7 28%, #D8B477 55%, #FFF0CC 76%, #CDA66A 100%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

.msg.user::before, .msg.bot::before { background: #8F682F !important; }
.msg::after { background: linear-gradient(120deg, rgba(255,255,255,.20), transparent 28% 72%, rgba(126,82,28,.07)) !important; }

.header-text strong {
  background: linear-gradient(180deg, #FFF9E9 8%, #F2D9A0 48%, #C89B54 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 0 18px rgba(214, 184, 126, .18) !important;
}
.header-text span { color: #D0C5B0 !important; }

.aurora-energy-portal::before {
  background: radial-gradient(circle, rgba(255,255,255,.18) 0 3%, rgba(214,184,126,.20) 12%, rgba(115,82,35,.12) 38%, transparent 70%) !important;
}
.energy-sweep { border-top-color: #FFF8E9 !important; border-right-color: #D8B56D !important; border-bottom-color: rgba(151, 112, 48, .22) !important; }
.energy-ring { border-color: rgba(214, 184, 126, .70) !important; }
.energy-core { box-shadow: 0 0 4px #FFF, 0 0 12px #F5DCA7, 0 0 28px #C99A52, 0 0 44px rgba(174, 126, 51, .48) !important; }

.input-area {
  background: linear-gradient(145deg, rgba(22,22,22,.99), rgba(3,3,3,.99) 52%, rgba(14,14,14,.99)) padding-box,
    linear-gradient(105deg, #D7B779, #8F6A35 38%, #E8C98B 72%, #F4E4C3) border-box !important;
  box-shadow: 0 20px 52px rgba(0,0,0,.48), 0 0 24px rgba(176,139,67,.08), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

#input, input { color: #FFF8E9 !important; }
#input::placeholder, input::placeholder { color: #B9AA8C !important; }

#voiceBtn { background: linear-gradient(145deg, #5B482C, #24201A 58%, #090909) !important; border-color: rgba(214,184,126,.54) !important; }
#sendBtn { background: linear-gradient(145deg, #FFF0BE, #D5AD62 52%, #8C5B25) !important; color: #211506 !important; border-color: rgba(255,239,196,.84) !important; }
#uploadTxtBtn { color: #E8C98B !important; background: linear-gradient(145deg, #29251F, #080808 70%) !important; border-color: rgba(214,184,126,.34) !important; }
#sparkleBtn { color: #F0D6A0 !important; background: linear-gradient(145deg, #393024, #0A0A0A 70%) !important; border-color: rgba(214,184,126,.48) !important; }
.speak-btn, .copy-btn { color: #F1D9A7 !important; background: linear-gradient(145deg, #29241B, #080808) !important; border-color: rgba(214,184,126,.40) !important; }
.welcome { color: #F4EAD7 !important; }
.welcome::before { color: #FFF4D8 !important; background: linear-gradient(145deg, #5C482A, #17130D 76%) !important; border-color: rgba(214,184,126,.68) !important; }

@media (max-width: 600px) {
  .chat-container { border-color: rgba(214,184,126,.28) !important; background: linear-gradient(145deg, #15130F, #030303 70%) !important; }
}


/* ============================================================
   AURORA PSP · EDICIÓN GILLOW
   Fondo histórico con la imagen de la Catedral de Oaxaca.
   Capa visual añadida al final para preservar la lógica existente.
   ============================================================ */
body{
    background-color:#080d18;
    background-image:
        linear-gradient(180deg, rgba(5,10,19,.28) 0%, rgba(5,10,19,.48) 45%, rgba(3,8,18,.72) 100%),
        linear-gradient(90deg, rgba(4,10,20,.48) 0%, rgba(4,10,20,.10) 48%, rgba(4,10,20,.36) 100%),
        url("catedral-oaxaca.jpg");
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
body::before{
    /* Reduce la retícula holográfica para que la arquitectura siga visible. */
    opacity:.18;
}
body::after{
    /* Brillo cinematográfico discreto, sin cubrir la fotografía. */
    background:linear-gradient(120deg, transparent 0 43%, rgba(255,220,165,.035) 49%, transparent 55%);
    mix-blend-mode:screen;
}
.chat-container{
    background:
        linear-gradient(145deg, rgba(18,31,48,.78), rgba(5,13,27,.88) 54%, rgba(13,23,39,.80));
    border-color:rgba(230,194,133,.48);
    box-shadow:
        0 34px 100px rgba(0,0,0,.62),
        0 0 0 1px rgba(255,244,220,.06) inset,
        0 0 54px rgba(12,30,54,.30),
        inset 0 1px 0 rgba(255,245,225,.18);
    backdrop-filter:blur(22px) saturate(130%);
    -webkit-backdrop-filter:blur(22px) saturate(130%);
}
.chat-container::before{
    background:linear-gradient(125deg,
        rgba(255,244,221,.22),
        rgba(255,255,255,0) 20%,
        transparent 65%,
        rgba(224,177,105,.19));
}
.chat-container::after{
    color:rgba(255,224,174,.34);
}
.header-text strong{
    background:linear-gradient(180deg,#fffdf7 5%,#f4dfb5 48%,#d4a65e 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 18px rgba(240,197,122,.20);
}
.header-text span{
    color:#e1e6ed;
    text-shadow:0 2px 12px rgba(0,0,0,.85);
}
.chat-container .header::after{
    background:linear-gradient(90deg,transparent,rgba(215,171,99,.20) 15%,rgba(255,226,173,.88) 50%,rgba(215,171,99,.20) 85%,transparent);
    box-shadow:0 0 9px rgba(227,183,111,.42);
}
#chat{
    background:
        linear-gradient(180deg,rgba(7,16,29,.43),rgba(3,9,19,.66)),
        radial-gradient(ellipse at 50% 0%,rgba(229,183,108,.055),transparent 52%);
    border-color:rgba(220,190,145,.22);
}
.bot{
    background:linear-gradient(145deg,rgba(30,39,52,.88),rgba(7,15,28,.91) 62%,rgba(8,15,26,.94));
    border-color:rgba(222,195,153,.28);
}
.user{
    background:linear-gradient(145deg,rgba(24,104,157,.88),rgba(7,43,91,.91) 58%,rgba(4,24,57,.94));
    border-color:rgba(125,211,244,.55);
}
.input-area{
    background:
        linear-gradient(145deg,rgba(17,28,43,.97),rgba(5,12,24,.98) 50%,rgba(22,29,39,.96)) padding-box,
        linear-gradient(105deg,rgba(226,187,119,.92),rgba(78,146,197,.75) 42%,rgba(248,218,163,.90)) border-box;
    box-shadow:
        0 18px 48px rgba(0,0,0,.45),
        0 0 28px rgba(214,166,89,.10),
        inset 0 1px 0 rgba(255,247,226,.17);
}
#sendBtn{
    background:
        radial-gradient(circle at 30% 22%,rgba(255,255,255,.45),transparent 18%),
        linear-gradient(145deg,#f1d49b,#b98136 54%,#754b1e);
    color:#fffdf7;
    border-color:rgba(255,231,181,.82);
    box-shadow:0 0 22px rgba(216,164,86,.22),0 10px 25px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.42);
}
#voiceBtn{
    background:linear-gradient(145deg,#4e8eb6,#1b4268 58%,#10253e);
    border-color:rgba(155,211,235,.62);
}
#uploadTxtBtn,#sparkleBtn{
    background:linear-gradient(145deg,rgba(115,89,52,.78),rgba(37,35,32,.90));
    border-color:rgba(222,190,135,.48);
}
#input::placeholder{color:#b8c0cb;}
.speak-btn,.copy-btn{
    background:linear-gradient(145deg,rgba(88,74,53,.55),rgba(17,26,37,.80));
    border-color:rgba(222,190,135,.30);
    color:#f2d9ad;
}
@media (max-width:720px){
    body{
        background-position:center center;
        background-attachment:scroll;
    }
    .chat-container{
        background:linear-gradient(145deg,rgba(13,24,40,.90),rgba(4,11,23,.94) 56%,rgba(12,21,34,.92));
    }
}


/* ============================================================
   FIX DEFINITIVO — FOTOGRAFÍA VISIBLE EN EL PANEL PRINCIPAL
   La imagen se aplica también al contenedor para que no quede
   oculta por los fondos opacos anteriores ni por las reglas móvil.
   ============================================================ */
html, body {
  min-height:100%;
  background-color:#080d18 !important;
}
body {
  background-image: linear-gradient(180deg,rgba(4,9,18,.18),rgba(4,9,18,.48)), url("catedral-oaxaca.jpg") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
.chat-container {
  background-image: linear-gradient(180deg,rgba(5,12,24,.48),rgba(3,8,18,.68)), url("catedral-oaxaca.jpg") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border-color:rgba(231,194,127,.72) !important;
}
#chat {
  background:linear-gradient(180deg,rgba(5,13,25,.38),rgba(3,8,17,.56)) !important;
}
@media (max-width:720px) {
  body { background-attachment:scroll !important; }
  .chat-container {
    background-image:linear-gradient(180deg,rgba(5,12,24,.44),rgba(3,8,18,.64)), url("catedral-oaxaca.jpg") !important;
    background-size:cover !important;
    background-position:center center !important;
  }
}


/* =========================================================
   BOTÓN DE ACCESO AL SITIO GENERAL DE AURORA
   Azul fósforo con brillo, adaptado a escritorio y móvil
   ========================================================= */
.aurora-site-btn{
    position:relative;
    z-index:30;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:max-content;
    max-width:100%;
    margin:10px auto 0;
    padding:10px 21px;
    border:1px solid rgba(143,246,255,.98);
    border-radius:999px;
    background:linear-gradient(135deg,#38f5ff 0%,#00bfff 38%,#087bff 72%,#2458ff 100%);
    color:#00142b;
    font-size:13px;
    font-weight:800;
    letter-spacing:.45px;
    line-height:1.1;
    text-decoration:none;
    text-shadow:0 1px 0 rgba(255,255,255,.32);
    box-shadow:
        0 0 8px rgba(0,238,255,.95),
        0 0 20px rgba(0,190,255,.72),
        0 0 38px rgba(0,105,255,.45),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -3px 8px rgba(0,47,190,.32);
    transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
    -webkit-tap-highlight-color:transparent;
}
.aurora-site-btn span{
    font-size:16px;
    line-height:.8;
}
.aurora-site-btn:hover,
.aurora-site-btn:focus-visible{
    transform:translateY(-2px) scale(1.025);
    filter:brightness(1.12) saturate(1.12);
    box-shadow:
        0 0 12px rgba(0,245,255,1),
        0 0 28px rgba(0,190,255,.9),
        0 0 48px rgba(0,105,255,.6),
        inset 0 1px 0 rgba(255,255,255,.95);
    outline:none;
}
.aurora-site-btn:focus-visible{
    outline:2px solid #fff;
    outline-offset:4px;
}
.aurora-site-btn:active{
    transform:scale(.98);
}
@media (max-width:600px){
    .aurora-site-btn{
        margin-top:7px;
        padding:8px 16px;
        font-size:12px;
        gap:7px;
    }
}
@media (max-width:390px){
    .aurora-site-btn{
        margin-top:5px;
        padding:7px 13px;
        font-size:11px;
    }
}
@media (prefers-reduced-motion:reduce){
    .aurora-site-btn{transition:none;}
}



/* =========================================================
   AJUSTE: EVITAR QUE "CONOCE AURORA" SE ENCIME CON EL CHAT
   El encabezado reserva espacio propio para el botón.
   ========================================================= */
.chat-container > .header {
    flex: 0 0 auto !important;
    min-height: 0;
    padding-bottom: 14px !important;
    gap: 0;
    overflow: visible !important;
}

.chat-container > .header .aurora-site-btn {
    position: relative;
    z-index: 8;
    flex: 0 0 auto;
    margin: 10px auto 2px !important;
    align-self: center;
    white-space: nowrap;
}

/* Evita que el contenido del encabezado se comprima o invada el chat. */
.chat-container > #chat {
    flex: 1 1 0;
    min-height: 0;
}

@media (max-width: 900px) {
    .chat-container > .header {
        padding-bottom: 12px !important;
    }
    .chat-container > .header .aurora-site-btn {
        margin-top: 9px !important;
    }
}

@media (max-width: 600px) {
    .chat-container > .header {
        flex: 0 0 auto !important;
        padding: 2px 4px 12px !important;
    }
    .chat-container > .header .aurora-site-btn {
        margin-top: 8px !important;
        padding: 8px 16px;
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .chat-container > .header {
        padding-bottom: 10px !important;
    }
    .chat-container > .header .aurora-site-btn {
        margin-top: 7px !important;
        padding: 7px 13px;
        font-size: 11px;
    }
}