/* =========================================
   CLIO - LA IA HISTÓRICA (UI STYLES)
   Ubicación: shared/clio.css
   ========================================= */

/* 1. CONTENEDOR DEL BOTÓN Y LABEL */
#clio-wrapper {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

/* 2. EL CARTELITO FLOTANTE (LABEL) */
#clio-label {
    background: rgba(5, 9, 22, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #d4af37;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    margin-right: 12px;
    
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

#clio-label.show-label {
    opacity: 1;
    transform: translateX(0);
}

/* 3. EL BOTÓN FLOTANTE (LAUNCHER) */
#clio-launcher {
    pointer-events: all;
    height: 60px;
    background: radial-gradient(circle at top left, #d4af37, #b49018);
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), 0 0 0 1px rgba(255,255,255,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    transition: width 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
                transform 0.2s ease;
    
    width: 140px; 
    padding: 0 20px;
    gap: 10px;
}

#clio-launcher.collapsed {
    width: 60px;
    padding: 0;
    gap: 0;
    animation: clioPulse 4s infinite 2s;
}

#clio-launcher:hover {
    transform: scale(1.05);
}

.clio-text-big {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 800;
    color: #050815;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.3s;
}

#clio-launcher.collapsed .clio-text-big {
    opacity: 0;
    width: 0;
    margin: 0;
    display: none;
}

.clio-icon {
    width: 28px;
    height: 28px;
    fill: #050815;
    flex-shrink: 0;
}

@keyframes clioPulse {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* 4. LA VENTANA DE CHAT (WINDOW) */
#clio-window {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 350px;
    height: 500px;
    max-height: 80vh;
    background: rgba(5, 9, 22, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9998;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: all 0.3s ease-out;
}

#clio-window.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* CABECERA */
.clio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.clio-title {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: #d4af37;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.clio-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.clio-btn-header {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    padding: 4px;
}

.clio-btn-header:hover { color: #fff; }
.clio-btn-header svg { fill: currentColor; width: 14px; height: 14px; }

/* MENSAJES */
.clio-messages {
    flex: 1;
    padding: 20px;
    /* Un poco más de padding derecho para que el scroll no pegue al texto */
    padding-right: 10px; 
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

/* Scrollbar "Flotante" para mensajes */
.clio-messages::-webkit-scrollbar { width: 8px; } /* Ancho total (invisible) */
.clio-messages::-webkit-scrollbar-track { background: transparent; }
.clio-messages::-webkit-scrollbar-thumb { 
    background-color: #d4af37; 
    border-radius: 10px;
    border: 3px solid transparent; /* Crea el espacio transparente alrededor */
    background-clip: content-box;  /* Pinta solo el centro, respetando el borde transparente */
}
.clio-messages::-webkit-scrollbar-thumb:hover { 
    background-color: #f0c952; 
}

.msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; line-height: 1.5; }
.msg.clio { align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #e0e0e0; border-top-left-radius: 2px; }
.msg.user { align-self: flex-end; background: rgba(212, 175, 55, 0.15); border: 1px solid rgba(212, 175, 55, 0.3); color: #d4af37; border-bottom-right-radius: 2px; }

/* ÁREA DE INPUT */
.clio-input-area { 
    padding: 15px; 
    border-top: 1px solid rgba(255,255,255,0.1); 
    background: rgba(0,0,0,0.2); 
    display: flex; 
    gap: 10px; 
    align-items: flex-end; 
}

#clio-input { 
    flex: 1; 
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 12px;
    padding: 10px 14px; 
    
    /* Agregamos padding derecho extra para que el texto no toque el scroll */
    padding-right: 10px; 
    
    color: #fff; 
    font-family: 'Inter', sans-serif; 
    font-size: 13px; 
    outline: none; 
    transition: 0.2s;
    height: 80px;
    resize: none;
    overflow-y: auto;
    line-height: 1.4;
}

#clio-input:focus { border-color: #d4af37; background: rgba(212,175,55,0.05); }

/* Scrollbar "Flotante" para el Input (El Truco Visual) */
#clio-input::-webkit-scrollbar {
    width: 10px; /* Hacemos el área clickeable más ancha */
}
#clio-input::-webkit-scrollbar-track {
    background: transparent;
}
#clio-input::-webkit-scrollbar-thumb {
    background-color: #d4af37;
    border-radius: 10px;
    /* Borde transparente grueso a la derecha hace que la barra se mueva a la izquierda */
    border: 3px solid transparent; 
    background-clip: content-box; /* Esto recorta el color para que no pinte el borde */
}

#clio-send { 
    background: #d4af37; 
    border: none; 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.2s;
    margin-bottom: 22px; 
}
#clio-send:hover { transform: scale(1.1); background: #fff; }
#clio-send svg { width: 16px; height: 16px; fill: #000; }

/* --- ESTILOS DE CLIO EXPANDIDO --- */
#clio-window.expanded {
    width: 90vw !important;  
    max-width: 1000px;
    max-height: none;
    border-radius: 12px;
    height: 83vh !important;
}

#clio-window.expanded .clio-messages {
    height: calc(100% - 160px); 
}