/* General settings and Dark Theme */
:root {
    --background-color: #121212;
    --surface-color: #1E1E1E;
    --primary-color: #2979FF;
    --primary-variant-color: #448AFF;
    --secondary-color: #607D8B;
    --text-primary-color: #E0E0EE;
    --text-secondary-color: #B0B0B0;
    --border-color: #444444;
    --font-family: 'Poppins', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

/* Header and Footer */
#header, #footer {
    position: fixed; left: 0; right: 0;
    background: var(--surface-color);
    padding: 0 20px;
    z-index: 1001;
    border-bottom: 1px solid var(--border-color);
}
#header { top: 0; height: 70px; display: flex; align-items: center; justify-content: space-between; }
#footer { bottom: 0; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 0.875rem; color: var(--text-secondary-color); border-top: 1px solid var(--border-color); border-bottom: none; background: var(--background-color); }

.logo { width: 50px; height: 50px; background: url('intuyt.jpg') no-repeat center/contain; }

/* General Button Styling (Header) */
#header button {
    border: none; color: #FFFFFF; padding: 12px 24px; border-radius: 25px;
    cursor: pointer; font-weight: 600; font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.2s ease-in-out;
    margin-left: 12px;
    background-color: var(--secondary-color);
}
#header button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); background-color: #78909C; }

/* History Panel */
#history { position: fixed; top: 70px; left: -100%; width: 300px; bottom: 50px; background: var(--surface-color); box-shadow: 4px 0 12px rgba(0,0,0,0.2); overflow-y: auto; transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); padding: 20px; z-index: 1000; border-right: 1px solid var(--border-color); }
#history.open { left: 0; } /* <-- ESTA CLASE HACE VISIBLE EL PANEL */
#history h4 { margin-bottom: 15px; font-size: 1.25rem; font-weight: 800; }
#history ul { list-style: none; }
#history li { background: var(--background-color); margin-bottom: 8px; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 1rem; color: var(--text-secondary-color); border: 1px solid var(--border-color); transition: background-color 0.2s ease, transform 0.2s ease; }
#history li:hover { background-color: #333; transform: translateX(5px); }

/* Chat Container */
#chat-container { width: 100%; max-width: 850px; height: calc(100vh - 120px); margin: 70px 0 50px; background: var(--background-color); border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; }

#messages { flex: 1; overflow-y: auto; padding: 25px; font-size: 1.125rem; display: flex; flex-direction: column; }

/* Code Blocks */
.assistant-message pre { background-color: #111; border-radius: 8px; padding: 16px; margin-top: 10px; font-family: 'Courier New', Courier, monospace; font-size: 0.9rem; white-space: pre-wrap; word-break: break-all; max-height: 400px; overflow-y: auto; scrollbar-gutter: stable; }

.chat-message { margin: 15px 0; padding: 12px 22px; border-radius: 22px; word-wrap: break-word; line-height: 1.5; position: relative; max-width: 85%; }
.thinking { animation: thinkingBlink 1.5s ease-in-out infinite; }
@keyframes thinkingBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.user-message { background: var(--primary-color); color: #FFFFFF; align-self: flex-end; margin-left: auto; }
.assistant-message { background: var(--surface-color); align-self: flex-start; }
.assistant-message .meta { display: block; text-align: right; font-size: 0.75rem; color: var(--text-secondary-color); margin-top: 8px; }

/* --- ÁREA DE ENTRADA UNIFICADA --- */

.input-area-wrapper {
    display: flex;
    align-items: flex-end; /* Alinea todo en la parte inferior */
    gap: 10px;
    padding: 15px;
    border-top: 1px solid var(--border-color);
    background-color: var(--surface-color);
}

/* Botones de control (Búsqueda, Voz, Grabación) */
.control-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background-color: var(--secondary-color);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* --- ESTILOS PARA LOS NUEVOS ICONOS SVG --- */
.control-button svg {
    width: 24px;  /* Tamaño del icono */
    height: 24px;
    fill: #FFFFFF; /* Color del icono (blanco) */
}

.control-button:hover { background-color: #78909C; }
.control-button.active { background-color: var(--primary-color); } /* <-- Esto hará el "toggle" */
.control-button:active { transform: scale(0.95); }

/* Formulario y sus elementos */
#chat-form {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
#message {
    flex-grow: 1;
    padding: 12px 20px;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    outline: none;
    font-size: 1rem;
    line-height: 1.5;
    font-family: var(--font-family);
    resize: none;
    min-height: 48px;
    max-height: 100px;
    background-color: #333;
    color: var(--text-primary-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    scrollbar-gutter: stable;
}
#message::placeholder { color: var(--text-secondary-color); opacity: 0.7; }
#message:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.2); }

#chat-form button[type="submit"] {
    width: 70px;
    min-width: 70px;
    height: 48px;
    padding: 0;
    margin: 0;
    border: none;
    cursor: pointer;
    color: white;
    font-weight: 600;
    border-radius: 24px;
    background-color: var(--primary-color);
    transition: background-color 0.2s ease;
}
#chat-form button[type="submit"]:hover { background-color: var(--primary-variant-color); }

/* --- FIN DEL ÁREA DE ENTRADA --- */

/* Scrollbars */
#message::-webkit-scrollbar, .assistant-message pre::-webkit-scrollbar { width: 14px; }
#message::-webkit-scrollbar-track, .assistant-message pre::-webkit-scrollbar-track { background: transparent; }
#message::-webkit-scrollbar-thumb, .assistant-message pre::-webkit-scrollbar-thumb { border: 4px solid transparent; background-clip: content-box; border-radius: 7px; background-color: transparent; transition: background-color 0.2s ease-in-out; }
#message:hover::-webkit-scrollbar-thumb, .assistant-message pre:hover::-webkit-scrollbar-thumb { background-color: var(--secondary-color); }
#message::-webkit-scrollbar-thumb:hover, .assistant-message pre::-webkit-scrollbar-thumb:hover { background-color: #78909C; }

/* Mobile */
@media (max-width: 768px) {
    #header { padding: 0 10px; }
    #header button { padding: 10px 16px; font-size: 0.9rem; margin-left: 8px; }
    #chat-container { height: calc(100vh - 120px); border-radius: 0; }
    #messages { padding: 15px; font-size: 1rem; }
    #history { width: 250px; }
    
    .input-area-wrapper { padding: 10px; gap: 8px; }
    .control-button { width: 44px; height: 44px; min-width: 44px; font-size: 1.3rem; }
    #message { min-height: 44px; }
    #chat-form button[type="submit"] { height: 44px; width: 60px; min-width: 60px; }
}