/* 1. VARIABLES MONTE POP - TAWHUY (Ajustadas a la Paleta Vibrante) */
:root {
    --tawhuy-neon:    #FF4500;   /* Rojo/Naranja Neón (Flores/Acción) */
    --tawhuy-lima:    #76FF03;   /* Verde Lima (Hojas al Sol/Vibración) */
    --tawhuy-ocre:    #FFD700;   /* Amarillo Ocre (Tierra/Detalles) */
    --tawhuy-tierra:  #8B4513;   /* Marrón Terracota (Base/Contraste) */
    --tawhuy-crudo:   #FAF0E6;   /* Blanco Lino/Crudo (Fondo Chat) */
    --shadow-strong:  0 4px 12px rgba(255, 69, 0, 0.35); /* Sombra color Neón */
}

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

body {
    height: 100dvh; 
    width: 100%; 
    overflow: hidden; 
    position: fixed;
    font-family: 'Nunito', sans-serif;
    background-color: var(--tawhuy-tierra);
    
    /* Fondo con gradiente oscuro para que el neón resalte */
    background-image: 
        linear-gradient(rgba(139, 69, 19, 0.8), rgba(74, 37, 9, 0.9)),
        url('https://elpezvolador.org/wp-content/uploads/2026/03/tawhuy-chaguar.jpg');
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed;
}

/* 2. CONTENEDOR PRINCIPAL */
#app-container {
    background: var(--tawhuy-crudo);
    border: 4px solid var(--tawhuy-tierra);
    height: 96dvh; 
    width: 95%; 
    max-width: 500px;
    display: flex; 
    flex-direction: column;
    border-radius: 2.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    overflow: hidden;
    position: relative;
    margin: auto; /* Centrado para pantallas grandes */
}

header {
    background: linear-gradient(to right, var(--tawhuy-tierra), var(--tawhuy-neon)) !important;
    padding: 1.2rem; 
    color: white; 
    flex-shrink: 0;
}

/* 4. ÁREA DE CHAT */
#chat-area {
    flex: 1; 
    overflow-y: auto; 
    padding: 1.5rem 1rem;
    display: flex; 
    flex-direction: column; 
    gap: 1.2rem; /* Más espacio para que luzcan las burbujas */
    background: rgba(250, 240, 230, 0.8); /* Fondo crudo semitransparente */
}

/* 5. BURBUJAS (Estilo Tawhuy Vibrante) */
.chat-message {
    position: relative; 
    max-width: 85%; 
    padding: 1.2rem 1.5rem;
    font-size: 1.1rem; 
    font-weight: 700; 
    line-height: 1.4;
    box-shadow: var(--shadow-strong);
    border-radius: 1.5rem;
}

/* Burbuja Usuario: Rojo Neón con borde Terracota */
.chat-message.user {
    align-self: flex-end;
    background: var(--tawhuy-neon) !important; 
    color: white !important;
    border-radius: 2rem 2rem 0 2rem;
    border-right: 8px solid var(--tawhuy-tierra) !important;
}

/* Burbuja Bot: Blanca con borde Verde Lima Fluo */
.chat-message.bot {
    align-self: flex-start;
    background: white !important;
    color: var(--tawhuy-tierra) !important;
    border-radius: 2rem 2rem 2rem 0;
    border-left: 8px solid var(--tawhuy-lima) !important;
    box-shadow: 0 4px 10px rgba(118, 255, 3, 0.2);
}

/* Botones y Micro */
#mic-btn {
    background-color: var(--tawhuy-neon) !important;
}

.btn-send {
    background-color: var(--tawhuy-tierra) !important;
}