/* ==========================================================================
   CSS Profesional para Tere IA - Versión Estable y Definitiva
   ========================================================================== */

:root {
    --dark-bg: #0A0B0D; --dark-panel: #16181D; --dark-interactive: #22262B; --dark-border: #2A2F37;
    --text-primary: #F0F4F8; --text-secondary: #8D93A1; --font-main: 'Inter', sans-serif;
    --accent-primary: #4A80F0; --accent-hover: #6395f3; --accent-danger: #D93025;
    --radius-md: 12px; --radius-xl: 24px;
    --shadow-interactive: 0 0 0 3px rgba(74, 128, 240, 0.25);
    --shadow-lifted: 0 4px 15px rgba(0,0,0,0.2);
}

body, html { height: 100%; margin: 0; font-family: var(--font-main); background-color: var(--dark-bg); color: var(--text-primary); overflow: hidden; }
.view { display: none; opacity: 0; transition: opacity 0.4s ease; width: 100vw; height: 100vh; }
.view.active-view { display: flex; opacity: 1; }

#welcome-view { flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
.welcome-content { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 100%; max-width: 750px; }
.logo-container { margin-bottom: 1rem; text-align: center;} .logo-icon { color: var(--accent-primary); } .logo-text { font-weight: 700; font-size: 3.5rem; }
.prompt-box { position: relative; width: 100%; background-color: var(--dark-panel); border-radius: var(--radius-xl); border: 1px solid var(--dark-border); padding: 0.75rem 1rem 0.75rem 1.5rem; display: flex; align-items: center; transition: all 0.2s ease; box-shadow: var(--shadow-lifted); }
.prompt-box:focus-within { border-color: var(--accent-primary); box-shadow: var(--shadow-interactive); }
#welcome-input { width: 100%; background: none; border: none; outline: none; color: var(--text-primary); font-size: 1.2rem; padding: 0.5rem; }
.send-icon-btn { background: var(--dark-interactive); color: var(--text-primary); border: none; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; transition: all 0.2s ease; display: grid; place-items: center; }
.send-icon-btn:hover { background: var(--accent-primary); transform: scale(1.1) rotate(90deg); }
.terms-text { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2rem;}

#conversation-view { /* Flex behavior from .view.active-view */ }
#history-sidebar { width: 280px; background-color: var(--dark-panel); border-right: 1px solid var(--dark-border); padding: 1.5rem; display: flex; flex-direction: column; flex-shrink: 0; }
#history-sidebar h4 { font-weight: 700; border-bottom: 1px solid var(--dark-border); padding-bottom: 1rem; }
#history-list { display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; padding-right: 0.5rem; margin-top: 1rem;}
.history-item { padding: 0.75rem 1rem; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent; transition: all 0.2s ease; }
.history-item:hover { background-color: var(--dark-interactive); }
.history-item.active { background-color: var(--accent-primary); color: white; }
.btn-new-chat { width: 100%; background: var(--accent-primary); color: white; border: none; padding: 0.85rem; border-radius: var(--radius-md); cursor: pointer; margin-top: auto; font-weight: 500; transition: all 0.2s ease; }
.btn-new-chat:hover { background-color: var(--accent-hover); }

main { background-color: var(--dark-bg); flex-grow: 1; display: flex; flex-direction: column; height: 100vh; }
main > header, main > footer { width: 100%; max-width: 1100px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; flex-shrink: 0; }
main > header { padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--dark-border); display: flex; justify-content: space-between; align-items: center; }
main > footer { padding-top: 1rem; padding-bottom: 1.5rem; }
#chat-window { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.5rem; overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column; gap: 1rem; }
.chat-message { max-width: 85%; padding: 1rem 1.5rem; border-radius: var(--radius-xl); position: relative; line-height: 1.6; animation: slideUp 0.4s ease-out; }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.user-message { background: var(--accent-primary); color: white; align-self: flex-end; border-bottom-right-radius: 6px; }
.bot-message { background: var(--dark-panel); align-self: flex-start; border-bottom-left-radius: 6px; border: 1px solid var(--dark-border); }

.copy-btn { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); color: #ccc; cursor: pointer; border-radius: 8px; opacity: 0; transition: all 0.3s; font-size: 0.9em; padding: 5px 8px; }
.bot-message:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: #fff; background: rgba(0,0,0,0.4); }

.input-group { display: flex; align-items: flex-end; background-color: var(--dark-panel); border: 1px solid var(--dark-border); border-radius: var(--radius-md); padding: 0.5rem; transition: all 0.2s ease;}
.input-group:focus-within { border-color: var(--accent-primary); box-shadow: var(--shadow-interactive); }
#chat-input { background-color: transparent; color: var(--text-primary); border: none; padding: 0.5rem; font-size: 1.1rem; resize: none; line-height: 1.5; flex-grow: 1; outline: none;}
.btn-icon { background: var(--dark-interactive); color: var(--text-secondary); border: none; border-radius: 8px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; margin-left: 0.5rem; }
.btn-icon:hover { color: var(--text-primary); }
.btn-send { background-color: var(--accent-primary); color: white; }
.btn-send:hover { background-color: var(--accent-hover); }
#chat-mic-btn.recording { background-color: var(--accent-danger); color: white; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.7); } 70% { box-shadow: 0 0 0 12px rgba(217, 48, 37, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0); } }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--dark-bg); }
::-webkit-scrollbar-thumb { background: var(--dark-interactive); border-radius: 10px; border: 3px solid var(--dark-bg); }