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

html,
body{
overflow-x:hidden;
font-family:Inter,Arial,sans-serif;
}

/*
=====================================
BOTÓN FLOTANTE
=====================================
*/
#leoia-ultra-launcher{
position:fixed;
right:24px;
bottom:24px;
width:74px;
height:74px;
border:none;
border-radius:50%;
background:linear-gradient(135deg,#0ea5e9,#7c3aed);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:99999999;
box-shadow:0 18px 55px rgba(0,0,0,.45);
color:#fff;
font-size:30px;
transition:.25s ease;
}

#leoia-ultra-launcher:hover{
transform:scale(1.08);
}

/*
=====================================
DASHBOARD
=====================================
*/
#leoia-ultra-dashboard{
display:none;
position:fixed;
inset:0;
width:100vw;
height:100vh;
background:#020617;
z-index:99999999;
overflow:hidden;
color:#fff;
}

#leoia-ultra-dashboard.expanded{
inset:0;
}

/*
=====================================
SIDEBAR
=====================================
*/
#leoia-ultra-sidebar{
position:absolute;
left:0;
top:0;
bottom:0;
width:320px;
background:
linear-gradient(
180deg,
#020617,
#071225
);
border-right:
1px solid rgba(148,163,184,.18);
padding:24px 20px;
overflow-y:auto;
}

#leoia-ultra-sidebar::-webkit-scrollbar{
width:5px;
}

#leoia-ultra-sidebar::-webkit-scrollbar-thumb{
background:#334155;
border-radius:10px;
}

.leoia-ultra-logo-box{
display:flex;
align-items:center;
gap:15px;
margin-bottom:25px;
}

.leoia-ultra-logo{
width:86px;
height:86px;
border-radius:20px;
background:
linear-gradient(
135deg,
#0ea5e9,
#7c3aed
);
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
box-shadow:
0 15px 45px rgba(124,58,237,.35);
}

.leoia-ultra-logo-box h2{
font-size:34px;
font-weight:900;
color:#fff;
}

.leoia-ultra-logo-box p{
font-size:12px;
color:#22d3ee;
margin-top:4px;
}

#leoia-ultra-new-chat{
width:100%;
height:58px;
border:none;
border-radius:14px;
background:
linear-gradient(
135deg,
#0ea5e9,
#7c3aed
);
font-size:17px;
font-weight:800;
color:#fff;
cursor:pointer;
transition:.25s;
margin-bottom:20px;
}

#leoia-ultra-new-chat:hover{
transform:translateY(-2px);
}

#leoia-ultra-search-chat{
width:100%;
height:50px;
border-radius:14px;
border:1px solid rgba(148,163,184,.20);
background:#0f172a;
padding:0 18px;
color:#fff;
font-size:15px;
outline:none;
margin-bottom:24px;
}

.leoia-ultra-history-title{
font-size:13px;
font-weight:800;
letter-spacing:1px;
color:#94a3b8;
margin-bottom:12px;
}

.leoia-ultra-chat-item{
background:rgba(15,23,42,.85);
border:1px solid rgba(255,255,255,.06);
padding:14px;
border-radius:14px;
margin-bottom:10px;
display:grid;
grid-template-columns:24px 1fr auto;
gap:10px;
align-items:center;
transition:.2s;
}

.leoia-ultra-chat-item:hover{
background:#111827;
}

.leoia-ultra-chat-item strong{
font-size:14px;
color:#fff;
}

.leoia-ultra-chat-item em{
font-size:12px;
font-style:normal;
color:#94a3b8;
}

/*
=====================================
CAJA ÍNDICE
=====================================
*/
.leoia-ultra-box{
margin-top:20px;
background:
rgba(15,23,42,.82);
border:1px solid rgba(148,163,184,.15);
border-radius:18px;
padding:18px;
}

.leoia-ultra-box h3{
font-size:15px;
font-weight:900;
margin-bottom:10px;
color:#93c5fd;
}

.leoia-ultra-box p{
font-size:13px;
color:#cbd5e1;
margin-bottom:8px;
}

.leoia-ultra-doc-count{
background:#111827;
padding:14px;
border-radius:12px;
text-align:center;
font-size:18px;
font-weight:900;
color:#22d3ee;
margin-top:10px;
}

/*
=====================================
MAIN
=====================================
*/
#leoia-ultra-main{
position:absolute;
left:320px;
right:0;
top:0;
bottom:0;
display:flex;
flex-direction:column;
background:
radial-gradient(circle at top left,
rgba(14,165,233,.16),
transparent 35%),
radial-gradient(circle at top right,
rgba(124,58,237,.20),
transparent 35%),
#020617;
}

/*
=====================================
TOPBAR
=====================================
*/
#leoia-ultra-topbar{
height:85px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 35px;
border-bottom:
1px solid rgba(255,255,255,.08);
backdrop-filter:blur(12px);
}

.leoia-ultra-status{
display:flex;
align-items:center;
gap:12px;
}

.leoia-ultra-status strong{
font-size:28px;
font-weight:900;
}

.leoia-ultra-status span{
width:10px;
height:10px;
border-radius:50%;
background:#10b981;
box-shadow:
0 0 12px #10b981;
}

#leoia-ultra-expand,
#leoia-ultra-close{
height:46px;
border:none;
border-radius:12px;
padding:0 18px;
cursor:pointer;
background:#111827;
color:#fff;
font-size:15px;
}

/*
=====================================
MENSAJES
=====================================
*/
#leoia-ultra-messages{
display:none;
flex:1;
overflow-y:auto;
padding:35px;
flex-direction:column;
gap:18px;
scroll-behavior:smooth;
}

#leoia-ultra-messages.active{
display:flex;
}

#leoia-ultra-messages::-webkit-scrollbar{
width:7px;
}

#leoia-ultra-messages::-webkit-scrollbar-thumb{
background:#334155;
border-radius:10px;
}

.leoia-ultra-user,
.leoia-ultra-ai{
max-width:80%;
padding:20px 22px;
border-radius:24px;
line-height:1.9;
font-size:15px;
box-shadow:
0 10px 30px rgba(0,0,0,.15);
}

.leoia-ultra-user{
align-self:flex-end;
background:
linear-gradient(
135deg,
#0284c7,
#7c3aed
);
color:#fff;
}

.leoia-ultra-ai{
align-self:flex-start;
background:
rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
color:#e5e7eb;
backdrop-filter:blur(18px);
}

/*
=====================================
FORMATO CHATGPT
=====================================
*/
.leoia-ultra-ai h1,
.leoia-ultra-ai h2,
.leoia-ultra-ai h3{
font-weight:900;
margin:20px 0 14px;
line-height:1.3;
color:#93c5fd;
}

.leoia-ultra-ai h1{
font-size:28px;
}

.leoia-ultra-ai h2{
font-size:24px;
}

.leoia-ultra-ai h3{
font-size:21px;
}

.leoia-ultra-ai p{
margin:10px 0 16px;
line-height:1.95;
color:#dbeafe;
}

.leoia-ultra-ai strong{
font-weight:900;
color:#fff;
}

.leoia-ultra-ai ul{
margin:14px 0 16px 22px;
}

.leoia-ultra-ai li{
margin-bottom:10px;
line-height:1.8;
}

.leoia-ultra-ai blockquote{
border-left:4px solid #38bdf8;
padding-left:16px;
margin:18px 0;
color:#cbd5e1;
font-style:italic;
}

.leoia-ultra-ai code{
background:#111827;
padding:2px 6px;
border-radius:6px;
}

/*
=====================================
LOADING
=====================================
*/
.leoia-ultra-loading{
background:
rgba(255,255,255,.05);
padding:18px 20px;
border-radius:18px;
font-style:italic;
color:#93c5fd;
}

.leoia-ultra-error{
background:#450a0a;
border:1px solid #7f1d1d;
padding:18px;
border-radius:18px;
color:#fecaca;
}

/*
=====================================
INPUT
=====================================
*/
#leoia-ultra-input-box{
padding:20px 35px;
display:flex;
gap:12px;
background:
rgba(2,6,23,.75);
backdrop-filter:blur(12px);
border-top:
1px solid rgba(255,255,255,.06);
}

#leoia-ultra-input{
flex:1;
min-height:62px;
max-height:200px;
resize:none;
border:none;
border-radius:18px;
background:#111827;
padding:20px;
color:#fff;
font-size:16px;
outline:none;
}

#leoia-ultra-send{
width:78px;
border:none;
border-radius:18px;
cursor:pointer;
font-size:30px;
background:
linear-gradient(
135deg,
#0ea5e9,
#7c3aed
);
color:#fff;
}

/*
=====================================
RESPONSIVE
=====================================
*/
@media(max-width:900px){

#leoia-ultra-sidebar{
display:none;
}

#leoia-ultra-main{
left:0;
}

.leoia-ultra-user,
.leoia-ultra-ai{
max-width:100%;
}

#leoia-ultra-input-box{
padding:18px;
}

}