/* ==========================================================
   VARIABLES DE COLOR (Basadas en la foto del Cerro)
   ========================================================== */
:root {
    /* Colores extraídos de la foto */
    --color-cielo: #387ADF;          /* El azul profundo del cielo de la foto */
    --color-awayo-rojo: #9B2226;     /* Rojo profundo de las mantas */
    --color-awayo-naranja: #CA6702;  /* Ocre/Naranja tierra */
    --color-awayo-amarillo: #EE9B00; /* Amarillo sol poniente */
    --color-fondo-piedra: #E5E1DA;   /* El color de las pircas */
    --color-crema-papel: #F8F5F1;    
    --color-text-dark: #332C2B;      /* Marrón casi negro para lectura */
    
    --shadow-soft: 0 4px 15px rgba(56, 122, 223, 0.15);
}

    /* Sombras suaves para no cansar la vista */
    --shadow-soft: 0 4px 15px rgba(93, 76, 63, 0.1);
}

/* ==========================================================
   RESET Y BASE
   ========================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: #E5E1DA; /* Color de piedra clara */
    color: var(--color-text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ==========================================================
   LAYOUT PRINCIPAL
   ========================================================== */
#app-container {
    max-width: 900px;
    margin: auto;
    background: var(--color-primary-light);
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* El área de chat con la Wiphala diagonal sutil */
#chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    /* Fondo que recuerda al cielo despejado de la foto */
    background: linear-gradient(to bottom, #E5E1DA 0%, #F8F5F1 100%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#chat-area::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Wiphala con los colores de los Kjarkas (subimos opacidad a 0.08 - 0.1) */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(155, 34, 38, 0.08) 14%,   /* Rojo Awayo */
        rgba(202, 103, 2, 0.08) 28%,   /* Naranja */
        rgba(238, 155, 0, 0.08) 42%,   /* Amarillo */
        rgba(255, 255, 255, 0.1) 56%,  /* Blanco */
        rgba(74, 120, 86, 0.08) 70%,   /* Verde */
        rgba(56, 122, 223, 0.08) 84%,  /* Azul Cielo */
        rgba(106, 76, 147, 0.08) 100%  /* Violeta */
    );
    pointer-events: none;
    z-index: 0;
}

#chat-area::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Gradiente Wiphala: Versión Tierra (Baja opacidad) */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(229, 57, 53, 0.04) 14%,   /* Rojo mineral */
        rgba(203, 129, 86, 0.04) 28%,  /* Naranja cerro */
        rgba(255, 235, 59, 0.04) 42%,  /* Amarillo sol */
        rgba(255, 255, 255, 0.06) 56%, /* Blanco nube */
        rgba(105, 179, 122, 0.04) 70%, /* Verde hoja */
        rgba(67, 160, 71, 0.04) 84%,   /* Verde profundo */
        rgba(93, 76, 63, 0.04) 100%    /* Violeta/Tierra */
    );
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================
   BURBUJAS DE CHAT (Estilo Oralitura)
   ========================================================== */
.chat-message {
    max-width: 85%;
    padding: 1rem 1.25rem;
    border-radius: 1.5rem;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-soft);
}

.user {
    align-self: flex-end;
    background: var(--color-awayo-rojo); /* Rojo Kjarkas */
    color: white;
    border-bottom-right-radius: 0;
    border-right: 4px solid var(--color-awayo-naranja);
}

.bot {
    align-self: flex-start;
    background: white;
    /* El bot lleva el azul del cielo como marca de Aura */
    border-left: 5px solid var(--color-cielo);
    border-bottom-left-radius: 0;
    color: var(--color-text-dark);
}

/* ==========================================================
   TECLADO ACCESIBLE (Botones Grandes)
   ========================================================== */
.key-button {
    height: 65px;
    min-width: 50px;
    font-size: 1.4rem;
    font-weight: 900;
    background: white;
    border: 2px solid var(--color-text-dark);
    border-radius: 12px;
    box-shadow: 0 5px 0 var(--color-text-dark);
    transition: all 0.1s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dark);
}

.key-button:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--color-text-dark);
}

.key-button.special {
    background-color: var(--color-awayo-naranja);
    color: white;
    border-color: var(--color-awayo-rojo);
    box-shadow: 0 5px 0 var(--color-awayo-rojo);
}

/* ==========================================================
   SCROLLBAR CUSTOM
   ========================================================== */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-record);
    border-radius: 10px;
}

/* ==========================================================
   MODALES
   ========================================================== */
.modal-overlay {
    background: rgba(93, 76, 63, 0.95);
    backdrop-filter: blur(5px);
}

/* Animación para el Micrófono */
@keyframes pulse-record {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(203, 129, 86, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(203, 129, 86, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(203, 129, 86, 0); }
}

.recording {
    animation: pulse-record 1.5s infinite;
    background-color: #ef4444 !important;
}