/* /static/css/qa.css - VERSIÓN FINAL Y COMPLETA */

/* Contenedor principal de la sección QA */
#qa-section > .container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 2.5rem;
    background-color: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

#qa-section h2 {
    text-align: left;
    margin-top: 0;
}
#qa-section .subtitle {
    text-align: left;
    margin-bottom: 2rem;
}

/* --- ESTILOS DE CHAT (COPIADOS Y ADAPTADOS DE LANDING.CSS) --- */

/* Widget de chat dentro de la sección QA */
#qa-section .chat-widget {
    text-align: left;
}

/* Caja de mensajes */
#qa-section .chat-box {
    height: 450px; /* Un poco más alto para conversaciones largas */
    overflow-y: auto;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 1rem;
    background-color: var(--bg-main); /* Fondo más oscuro para contraste */
    border-radius: var(--border-radius);
    border: 1px solid var(--bg-surface);
}

/* Estructura de cada mensaje */
#qa-section .ai-message, 
#qa-section .user-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 85%;
}

/* Alineación del mensaje del usuario */
#qa-section .user-message {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* Avatares */
#qa-section .ai-message .avatar, 
#qa-section .user-message .avatar {
    font-size: 1.5rem;
    flex-shrink: 0; /* Evita que los avatares se encojan */
    margin-top: 5px;
}

/* Burbuja del mensaje (el párrafo <p>) */
#qa-section .ai-message p, 
#qa-section .user-message p {
    padding: 12px 16px;
    border-radius: 18px; /* Burbujas más redondeadas */
    margin: 0;
    line-height: 1.5;
}

/* Color de la burbuja de la IA */
#qa-section .ai-message p {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* Color de la burbuja del Usuario */
#qa-section .user-message p {
    background-color: var(--primary-accent);
    color: var(--text-on-accent);
}

/* Área de input */
#qa-section .chat-input-area {
    display: flex;
    gap: 10px;
}

#qa-section .chat-input-area input {
    flex-grow: 1;
    /* (Hereda estilos de input de layout.css, lo cual está bien) */
}