/* Estilo general - TEMA OSCURO */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #1c1c1c; /* Fondo principal oscuro */
    color: #f0f0f0; /* Texto principal claro */
    margin: 0;
    display: flex;
    justify-content: center;
    height: 100vh;
}

/* Contenedor principal del chat */
.chat-container {
    width: 100%;
    max-width: 75%; /* Un ancho estándar para chats, centrado */
    height: 100vh; /* Ocupa toda la altura */
    background: #1c1c1c; /* Coincide con el body */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Eliminamos box-shadow y border-radius para un look de página completa */
}

/* Título */
h1 {
    text-align: left; /* Alineado a la izquierda como en la captura */
    color: #ececec;
    padding: 20px 20px 10px 20px; /* Ajuste de padding */
    margin: 0;
    font-size: 1.25rem; /* Tamaño más sutil */
    border-bottom: none; /* Sin borde inferior */
    opacity: 0.8; /* Un poco de opacidad como en la captura */
}

/* Caja de mensajes */
.chat-box {
    flex-grow: 1; /* Ocupa todo el espacio vertical disponible */
    padding: 20px;
    overflow-y: auto; /* Scroll cuando hay muchos mensajes */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre burbujas de chat */
}

/* Estilo de cada burbuja de mensaje */
.message {
    padding: 12px 18px;
    border-radius: 20px;
    max-width: 85%; /* Un poco más anchas */
    word-wrap: break-word;
}

.message p {
    margin: 0;
    line-height: 1.5;
}

/* Mensajes del usuario (derecha) */
.message.user {
    background-color: #3a3a3a; /* Gris oscuro para el usuario */
    color: #ececec;
    align-self: flex-end; /* Alineado a la derecha */
    border-bottom-right-radius: 5px;
}

/* Mensajes de la IA (izquierda) */
.message.ia {
    background-color: #2a2a2a; /* Gris un poco más oscuro para la IA */
    color: #ececec; /* Texto claro */
    align-self: flex-start; /* Alineado a la izquierda */
    border-bottom-left-radius: 5px;
}

/* Área de entrada de texto */
.input-area {
    display: flex;
    flex-direction: column; /* Cambiado para apilar el disclaimer */
    border-top: 1px solid #333; /* Borde superior oscuro */
    padding: 20px 15px 15px 15px; /* Ajustado el padding inferior */
    background-color: #1c1c1c; /* Fondo oscuro */
    flex-shrink: 0; /* Evita que el área de input se encoja */
}

/* Contenedor del input y botón */
.input-wrapper {
    display: flex;
    align-items: flex-end; /* Alinea el botón al final del textarea */
}

#user-input {
    flex-grow: 1;
    border: 1px solid #444; /* Borde gris oscuro */
    background-color: #2b2b2b; /* Fondo del input oscuro */
    color: #f0f0f0; /* Texto claro */
    border-radius: 12px; /* Más redondeado, como en la captura */
    padding: 10px 18px; /* Padding interno ajustado */
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
    resize: none; /* Deshabilitamos el resize manual */
    min-height: 24px; /* Altura mínima ajustada */
    max-height: 200px; /* Altura máxima antes del scroll */
    overflow-y: hidden; /* Oculto por defecto, se activa con JavaScript */
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box; /* Incluye padding y border en el cálculo de altura */
}

/* Scrollbar personalizado para el textarea */
#user-input::-webkit-scrollbar {
    width: 6px;
}

#user-input::-webkit-scrollbar-track {
    background: #2b2b2b;
    border-radius: 10px;
}

#user-input::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 10px;
    border: 1px solid #2b2b2b;
}

#user-input::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

#user-input:focus {
    border-color: #555; /* Borde un poco más claro al enfocar */
}

#send-button {
    background-color: #333; /* Botón oscuro */
    color: #ececec; /* Texto claro */
    border: none;
    border-radius: 12px; /* Coincide con el input */
    padding: 12px 20px; /* Coincide con el input */
    margin-left: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.2s;
    height: 44px; /* Altura fija para el botón */
    flex-shrink: 0; /* Evita que el botón se encoja */
}

#send-button:hover {
    background-color: #444; /* Un poco más claro al pasar el mouse */
}

/* Estilo para el botón desactivado */
#send-button:disabled {
    background-color: #2a2a2a;
    color: #555; /* Texto del botón deshabilitado */
    cursor: not-allowed;
}

/* Disclaimer debajo del input */
.disclaimer {
    text-align: center;
    color: #666; /* Gris oscuro */
    font-size: 0.85rem;
    margin-top: 10px;
    opacity: 0.8;
}

/* --- CSS DEL SPINNER --- */
.spinner {
    width: 70px;
    text-align: center;
    padding-top: 5px;
}

.spinner > div {
    width: 12px;
    height: 12px;
    background-color: #888;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0); }
    40% { -webkit-transform: scale(1.0); }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

/* --- Estilos para Bloques de Código --- */
.message.ia pre {
    background-color: #121212; /* Un fondo aún más oscuro para el código */
    border: 1px solid #333; /* Borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    padding: 16px;
    overflow-x: auto; /* Scroll horizontal si el código es muy ancho */
    font-family: "Courier New", Courier, monospace; /* Fuente monoespaciada */
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre; /* Mantiene los espacios y saltos de línea */
}

.message.ia code {
    font-family: inherit; /* Hereda la fuente monoespaciada de <pre> */
    color: #d0d0d0; /* Un color de texto ligeramente diferente para el código */
}


/* --- ESTILOS DE SCROLLBAR PERSONALIZADO --- */

/* Aplicamos el scroll personalizado solo a .chat-box en navegadores WebKit */
.chat-box::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de scroll */
}

/* La "pista" o fondo del scrollbar */
.chat-box::-webkit-scrollbar-track {
    background: #1c1c1c; /* Mismo color que el fondo del body/chat */
    border-radius: 10px;
}

/* La barra o "pulgar" que se mueve */
.chat-box::-webkit-scrollbar-thumb {
    background-color: #444; /* Un gris oscuro que resalta un poco */
    border-radius: 10px; /* Bordes redondeados */
    /* Un pequeño borde que coincide con el fondo para dar un efecto de "flotar" */
    border: 2px solid #1c1c1c; 
}

/* Efecto al pasar el mouse sobre la barra */
.chat-box::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Un gris un poco más claro */
}


/* ========================================
   SCROLLBAR HORIZONTAL - GENERAL Y CÓDIGO
   ======================================== */

/* Scrollbar horizontal general (desactiva vertical) */
::-webkit-scrollbar {
    width: 0px;               /* Vertical desactivado globalmente */
    height: 10px;             /* Solo horizontal activo */
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 8px;
    margin: 0 8px;
}

::-webkit-scrollbar-thumb {
    background: #444;         /* Gris en lugar de verde */
    border-radius: 8px;
    border: 2px solid #1a1a1a;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;         /* Gris más claro al hover */
    cursor: pointer;
}

::-webkit-scrollbar-thumb:active {
    background: #666;         /* Gris aún más claro al click */
}

/* Scrollbar horizontal específico para bloques de código */
.message.ia pre::-webkit-scrollbar {
    width: 0px;
    height: 8px;              /* Más pequeño para código */
}

.message.ia pre::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-radius: 6px;
    margin: 0 6px;
}

.message.ia pre::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 6px;
    border: 2px solid #0a0a0a;
}

.message.ia pre::-webkit-scrollbar-thumb:hover {
    background: #555;         /* Gris al hover */
}

/* Soporte Firefox para scrollbar horizontal */
* {
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1a;  /* Gris en lugar de verde */
}

.message.ia pre {
    scrollbar-width: thin;
    scrollbar-color: #333 #0a0a0a;
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}


/* --- ESTILOS RESPONSIVOS PARA MÓVILES --- */
@media (max-width: 768px) {

    /* Hacemos que el contenedor ocupe toda la pantalla */
    .chat-container {
        max-width: 100%;
    }

    /* Reducimos un poco los paddings generales */
    h1 {
        padding: 15px 15px 10px 15px;
        font-size: 1.15rem; /* Un poco más pequeño en móviles */
    }

    .chat-box {
        padding: 15px;
    }

    .input-area {
        padding: 15px 10px 10px 10px;
    }

    /* Ajustamos las burbujas de chat */
    .message {
        max-width: 90%; /* Dejamos un poco más de espacio */
        padding: 10px 15px;
    }

    /* Ajustamos el área de input */
    #user-input {
        padding: 9px 15px;
        font-size: 0.95rem;
        max-height: 150px; /* Menor altura máxima en móviles */
    }

    #send-button {
        padding: 10px 15px;
        font-size: 0.95rem;
        height: 40px;
    }
    
    /* Hacemos que el padding del bloque de código sea más pequeño */
    .message.ia pre {
        padding: 12px;
    }

    /* Disclaimer más pequeño en móviles */
    .disclaimer {
        font-size: 0.8rem;
        margin-top: 8px;
    }
}