/* --- VARIABLES --- */
:root {
    --alia-gold: #f6a821;
    --alia-navy: #0b0a24;
    --alia-font: 'Plus Jakarta Sans', sans-serif;
}

/* --- VENTANA PRINCIPAL --- */
.alia-chat-window {
    position: fixed !important;
    bottom: 120px !important;
    left: 30px !important; /* ✅ Izquierda */
    width: 350px !important;
    height: 550px !important;
    background: rgba(11, 10, 36, 0.98) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(246, 168, 33, 0.2) !important;
    border-radius: 24px !important;
    display: none; /* Empieza oculto */
    flex-direction: column !important;
    z-index: 99999999 !important;
    overflow: hidden !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.7) !important;
    font-family: var(--alia-font), sans-serif !important;
}

/* --- CABECERA --- */
.alia-chat-header {
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 15px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.alia-chat-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--alia-gold) !important;
    letter-spacing: 0.5px !important;
}

.alia-close-btn {
    background: none !important;
    border: none !important;
    color: white !important;
    font-size: 24px !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
}

/* --- CUERPO Y MENSAJES --- */
.alia-chat-body {
    flex: 1 !important;
    padding: 20px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.alia-msg {
    padding: 12px 16px !important;
    border-radius: 18px !important;
    max-width: 85% !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #fff !important;
}

.alia-msg strong { color: var(--alia-gold) !important; font-weight: 700 !important; }
.alia-msg-bot { background: rgba(255, 255, 255, 0.08) !important; align-self: flex-start !important; }
.alia-msg-user { background: var(--alia-gold) !important; color: #000 !important; align-self: flex-end !important; font-weight: 600 !important; }

/* --- BOTONES DE OPCIÓN --- */
.alia-btn-container { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 8px !important; }
.alia-rec-btn {
    background: rgba(246, 168, 33, 0.1) !important;
    border: 1px solid var(--alia-gold) !important;
    color: var(--alia-gold) !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: var(--alia-font) !important;
    text-decoration: none !important;
    text-align: center !important;
}
.alia-rec-btn:hover { background: var(--alia-gold) !important; color: #000 !important; }

/* --- INPUT AREA --- */
.alia-chat-input-area {
    padding: 15px 20px !important;
    display: flex !important;
    gap: 10px !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

.alia-input-field {
    flex: 1 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 15px !important;
    color: white !important;
    border-radius: 12px !important;
    outline: none !important;
    font-size: 14px !important;
    font-family: var(--alia-font) !important;
}

.alia-send-btn {
    background: var(--alia-gold) !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    color: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- ELEMENTOS FLOTANTES (BOTÓN Y GLOBO) --- */
#alia-fixed-wrapper { 
    position: fixed; bottom: 30px; left: 30px; /* ✅ Izquierda */
    z-index: 9999999; display: flex; align-items: center; gap: 15px; 
    filter: drop-shadow(0 0 15px rgba(246, 168, 33, 0.4)); pointer-events: none; 
}
.alia-hexagon-btn { width: 60px; height: 60px; background: transparent; border: none; cursor: pointer; pointer-events: auto; }
/* Nota: Ajustado el alto a 60px para que sea un círculo perfecto si usas un icono, o usa tu imagen SVG aquí */

.alia-intro-bubble { 
    background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.15); padding: 10px 18px; 
    border-radius: 12px; color: white; font-size: 13px; pointer-events: auto; 
}