/* ==========================================================================
   OREGONS CHAT - BASE DE LA INTERFAZ (UI)
   Diseño Modular - Estructura limpia y variables de paleta corporativa
   ========================================================================== */

:root {
    /* Paleta de colores oficial extraída de LOGO OREGONS.png */
    --color-naranja: #ff6b00; /* El naranja vibrante de la marca */
    --color-carbon: #2d2d2d; /* El gris oscuro de las montañas */
    --color-fondo: #f4f4f4; /* Fondo gris claro limpio para los chats */
    --color-blanco: #ffffff;
    --color-texto-oscuro: #1a1a1a;
    --color-texto-claro: #7f7f7f;

    /* Variables de tipografía y efectos */
    --fuente-principal:
        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    --transicion-suave: all 0.25s ease-in-out;
}

/* Reset global anti-errores de pantalla */
* {
    margin: 0;
    padding: 0;
    box-shadow: none;
    box-sizing: border-box;
    font-family: var(--fuente-principal);
    -webkit-tap-highlight-color: transparent;
}

body,
html {
    width: 100%;
    height: 100%;
    background-color: var(--color-carbon);
    overflow: hidden; /* Evita rebotes y desajustes visuales en móviles */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor principal: Simula el comportamiento de una pantalla nativa */
#app-container {
    width: 100%;
    max-width: 480px; /* Centrado elegante si se ve desde una PC de escritorio */
    height: 100%;
    background-color: var(--color-blanco);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ==========================================================================
   ESTRUCTURA DE LOS 3 BLOQUES PRINCIPALES
   ========================================================================== */

/* 1. Encabezado de la aplicación */
#chat-header {
    width: 100%;
    height: 65px;
    background-color: var(--color-carbon);
    border-bottom: 3px solid var(--color-naranja);
    display: flex;
    align-items: center;
    padding: 0 16px;
    z-index: 10;
}

/* 2. Área central contenedora de los mensajes */
#chat-box {
    flex: 1; /* Absorbe de forma dinámica todo el espacio central del teléfono */
    width: 100%;
    background-color: var(--color-fondo);
    overflow-y: auto; /* Habilita el desplazamiento vertical cuando se llene */
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 3. Barra inferior de interacción */
#chat-footer {
    width: 100%;
    min-height: 60px;
    background-color: var(--color-blanco);
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    z-index: 10;
}

/* Contenedor del formulario interno para alinear inputs y botones */
#chat-form {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   SUBMENÚ DE ADJUNTOS (Estilo WhatsApp)
   ========================================================================== */
#attachment-menu {
    position: absolute;
    bottom: 75px; /* Sube justo por encima de la barra inferior */
    left: 16px;
    right: 16px;
    background-color: var(--color-carbon); /* El gris oscuro de tu logo */
    border-radius: 16px;
    min-height: 120px; /* Altura temporal para que lo puedas ver vacío */
    padding: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;

    /* Configuración de la animación oculta inicial */
    transform: translateY(150%);
    opacity: 0;
    visibility: hidden;
    transition: var(--transicion-suave);
    z-index: 5;

    /* Sombra elegante para que resalte sobre el fondo */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   REGLA DE APERTURA DEL MENÚ (Activa la animación con JS)
   ========================================================================== */
#attachment-menu.activo {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ==========================================================================
   OREGONS CHAT - REPARACIÓN DE ALINEACIÓN (4 Botones en una línea)
   Código limpio para distribuir los elementos de forma proporcional
   ========================================================================== */

#attachment-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Obliga a los 4 botones a quedarse en la misma fila */
    justify-content: space-around !important; /* Distribuye un espacio idéntico entre cada botón */
    align-content: center !important;
    padding: 15px 8px !important; /* Ajustamos el aire interno para ganar espacio */
    gap: 0 !important; /* Eliminamos el espacio fijo para que el teléfono lo calcule solo */
}

.menu-adjunto-item {
    width: 22% !important; /* Ancho fluido para que se adapte al tamaño de cualquier celular */
}

/* ==========================================================================
   OREGONS CHAT - DISTRIBUCIÓN SIMÉTRICA PERFECTA
   Forzamos el reparto equitativo derrotando bloqueos de otros archivos
   ========================================================================== */
body #attachment-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Prohibido bajarse a la segunda línea */
    justify-content: space-evenly !important; /* Espacio idéntico entre cada botón y los bordes */
    align-items: center !important;
    padding: 20px 10px !important; /* Aire balanceado arriba y abajo */
    gap: 0 !important; /* Dejamos que el teléfono calcule los espacios solo */
}

body .menu-adjunto-item {
    width: 22% !important; /* Reparto proporcional exacto para cada uno */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}