/* ================================================= */
/*          ESTILOS DEL CHATBOT INDEPENDIENTE v4.0   */
/*        (EXPERIENCIA VISUAL Y RESPONSIVE MÁXIMA)   */
/* ================================================= */

/* Contenedor principal que orquesta todo */
#ai-chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1001;
}

/* Botón flotante: ahora con un z-index más alto para estar siempre encima */
#chat-toggle-button {
    position: relative;
    z-index: 1002; /* Más alto que la ventana del chat */
    width: 60px;
    height: 60px;
    background: var(--color-primary-accent);
    color: var(--color-btn-primary-text);
    border: none;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    overflow: hidden;
}

#chat-toggle-button:hover {
    transform: scale(1.1);
    box-shadow: var(--glow-primary);
}

/* Animación suave para el cambio de icono (hamburguesa a X) */
#chat-toggle-button .fas {
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: absolute;
}
#chat-toggle-button .fa-times {
    transform: rotate(-90deg) scale(0.5);
    opacity: 0;
}
#ai-chat-container.chat-open #chat-toggle-button .fa-robot {
    transform: rotate(90deg) scale(0.5);
    opacity: 0;
}
#ai-chat-container.chat-open #chat-toggle-button .fa-times {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}

/* Ventana del chat: Rediseñada para una mejor experiencia y animación */
#chat-window {
    position: absolute;
    bottom: calc(100% + 15px);
    right: 0;
    width: 370px; /* Un poco más ancha para comodidad */
    height: 600px;
    max-height: 75vh;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    
    /* Nueva animación de entrada: más sutil */
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
}

/* Estado visible de la ventana */
#ai-chat-container.chat-open #chat-window {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Cabecera y área de input con un sutil efecto de profundidad */
#chat-header, #chat-input-container {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background-color: var(--bg-glass);
    backdrop-filter: blur(5px);
}
#chat-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}
#chat-header h3 { font-size: 1.2rem; color: var(--color-text-primary); margin: 0; }
#chat-header p { font-size: 0.85rem; color: var(--color-text-secondary); margin: 0.25rem 0 0; }

/* Área de mensajes con scrollbar personalizado y scroll suave */
#chat-messages {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    overscroll-behavior: contain;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)); /* Espacio extra para el notch */
    scroll-behavior: smooth; /* Anima el scroll al recibir mensajes nuevos */
}

/* === MEJORA DE SCROLLBAR === */
/* Para navegadores WebKit (Chrome, Safari, Edge) */
#chat-messages::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de scroll */
}

#chat-messages::-webkit-scrollbar-track {
    background: transparent; /* El fondo de la barra es invisible */
    margin-block: 5px;
}

#chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(var(--color-primary-accent-rgb), 0.3); /* Color del "pulgar" */
    border-radius: 10px; /* Bordes redondeados */
    border: 2px solid var(--color-surface); /* Crea un efecto de "padding" */
    transition: background-color 0.2s ease;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--color-primary-accent-rgb), 0.5); /* Color al pasar el ratón */
}

/* Para Firefox */
@supports (scrollbar-color: auto) {
  #chat-messages {
    scrollbar-width: thin; /* Opciones: 'auto', 'thin', 'none' */
    scrollbar-color: rgba(var(--color-primary-accent-rgb), 0.5) transparent; /* color del pulgar y del track */
  }
}

/* Estilos de mensajes mejorados */
.chat-message {
    max-width: 85%;
    padding: 0.8rem 1.1rem;
    border-radius: 18px;
    line-height: 1.6;
    word-wrap: break-word;
    white-space: pre-wrap;
    animation: slideIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes slideIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.chat-message.bot { background: rgba(var(--color-primary-accent-rgb), 0.1); color: var(--color-text-primary); border-bottom-left-radius: 5px; align-self: flex-start; }
.chat-message.user { background: var(--color-primary-accent); color: var(--color-btn-primary-text); border-bottom-right-radius: 5px; align-self: flex-end; }
.chat-message.bot.thinking p { display: flex; align-items: center; gap: 8px; }
.typing-indicator span { height: 8px; width: 8px; background-color: var(--color-text-secondary); border-radius: 50%; display: inline-block; animation: bounce 1.4s infinite ease-in-out both; }
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }

/* Área de entrada de texto */
#chat-input-container { display: flex; align-items: center; padding: 1rem; border-top: 1px solid var(--color-border); padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
#chat-input { flex-grow: 1; border: none; background: var(--color-background); color: var(--color-text-primary); padding: 0.8rem 1rem; border-radius: 10px; font-family: var(--font-family-base); font-size: 1rem; resize: none; }
body.light-mode #chat-input { background: #EAECEF; }
#chat-send-button { background: none; border: none; color: var(--color-primary-accent); font-size: 1.5rem; cursor: pointer; padding: 0 0.5rem 0 1.2rem; transition: transform 0.2s ease; }
#chat-send-button:hover { transform: scale(1.15); }

/* ================================================= */
/*          ADAPTACIÓN AVANZADA PARA MÓVILES         */
/* ================================================= */
@media (max-width: 600px) {
    #ai-chat-container {
        /* Hacemos que el contenedor ocupe los bordes para un mejor posicionamiento */
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* Solo los elementos hijos serán clickables */
    }

    #chat-toggle-button {
        pointer-events: auto; /* Hacemos el botón clickable */
        position: absolute;
        bottom: 20px;
        right: 20px;
    }

    #chat-window {
        position: fixed; /* Posición fija para controlar la altura perfectamente */
        bottom: 95px; /* Altura del botón (60px) + margen (20px) + extra (15px) */
        right: 20px;
        width: calc(100% - 40px); /* Ocupa todo el ancho menos los márgenes */
        
        /* La altura es controlada por la variable JS para una precisión máxima */
        height: var(--chat-window-height, 500px);
        max-height: calc(100% - 115px); /* Altura del botón + márgenes + barra de estado superior */
    }
}