/* Root variables for theme colors and sizing */
:root {
 --primary-color: #9CC3C0; /* Primary color, used for user messages */
 --secondary-color: #FEFDFB; /* Secondary color, used for bot messages and background elements */
 --background-color: #FBF8F3; /* Main background color */
 --text-color: #333333; /* Default text color */
 --accent-color: #4FD1C5; /* Accent color, used for blockquotes */
 --code-background: #f8f9fa; /* Background color for code blocks */
 --button-primary-color: #5D9495; /* Color for the send button */
 --button-secondary-color: #888888; /* Color for the upload button (note: this variable is defined but not used in the provided CSS) */
 --button-inactive-color: #D3D3D3; /* Color for inactive buttons (note: this variable is defined but not used) */
 --highlight-color: #DAA691; /* Highlight color, used for input focus */
 --header-icon-height: 32px; /* Puedes ajustar este valor */
}

/* Basic reset and full height for html and body */
html, body {
    height: 100%; /* Make html and body take full viewport height */
    margin: 0; /* Remove default margin */
    /* overflow: hidden;  Prevent unwanted scrollbars on the body */
}

/* Body styles */
body {
 font-family: 'Roboto', sans-serif; /* Set the font family */
 background-color: var(--background-color); /* Use background color from variables */
 color: var(--text-color); /* Use text color from variables */
 line-height: 1.6; /* Set line height for readability */
 display: flex; /* Use flexbox for centering content */
 justify-content: center; /* Center content horizontally */
 align-items: center; /* Center content vertically */
}

/* Container for the chat application */
.container {
 width: 100%; /* Take full width */
 height: 100%; /* Take full height */
}

/* Main chat container */
.chat-container {
 max-width: 800px; /* Maximum width for larger screens */
 width: 100%; /* Take full width on smaller screens */
 height: 100%; /* Take full height */
 background-color: var(--background-color); /* Use background color from variables */
 display: flex; /* Use flexbox */
 flex-direction: column; /* Stack children vertically */
 box-sizing: border-box; /* Include padding and border in the element's total width and height */
 position: relative; /* Needed for sticky positioning of title and input */
 margin: 0 auto; /* Centra el contenedor del chat en el body */

/*
  Añadimos un padding en la parte inferior para dejar espacio
  a la barra amarilla del emulador de Firebase.  Descomentar para usar emulador
 padding-bottom: 50px;
 */

}
/* --- INICIO: Estilos para la nueva cabecera personalizada --- */
.chat-header-custom {
    display: flex;
    justify-content: space-between; /* Logo a la izquierda, icono de usuario a la derecha */
    align-items: center; /* Alineación vertical */
    padding: 0.75rem 1rem; /* Ajusta el padding según necesites */
    background-color: var(--background-color); /* Para que tape el scroll */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra sutil, similar al título anterior */
    position: sticky;
    top: 0;
    z-index: 10; /* Asegurar que esté por encima de los mensajes */
    width: 100%;
    box-sizing: border-box;
}

.header-logo,
.header-user-icon {
    height: var(--header-icon-height); /* Controla la altura aquí */
    width: auto;                       /* Mantiene la proporción de la imagen */
    display: block;                    /* Buena práctica para imágenes */
}

.header-logo {
    /* Puedes añadir márgenes específicos si es necesario */
    /* margin-right: auto; */ /* Esto no es necesario con space-between */
}

.header-user-icon {
    /* Puedes añadir márgenes específicos si es necesario */
    /* margin-left: auto; */ /* Esto no es necesario con space-between */
    border-radius: 50%; /* Opcional: para hacer el icono de usuario redondo si la imagen es cuadrada */
    /* object-fit: cover; */ /* Opcional: si la imagen de usuario no es cuadrada y quieres que llene el círculo */
}
/* --- FIN: Estilos para la nueva cabecera personalizada --- */

/* Container for chat messages */
.chat-messages {
    flex-grow: 1; /* Ocupa todo el espacio vertical disponible */
    overflow-y: auto; /* Permite el scroll cuando sea necesario */
    padding: 1rem; /* Mantiene un espacio interno */
    display: flex; /* Lo convertimos en contenedor flex */
    flex-direction: column; /* Apilamos los mensajes verticalmente */
}

/* Individual message styles */
.message {
 /* margin-bottom: 0.5rem; /* Space between messages */
 padding: 0.75rem 1.2rem; /* Padding inside messages */
 max-width: 100%; /* Maximum width for messages */
 font-size: 14px; /* Set font size */
 line-height: 1.4; /* Set line height */
 min-height: 20px; /* Minimum height for messages */
 width: fit-content; /* Adjust width to content */
 min-width: 40%; /* Minimum width for messages */
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* Add a subtle shadow */
 overflow: hidden; /* Hide overflowing content */
}

/* Styles for bot messages */
.bot-message {
 background-color: var(--secondary-color); /* Use secondary color from variables */
 color: var(--text-color); /* Use text color from variables */
 margin-left: 0; /* Resetea el margen si está dentro de .bot-wrapper */
 margin-right: 0;
 /* Adjusted border radius for bubble shape - Peak at bottom-left */
 border-top-left-radius: 12px;
 border-top-right-radius: 12px;
 border-bottom-left-radius: 0; /* Sharp corner at bottom-left */
 border-bottom-right-radius: 12px;
 max-width: 80%; /* Maximum width for bot messages */
}

/* Styles for user messages */
.user-message {
 background-color: var(--primary-color); /* Use primary color from variables */
 color: white; /* Set text color to white */
 margin-left: 0; /* Resetea el margen si está dentro de .user-wrapper */
 margin-right: 0;
 border-top-left-radius: 12px; /* Adjust border radius for bubble shape */
 border-top-right-radius: 12px;
 border-bottom-left-radius: 12px;
 border-bottom-right-radius: 0px;
 max-width: 80%; /* Maximum width for user messages */
}

.message-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%; /* Para que los contenedores de botones se puedan alinear correctamente */
    /* margin-bottom: 0.5rem; /* Movido de .message a aquí para espaciar wrappers completos */
}

.chat-buttons-container {
    display: flex;
    flex-wrap: wrap; /* Los botones pueden pasar a la siguiente línea si no caben */
    gap: 0.5rem;     /* Espacio horizontal y vertical entre botones */
    margin-top: 0.75rem; /* Espacio entre el mensaje del bot y sus botones */
    /* align-self: flex-start; /* Asegura que el contenedor de botones se alinee con el inicio del mensaje */
                           /* Esto es si .chat-buttons-container es hermano de .bot-message y ambos están en un flex container */
}

.chat-action-button {
    padding: 0.6em 1em; /* Ajusta el padding para un buen tamaño */
    font-size: 0.85em;   /* Un poco más pequeño que el texto del chat */
    color: var(--button-primary-color);
    background-color: transparent; /* Fondo transparente */
    border: 1px solid var(--button-primary-color);
    border-radius: 15px; /* Bordes redondeados */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    text-align: center;
}

.chat-action-button:hover {
    background-color: var(--button-primary-color);
    color: white;
}

.chat-action-button.disabled {
    background-color: #f0f0f0; /* Un color de fondo más apagado */
    color: #ababab;      /* Color de texto apagado */
    border-color: #d0d0d0;  /* Borde apagado */
    cursor: not-allowed;   /* Cambia el cursor para indicar que está deshabilitado */
}


.bot-wrapper {
    align-items: flex-start; /* Alinea el contenido del bot (mensaje y botones) a la izquierda */
    margin-left: 0.5rem; /* Empuja todo el wrapper del bot un poco */
    max-width: 80%; /* Consistente con .bot-message */
    margin-bottom: 0.5rem; /* Espacio entre mensajes/grupos de botones */
}

.user-wrapper {
    align-items: flex-end; /* Alinea el contenido del usuario a la derecha */
    margin-right: 0.5rem; /* Empuja todo el wrapper del usuario un poco */
    max-width: 80%; /* Consistente con .user-message */
    margin-left: auto; /* Para empujar a la derecha */
    margin-bottom: 0.5rem;
}

/* --- INICIO: NUEVO ESTILO PARA EL SEPARADOR DE SESIÓN --- */
.session-separator {
    text-align: center; /* Centra el texto */
    margin: 1.5rem 1rem; /* Espacio vertical y horizontal */
    color: #999; /* Un color sutil */
    font-size: 0.8em; /* Texto un poco más pequeño */
    font-style: italic;
    display: flex;
    align-items: center; /* Alinea la línea con el texto */
}

.session-separator::before,
.session-separator::after {
    content: '';
    flex-grow: 1; /* Hace que las líneas ocupen el espacio disponible */
    height: 1px; /* Grosor de la línea */
    background-color: #e0e0e0; /* Color de la línea */
    margin: 0 0.5rem; /* Espacio entre la línea y el texto */
}
/* --- FIN: NUEVO ESTILO PARA EL SEPARADOR DE SESIÓN --- */

/* Styles for images within messages */
.chat-image {
    max-width: 100%; /* Limit image width to the message container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Prevent extra space below the image */
    border-radius: 8px; /* Add rounded corners to images */
}
/*
 * Esta nueva regla se asegura de que CUALQUIER imagen dentro de una burbuja de mensaje
 * (sea de usuario o de bot) se ajuste correctamente y no se desborde.
 * Hereda los estilos de .chat-image para mantener la consistencia visual.
 */
.message img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    margin-top: 8px; /* Añade un pequeño espacio si la imagen viene después de un texto */
}

/* Remove default margin from paragraphs within messages */
.bot-message p,
.user-message p {
 margin: 0;
}

/* Markdown heading styles within bot messages */
.bot-message h1,
.bot-message h2,
.bot-message h3,
.bot-message h4,
.bot-message h5,
.bot-message h6 {
 margin-top: 0.5em; /* Add top margin to headings */
 margin-bottom: 0.5em; /* Add bottom margin to headings */
 font-weight: 600; /* Set font weight for headings */
}

/* Markdown code styles within bot messages */
.bot-message code {
 background-color: var(--code-background); /* Use code background color */
 padding: 0.2em 0.4em; /* Add padding around inline code */
 border-radius: 3px; /* Add rounded corners to inline code */
 font-family: monospace; /* Use a monospace font for code */
 font-size: 0.9em; /* Slightly reduce font size for inline code */
}

/* Markdown preformatted text (code blocks) within bot messages */
.bot-message pre {
 background-color: var(--code-background); /* Use code background color */
 padding: 1em; /* Add padding around code blocks */
 border-radius: 5px; /* Add rounded corners to code blocks */
 overflow-x: auto; /* Add horizontal scroll if code overflows */
 margin: 0.5em 0; /* Add top and bottom margin to code blocks */
}

/* Style for code within pre blocks to remove background and padding */
.bot-message pre code {
 background-color: transparent; /* Remove background from code inside pre */
 padding: 0; /* Remove padding from code inside pre */
}

/* Markdown list styles within bot messages */
.bot-message ul,
.bot-message ol {
 margin: 0.5em 0; /* Add top and bottom margin to lists */
 padding-left: 1.5em; /* Add left padding to lists */
}

/* Markdown blockquote styles within bot messages */
.bot-message blockquote {
 border-left: 4px solid var(--accent-color); /* Add a left border with accent color */
 margin: 0.5em 0; /* Add top and bottom margin */
 padding-left: 1em; /* Add left padding */
 color: #666; /* Set text color for blockquotes */
}

/* Link styles within user messages */
.user-message a,
.user-message a[href^="mailto:"] {
 color: white; /* Set link color to white */
 font-weight: bold; /* Make links bold */
 text-decoration: underline; /* Underline links */
}

/* Link styles within bot messages */
.bot-message a,
.bot-message a[href^="mailto:"] {
 color: var(--button-primary-color); /* Use primary button color for links */
 font-weight: bold; /* Make links bold */
 text-decoration: underline; /* Underline links */
}

/* Input container styles */
.input-container {
    display: flex; /* Use flexbox for layout */
    gap: 0.5rem; /* Add space between input elements */
 position: sticky; /* Make the input container sticky */
    bottom: 0; /* Stick to the bottom */
    background: var(--background-color); /* Use background color from variables */
    padding: 0.5rem 1rem; /* Add padding */
    border-top: 1px solid var(--secondary-color); /* Add a top border */
    align-items: center; /* Vertically align items in the center */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    z-index: 2; /* Ensure it's above other elements */
}

/* User input field styles */
#user-input {
 flex-grow: 1; /* Allow the input field to grow and fill space */
 padding: 0.5rem; /* Add padding */
 border: 1px solid var(--secondary-color); /* Add a border */
 border-radius: 12px; /* Add rounded corners */
 font-size: 16px; /* Set font size, prevents zoom on mobile Safari */
}

/* Styles for user input when focused */
#user-input:focus {
 outline: none; /* Remove default outline */
 border: 2px solid var(--highlight-color); /* Change border color and thickness */
 box-shadow: none; /* Remove box shadow */
}

/* Styles for send and upload buttons */
.send-button,
.upload-button {
 padding: 0.5rem; /* Add padding */
 background-color: var(--button-primary-color); /* Use primary button color */
 color: white; /* Set text/icon color to white */
 border: none; /* Remove border */
 border-radius: 50%; /* Make buttons round */
 cursor: pointer; /* Show pointer cursor on hover */
 transition: background-color 0.3s; /* Add a smooth transition for background color */
 width: 40px; /* Set button width */
 height: 40px; /* Set button height */
 display: flex; /* Use flexbox for centering icon */
 align-items: center; /* Center icon vertically */
 justify-content: center; /* Center icon horizontally */
}

/* Hover effect for send and upload buttons */
.send-button:hover,
.upload-button:hover {
 background-color: #6DA5A6; /* Slightly darker background on hover */
}

/* Typing indicator styles */
.typing-indicator {
display: flex; /* <-- CAMBIO CLAVE: Usamos flexbox para el alineamiento */
align-items: center; /* <-- CAMBIO CLAVE: Centramos los puntos verticalmente */
background-color: var(--secondary-color);
padding: 0.75rem 1.2rem;

/* --- CORRECCIÓN DE ESTILO --- */
/* Hacemos que la burbuja sea consistente con los mensajes del bot */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 12px;

margin-bottom: 0.5rem;
max-width: 90%;
margin-right: auto;
margin-left: 0.5rem;
width: fit-content;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
min-height: 20px;
/* La propiedad 'line-height' ya no es necesaria gracias a flexbox */
}

/* Styles for the dots in the typing indicator */
.typing-indicator span {
 display: inline-block; /* Display as inline block */
 animation: typingDot 1.4s infinite; /* Apply typing animation */
 margin: 0 2px; /* Add horizontal margin between dots */
 font-size: 14px; /* Set font size */
 line-height: 1; /* Set line height */
 vertical-align: middle; /* Vertically align dots */
}

/* Animation delay for the second dot */
.typing-indicator span:nth-child(2) {
 animation-delay: 0.2s;
}

/* Animation delay for the third dot */
.typing-indicator span:nth-child(3) {
 animation-delay: 0.4s;
}

/* Keyframes for the typing animation */
@keyframes typingDot {
 0%, 60%, 100% {
 transform: translateY(0); /* Default position */
 opacity: 0.6; /* Slightly transparent */
 }
 30% {
 transform: translateY(-4px); /* Move dot up */
 opacity: 1; /* Fully opaque */
 }
}

/* Media Queries for responsive design */

/* Styles for screens smaller than 768px */
@media (max-width: 768px) {
 .chat-container {
 max-width: 100%; /* Allow chat container to take full width */
 }

 .chat-messages {
    height: auto; /* Allow message area height to adjust based on content */
    min-height: 0; /* Remove minimum height restriction */
    padding: 0.5rem 0; /* Adjust padding */
 }

 .message {
 font-size: 14px; /* Adjust font size */
 padding: 0.5rem 0.8rem; /* Adjust padding */
 max-width: 90%; /* Maintain max width */
 }

 .chat-image {
    max-width: 100%; /* Ensure images don't exceed container width on mobile */
 }

 .input-container {
 padding: 0.5rem; /* Adjust padding */
 }

 .send-button,
 .upload-button {
 width: 36px; /* Adjust button size */
 height: 36px; /* Adjust button size */
 }

 #user-input {
 font-size: 16px; /* Maintain font size to prevent mobile zoom */
 }
}

/* Styles for screens between 769px and 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
 .chat-container {
 max-width: 90%; /* Set max width for medium screens */
 }

 .message {
 font-size: 15px; /* Adjust font size */
 padding: 0.75rem 1rem; /* Adjust padding */
 }
}

/* Styles for screens larger than 1025px */
@media (min-width: 1025px) {
 .chat-container {
 max-width: 800px; /* Set max width for large screens */
 }

 .message {
 font-size: 16px; /* Adjust font size */
 padding: 1rem 1.5rem; /* Adjust padding */
 }

 .chat-image {
    max-width: 100%; /* Ensure images don't exceed container width */
 }
}

/* --- INICIO: Estilos para el Menú Desplegable de Usuario --- */

/* Contenedor principal para el menú y su activador */
.user-menu-container {
    position: relative; /* Necesario para posicionar el menú desplegable */
    display: inline-block;
}

/* El área clickeable (nombre + icono) */
.user-menu-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px; /* Añade un poco de espacio para que sea más fácil hacer clic */
    border-radius: 8px; /* Bordes redondeados sutiles */
    transition: background-color 0.2s ease-in-out;
}

/* Efecto hover para dispositivos con ratón */
.user-menu-trigger:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#user-display-name {
    margin-right: 10px;
    font-weight: 500;
    color: var(--text-color);
}

/* El menú desplegable en sí */
.user-dropdown-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 100%; /* Justo debajo del activador */
    right: 0;
    background-color: var(--secondary-color);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
    z-index: 100;
    border-radius: 8px;
    overflow: hidden; /* Para que los bordes redondeados se apliquen a los items */
    opacity: 0; /* Para la animación de aparición */
    transform: translateY(10px); /* Para la animación de deslizamiento */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Estilo para los ítems dentro del menú */
.user-dropdown-menu a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9em;
}

/* Efecto hover para los ítems del menú */
.user-dropdown-menu a:hover {
    background-color: #f1f1f1;
}

/* Clase para mostrar el menú (se añade/quita con JS) */
.user-dropdown-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.chat-messages > .message-wrapper:first-child {
    margin-top: auto;
}


/* --- FIN: Estilos para el Menú Desplegable de Usuario --- */