:root {
    --primary-color: #0468b1;
    --accent-color: #10a37f;
    --bg-light: #f7f7f8;
    --text-dark: #343541;
}

body, html {
    margin: 0; padding: 0;
    height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}

.main-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* Dashboard Area (80%) */
.dashboard-area {
    /* flex: 8; */
    /* max-width: 80%; */
    flex: 1;
    background-color: var(--bg-light);
    border-right: 1px solid #ddd;
    transition: all 0.3s ease;
}

#superset-mount {
    width: 100%; height: 100%;
}

/* Forzar al iframe inyectado por el SDK a ocupar todo el espacio y usar Modo Claro */
#superset-mount iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
    color-scheme: light; 
}

.loader-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; font-size: 1.2rem; color: #666;
}

/* Chatbot Area (20%) */
.chatbot-area {
    flex: 0 0 20%;
    max-width: 20%;
    display: flex; 
    flex-direction: column;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    /* Evita que los textos se desborden durante la animación */
    overflow: hidden; 
}

.chatbot-area.collapsed {
    /* Cambiado de "flex: 0;" a "flex: 0 0 0%" y añadido "max-width" para animar el ancho */
    flex: 0 0 0%;
    max-width: 0%;
    overflow: hidden;
    padding: 0;
    /* Ocultamos el borde para que no se vea una línea extraña cuando está colapsado */
    border: none; 
}

/* ------- Casbecera del Chatbot */
/*
.chatbot-header {
    padding: 15px; background: var(--primary-color); color: white;
    display: flex; justify-content: space-between; align-items: center;
}*/
/* .chatbot-header {
    padding: 15px; 
    /* Fondo con degradado azul claro y limpio 
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%); 
    /* Color de texto en tono azul oscuro para mantener la legibilidad y autoridad 
    color: #0369A1; 
    border-bottom: 1px solid #BAE6FD;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
} */
.chatbot-header {
    padding: 15px;
    background: linear-gradient(135deg, #0468b1 0%, #035998 100%);
    color: #bcd4e6;
    border-bottom: 1px solid #BAE6FD;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Opcional: aseguramos que el título y el icono se alineen perfectamente */
.chatbot-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

/* boton de toggle cerrar */
.chatbot-header #toggle-chat{
    background-color: transparent;
    color: #a8ddef;
    border: 0;
    font-size: larger;
    margin-right: -10px;
    cursor: pointer;
}

.chatbot-header #toggle-chat :hover{
    color: #FFF;
}


/* ------------ MENSAJES ------------------*/
.chat-messages {
    flex: 1; overflow-y: auto; padding: 15px;
    background: #fdfdfd; display: flex; flex-direction: column; gap: 10px;
}

.message {
    padding: 10px 15px; border-radius: 8px; max-width: 85%; font-size: 0.9rem;
}

/* .message.system { 
    background: #eef2f7; align-self: flex-start; color: var(--text-dark); 
}

.message.user { 
    background: var(--accent-color); color: white; align-self: flex-end; 
} */

.message.user { 
    background: #eef2f7; 
    color: var(--text-dark); 
    align-self: flex-end; 
    border-radius: 8px;
}

.message.system { 
    background: transparent; 
    color: var(--text-dark); 
    align-self: stretch; 
    max-width: 100%; 
    padding: 12px 0; 
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
    border-radius: 0;
}

/* -- Estilos para Markdown en las respuestas del sistema */
.message.system p {
    margin: 0 0 8px 0;
}

.message.system strong {
    font-weight: 600; color: var(--text-dark);
}

.message.system ul, .message.system ol {
    margin: 5px 0 12px 20px; padding-left: 5px;
}

.message.system code {
    background-color: #f1f3f5; padding: 2px 5px; border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
}

.message.system pre {
    background-color: #f1f3f5; padding: 10px; border-radius: 6px; 
    overflow-x: auto; margin: 10px 0;
}

.message.system pre code {
    background-color: transparent;
    padding: 0;
}

/* -- fin estilos markdown */

.chat-input-area {
    padding: 15px; border-top: 1px solid #eee; 
    display: flex; gap: 10px; background-color: #f5f6fb;
}

#user-input {
    flex: 1; border: 1px solid #ddd; border-radius: 5px; padding: 8px;
    resize: none; font-family: inherit; height: 40px;
}

#send-btn {
    /* background: var(--accent-color);  */
    background: linear-gradient(135deg, #0468b1 0%, #035998 100%);
    color: white; 
    border: none;
    padding: 10px 15px; border-radius: 5px; cursor: pointer;
}

/* .fab {
    position: fixed; bottom: 70px; right: 20px;
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg, #0468b1 0%, #035998 100%);
    color: white; border: none;
    font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
} */

.fab {
    position: fixed; 
    bottom: 70px; 
    right: 20px;
    width: 80px; 
    height: 80px; 
    border-radius: 50%;
    
    /* Configuración del borde y fondo */
    background: #ffffff; /* Fondo blanco para las imágenes */
    border: 3px solid #0468b1; /* Borde circular con el color principal */
    
    /* Centrado de la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden; /* Evita que la imagen se salga del círculo */
    
    cursor: pointer; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Nuevo estilo para la imagen seleccionada aleatoriamente */
#fab-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen manteniendo su proporción */
    border-radius: 50%;
}

.hidden { display: none; }


/* Animación de "Pensando..." */
.message.thinking {
    /* background: #eef2f7; */
    background: transparent;
    color: #5c5c5c;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dots {
    display: inline-flex;
    gap: 4px;
}

.dots span {
    width: 6px;
    height: 6px;
    background-color: #5c5c5c;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.dots span:nth-child(1) { animation-delay: -0.32s; }
.dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}