/* === VARIABLES (Colores de WhatsApp / Modernos) === */
:root {
    --primary-color: #008069;      /* Verde WhatsApp */
    --primary-dark: #006a57;
    --bg-chat: #efe7dd;            /* Beige fondo chat */
    --bg-gray: #f0f2f5;            /* Gris fondo general */
    --white: #ffffff;
    --bubble-sent: #d9fdd3;        /* Burbuja verde (nuestra) */
    --bubble-received: #ffffff;    /* Burbuja blanca (cliente) */
    --text-primary: #111b21;
    --text-secondary: #667781;
    --danger: #ef4444;             /* Rojo para errores/salir */
    --border-color: #e9edef;
}

/* === RESET BÁSICO === */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

body {
    /* 100dvh es "Dynamic Viewport Height": se adapta a si la barra de Safari está visible u oculta */
    height: 100vh; /* Fallback */
    height: 100dvh; 
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-gray);
    overflow: hidden; /* Evita el scroll global de la página */
    overscroll-behavior: none; /* Evita el rebote elástico en Mac/iOS */
}

/* Fix Anti-Zoom iPhone: Si la letra es menor a 16px, iPhone hace zoom al escribir */
input, select, textarea {
    font-size: 16px !important; 
}

/* === UTILIDADES === */
.hidden { display: none !important; }

/* === LOGIN (Centrado) === */
.login-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.login-box {
    background: var(--white);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-box .logo { font-size: 2rem; margin-bottom: 1rem; font-weight: bold; color: var(--primary-color); }
.input-group { position: relative; margin-bottom: 1rem; text-align: left; }
.input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }      
.input-group input { width: 100%; padding: 12px 12px 12px 40px; border: 1px solid #ccc; border-radius: 5px; outline: none; } 
.btn-primary { width: 100%; padding: 12px; background: var(--primary-color); color: white; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-primary:hover { background: var(--primary-dark); }
.error-msg { color: var(--danger); margin-top: 10px; font-size: 0.9rem; }

/* === DASHBOARD LAYOUT === */
.dashboard-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header Superior */
.top-header {
    background: var(--primary-color);
    color: white;
    /* Ajuste para el Notch del iPhone (Zona segura superior) */
    padding: 10px 20px;
    padding-top: max(10px, env(safe-area-inset-top));
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Altura flexible para acomodar el notch si es necesario */
    min-height: 60px;
    height: auto;
    
    flex-shrink: 0; 
    z-index: 10;
}
.brand { font-size: 1.2rem; font-weight: bold; display: flex; gap: 10px; align-items: center; }
.btn-logout { background: rgba(0,0,0,0.2); color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; display: flex; gap: 5px; align-items: center; }
.btn-logout:hover { background: var(--danger); }

/* Contenedor Principal (Split Screen) */
.main-container {
    display: flex;
    flex: 1; /* Ocupa el resto de la altura */
    overflow: hidden; /* Importante para scrolls independientes */
    background: white;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

/* === COLUMNA IZQUIERDA (Sidebar) === */
.sidebar {
    width: 350px;
    background: white;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.search-bar {
    padding: 10px;
    background: var(--bg-gray);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.search-bar input {
    width: 100%; padding: 8px 10px 8px 35px;
    border-radius: 8px; border: none; background: white;
    outline: none; font-size: 0.9rem;
}
.search-bar i { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 0.8rem; }

.users-list { flex: 1; overflow-y: auto; }

/* Elemento Usuario (Item de la lista) */
.user-item {
    display: flex; align-items: center; gap: 15px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
}
.user-item:hover { background-color: var(--bg-gray); }
.user-item.active { background-color: #f0f2f5; border-left: 4px solid var(--primary-color); }

.avatar-circle {
    width: 45px; height: 45px; background: #dfe1e5; color: var(--text-secondary);
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    font-weight: bold; font-size: 1.2rem; flex-shrink: 0;
}
.user-details { flex: 1; overflow: hidden; }
.user-name { font-weight: 600; color: var(--text-primary); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-last-msg { font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === COLUMNA DERECHA (Chat) === */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-chat);
    background-image: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png"); /* Patrón sutil estilo WhatsApp */
    background-blend-mode: overlay;
    position: relative;
}

/* Estado Vacío */
.empty-state {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    height: 100%; color: var(--text-secondary); text-align: center;
}
.empty-state i { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; }

/* Interfaz Chat Activo */
.chat-interface { display: flex; flex-direction: column; height: 100%; }

.chat-header {
    background: var(--bg-gray);
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center;
}
/* Botón "Atrás" (Solo visible en móvil) */
#btn-back { 
    display: none; 
    margin-right: 10px; 
    color: var(--text-secondary); 
    background: none; border: none; font-size: 1.2rem; cursor: pointer;
}

.user-info { display: flex; align-items: center; gap: 10px; }
.phone-subtitle { font-size: 0.8rem; color: var(--text-secondary); }

.chat-actions { display: flex; align-items: center; gap: 10px; }
#ai-status-text { font-size: 0.8rem; font-weight: bold; color: var(--primary-color); }
.btn-toggle { background: white; border: 1px solid #ccc; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; color: var(--text-secondary); transition: 0.2s; }
.btn-toggle:hover { color: var(--danger); border-color: var(--danger); }
.btn-toggle.paused { background: var(--danger); color: white; border-color: var(--danger); }

/* Mensajes */
.messages-container {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message-bubble {
    max-width: 65%;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.4;
    position: relative;
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
}
.user-message { align-self: flex-start; background: var(--white); border-top-left-radius: 0; }
.my-message { align-self: flex-end; background: var(--bubble-sent); border-top-right-radius: 0; }
.msg-time { font-size: 0.7rem; color: #999; text-align: right; margin-top: 4px; float: right; margin-left: 10px; }

/* Input Área */
.chat-input-area {
    background: var(--bg-gray);
    padding: 10px;
    display: flex; gap: 10px;
    align-items: center;
    /* Zona segura inferior para iPhone X/11/12+ */
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.chat-input-area input { flex: 1; padding: 12px; border-radius: 8px; border: none; outline: none; }
.chat-input-area button { background: none; border: none; font-size: 1.2rem; color: var(--primary-color); cursor: pointer; }
.chat-input-area button:disabled { color: var(--text-secondary); cursor: not-allowed; }

/* === RESPONSIVE MÓVIL AVANZADO === */
@media (max-width: 768px) {
    /* Por defecto en móvil: Sidebar ocupa todo, Chat oculto */
    .sidebar { width: 100%; display: flex; }
    .chat-area { display: none; width: 100%; }

    /* Cuando entramos al chat (se activa esta clase en el main-container con JS) */
    .mobile-chat-active .sidebar { display: none; }
    .mobile-chat-active .chat-area { display: flex; }

    /* Mostrar botón atrás solo en móvil */
    #btn-back { display: block; }

    /* Ajustes para ganar espacio en móvil */
    .chat-header { padding: 10px; }
    .message-bubble { max-width: 80%; }
}