:root {
    --cerb-blue: #00befd;
    --presence-blue: rgba(0, 190, 253, 0.6);
    --presence-red: rgba(239, 110, 110, 0.85);
    --presence-yellow: rgba(253, 216, 53, 0.8);
    --bg-gray: #f4f7f6;
    --border: #e0e4e8;
    --text-main: #333;
    --text-id-gray: #777;
    --drawer-bg: #2c3e50;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0; background: var(--bg-gray); 
    height: 100vh; height: 100dvh; 
    display: flex; flex-direction: column; overflow: hidden;
    -webkit-user-select: none; /* Safari/iOS */
    -ms-user-select: none;     /* Edge/IE */
    user-select: none;         /* Estándar moderno */
    /* Extra: Previene el efecto de "lupa" o menú nativo al hacer pulsación larga en iOS */
    -webkit-touch-callout: none;
}

/* --- Login --- */
#login-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--drawer-bg); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
}
.login-box {
    background: white; padding: 30px; border-radius: 12px;
    text-align: center; width: 80%; max-width: 320px;
}

/* --- Header --- */
header {
    height: 60px;
    background: white; padding: 0 15px; display: flex; align-items: center; 
    justify-content: space-between; border-bottom: 1px solid var(--border); z-index: 100;
}
.header-btn { font-size: 20px; background: none; border: none; color: #555; cursor: pointer; width: 30px; }
.view-title { flex: 1; text-align: center; font-weight: 600; font-size: 16px; }

/* --- Drawer --- */
.drawer-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 190; display: none;
}
.drawer-overlay.open { display: block; }

.side-drawer {
    position: fixed; top: 0; left: 0; width: 260px; height: 100%;
    background: var(--drawer-bg); color: white; z-index: 200; 
    transform: translateX(-100%); transition: transform 0.3s ease;
    /* NUEVO: Convertimos el cajón en una columna Flexbox */
    display: flex; flex-direction: column; 
}
.side-drawer.open { transform: translateX(0); }

.drawer-header { padding: 24px 20px; border-bottom: 1px solid #34495e; }
.avatar { width: 44px; height: 44px; background: var(--cerb-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #222;}

/* NUEVO: Separación abajo del avatar y estilo del nombre */
.user-info { margin-top: 15px; font-size: 16px; font-weight: bold; } 

.drawer-section { padding: 20px; font-size: 11px; text-transform: uppercase; color: #7f8c8d; font-weight: bold; }

/* NUEVO: Limpiamos los márgenes por defecto del UL y le damos flex: 1 para empujar el Log Out abajo */
.bucket-list { list-style: none; padding: 0; margin: 0; flex: 1; overflow-y: auto; } 

/* NUEVO: Borde transparente por defecto para que los textos queden alineados con Javier y la "I" de INBOXES */
.bucket-item { padding: 14px 20px 14px 16px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid transparent; cursor: pointer; } 
.bucket-item.active { background: #34495e; border-left: 4px solid var(--cerb-blue); }
.bucket-count { background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 12px; font-size: 11px; }

/* NUEVO: Estilos para fijar el Log out abajo */
.drawer-footer { 
    margin-top: auto; 
    padding: 20px; 
    border-top: 1px solid #34495e; 
    color: #b0bec5; 
    font-size: 14px; 
    cursor: pointer; 
}
.drawer-footer:hover { color: white; }

/* --- Inbox Cards --- */
#inbox-view { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.inbox-card { background: white; padding: 14px; border-radius: 8px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.inbox-top { display: flex; justify-content: space-between; }
.inbox-id { font-size: 12px; font-weight: bold; }
.time { font-size: 11px; color: #888; }
.inbox-subject { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-snippet { display: block !important; font-size: 13px; color: #666; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.inbox-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.inbox-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; overflow: hidden;}

/* --- Status Styles --- */
.status-open .inbox-subject { font-weight: 700; color: #222; }
.status-open .inbox-id { color: var(--cerb-blue); }

.status-waiting .inbox-id, .status-waiting .time, .status-waiting .inbox-subject, .status-waiting .inbox-snippet {
    color: var(--text-id-gray) !important; font-weight: 400 !important;
}

/* --- Presence Badges (ACTUALIZADOS) --- */
.badge-wrapper { flex-shrink: 0; display: flex; align-items: center; }
.badge-circle { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.badge-circle svg { width: 12px; height: 12px; stroke-width: 2.5; }

.badge-viewing { background: var(--presence-blue); color: white; border: none; }
.badge-commenting { background: var(--presence-yellow); color: #333; border: none; }
.badge-replying { background: var(--presence-red); color: white; border: none; }
.badge-reporting { background: var(--presence-yellow); color: #333; border: none; }
.badge-selecting { background: var(--presence-yellow); color: #333; border: none; }

/* --- Ticket Thread --- */
#ticket-view { display: none; flex: 1; overflow-y: auto; padding: 10px; flex-direction: column; }
#footer-wrapper { display: none; padding: 12px; border-top: 1px solid var(--border); background: white; }
/* --- Botones Generales (Estilo Pastilla) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 50px; /* Esta es la magia: un número alto garantiza la pastilla perfecta */
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Efecto al tocar el botón en móvil para que se sienta reactivo */
.btn:active {
    transform: scale(0.96);
    opacity: 0.9;
}
.btn-blue {
    background-color: var(--cerb-blue);
    color: white;
}

.btn-gray {
    background-color: #e0e4e8;
    color: var(--text-main);
}

/* --- Chat Bubbles (Actualizado) --- */
#chat-container { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    padding: 15px; 
    background: var(--bg-gray); 
}

.message-bubble { 
    max-width: 85%; 
    padding: 12px 16px; 
    border-radius: 12px; 
    font-size: 14px; 
    line-height: 1.4; 
    position: relative;
    background: white; /* REQUISITO 2: Ambas son blancas */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: var(--text-main);
    border: 1px solid var(--border);
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

input, textarea {
    -webkit-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

.msg-worker { 
    align-self: flex-end; 
    border-left: 5px solid var(--presence-red); /* Color del badge replying */
    border-bottom-right-radius: 2px; 
}

.msg-client { 
    align-self: flex-start; 
    border-right: 5px solid var(--cerb-blue); /* Celeste Cerb */
    border-bottom-left-radius: 2px; 
}

.msg-comment { 
    align-self: flex-end; 
    /* Un fondo amarillo sutil basado en tu variable de presencia */
    background-color: rgba(253, 216, 53, 0.15); 
    /* El accent fuerte a la izquierda como los workers, pero amarillo */
    border-left: 5px solid var(--presence-yellow); 
    border-bottom-right-radius: 2px;
    border-top: 1px solid rgba(253, 216, 53, 0.3);
    border-right: 1px solid rgba(253, 216, 53, 0.3);
    border-bottom: 1px solid rgba(253, 216, 53, 0.3);
}

.msg-child-comment {
    /* Lo empujamos hacia la izquierda para que parezca escalonado bajo el padre */
    margin-right: 20px; 
    /* Lo hacemos un pelín más estrecho para acentuar la anidación */
    max-width: 75%;
    /* Le damos un fondo un milímetro más oscuro para diferenciarlo */
    background-color: rgba(253, 216, 53, 0.25);
}

.msg-header { 
    font-size: 11px; 
    margin-bottom: 6px; 
    display: flex; 
    justify-content: space-between; 
    opacity: 0.6; 
}

.msg-sender { font-weight: bold; margin-right: 15px; }
.msg-time { white-space: nowrap; }
.msg-body { word-break: break-word; }
.msg-comment .msg-sender {
    color: #b7950b; /* Un tono oscuro del amarillo para contraste del nombre */
}

/* --- Date Dividers (Efecto WhatsApp) --- */
.chat-date-divider {
    position: sticky; /* ¡La magia flotante! */
    top: 10px; /* Margen superior cuando está flotando */
    z-index: 10; /* Para que quede por encima de las burbujas */
    display: flex;
    justify-content: center;
    margin: 8px 0;
    pointer-events: none; /* Evita que estorbe al tocar la pantalla */
}

.chat-date-pill {
    background-color: rgba(225, 230, 235, 0.85); /* Un gris claro semitransparente */
    color: #5a6674;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    backdrop-filter: blur(4px); /* Efecto cristal iOS (opcional pero queda genial) */
}

/* --- Grupos de Días para Sticky Headers --- */
.chat-day-group {
    display: flex;
    flex-direction: column;
    /* Esto ayuda a que el último mensaje no esté muy pegado al siguiente grupo */
    margin-bottom: 8px; 
}

.chat-day-messages {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Mantiene la separación entre burbujas */
}

/* --- TICKET DRAWER (CAJÓN DERECHO) --- */

/* Modificador para que el cajón lateral salga desde la derecha */
.side-drawer.drawer-right {
    left: auto;
    right: 0;
    transform: translateX(100%); /* Lo escondemos a la derecha */
}
.side-drawer.drawer-right.open {
    transform: translateX(0); /* Lo traemos a la pantalla */
}

/* El contenido con scroll del cajón */
.drawer-content {
    flex: 1; 
    overflow-y: auto; 
    padding: 15px;
    display: flex; 
    flex-direction: column; 
    gap: 15px;
    background: var(--bg-gray); /* Fondo gris claro para contrastar las tarjetas */
}

/* Tarjetas blancas de información */
.ticket-info-card {
    background: white; 
    padding: 15px; 
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.info-label { 
    font-size: 11px; 
    text-transform: uppercase; 
    color: #888; 
    font-weight: bold; 
    margin-bottom: 5px; 
    display: block; 
}

.info-value { 
    font-size: 14px; 
    color: var(--text-main); 
}

/* Lista de Magento (Store History) */
.store-history-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.store-history-list li {
    padding: 10px 0; 
    border-bottom: 1px solid var(--border); 
    font-size: 13px;
}
.store-history-list li:last-child { 
    border-bottom: none; 
    padding-bottom: 0; 
}
.store-history-list .price { 
    float: right; 
    font-weight: bold; 
    color: #2e7d32; 
}
.store-history-list .date { 
    color: #888; 
    font-size: 11px; 
}

.drawer-header-dark {
    display: flex;
    align-items: center;
    height: 60px; /* Igual que el header de la app */
    padding: 0 20px;
    background-color: var(--drawer-bg); /* Azul oscuro consistente */
    color: white;
    box-sizing: border-box;
}

.drawer-header-dark h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* Botón de cierre específico para el modo oscuro */
.close-drawer-btn {
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: white;
    padding: 5px;
    line-height: 1;
    transition: opacity 0.2s;
}

.close-drawer-btn:hover {
    opacity: 0.7;
}

/* --- Presence Pill Flotante sobre el Thread --- */
#footer-wrapper {
    position: relative; /* Necesario para que el pill flote respecto a esto */
    background: white;
    border-top: 1px solid var(--border);
    padding: 15px;
}

#presence-pill {
    position: absolute;
    bottom: 100%; /* Se coloca justo encima del borde superior del footer */
    left: 0;
    right: 0;
    display: none; /* Se activa por JS */
    justify-content: center;
    pointer-events: none; /* Para que no bloquee clics en el último mensaje */
    z-index: 10;
}

.floating-presence-pill {
    margin-bottom: 10px; /* Separación del borde del footer */
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px; /* Reducido un 25% respecto a 14px */
    font-weight: 600;
    font-style: italic;
    color: #222222;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2);
}

.pill-blue { background-color: rgba(0, 190, 253, 0.9); }
.pill-red { background-color: rgba(239, 110, 110, 0.9); }
.pill-yellow { background-color: rgba(253, 216, 53, 0.9); }

/* --- Slider Segmentado para Status --- */
.status-segmented-control {
    position: relative;
    display: flex;
    background-color: var(--border); /* Fondo gris claro */
    border-radius: 20px;
    padding: 3px;
    margin-top: 8px;
    user-select: none;
}

.status-segment {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    z-index: 2;
    cursor: pointer;
    transition: color 0.3s ease;
}

.status-thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: calc(33.333% - 2px);
    background-color: white;
    border-radius: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    /* Esta transición crea el efecto "snap" al moverse */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

/* Colores para el texto cuando la pastilla está debajo */
.status-segment.active-open { color: #e65100; }   /* Naranja */
.status-segment.active-waiting { color: #0277bd; } /* Azul */
.status-segment.active-closed { color: #2e7d32; }  /* Verde */

/* --- Contenedor de botones del Footer y del Composer --- */
#default-actions, .composer-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

/* Hacemos que los botones dentro de ambos contenedores midan exactamente lo mismo */
#default-actions .btn, .composer-actions .btn {
    flex: 1; 
}

/* Contenedor de participantes para que envuelvan (wrap) si hay muchos */
#drawer-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    width: 100%; /* Asegura que aproveche todo el espacio de la tarjeta */
}

/* --- Pills de Participantes y Animación de Borrado --- */
.participant-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%; /* Respeta el límite del contenedor */
    min-width: 0; /* ¡CRUCIAL! Permite que el elemento se encoja para aplicar el ellipsis */
    box-sizing: border-box;
    background-color: #f0f2f5;
    color: #555;
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    overflow: hidden; 
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: all 0.2s ease;
}

/* El texto debe estar por encima del fondo animado */
.participant-pill span {
    position: relative;
    z-index: 2;
    transition: color 0.3s;
    display: block; /* Necesario para que el ellipsis funcione bien dentro del flex */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La barra roja inicial (escondida con width 0) */
.participant-pill::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background-color: #ef6e6e;
    z-index: 1;
    transition: width 0s;
}

.participant-pill.deleting::before {
    width: 100%;
    transition: width 3s linear; 
}

.participant-pill.deleting span {
    color: white; 
}

/* 1. La tarjeta: Le damos un padding-bottom grande para reservar la "planta baja" */
.participant-card {
    position: relative;
    padding-bottom: 45px !important; /* Forzamos el espacio inferior exclusivo para el botón */
}

/* 2. El contenedor de nombres: Solo se encarga de agruparlos */
#drawer-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    /* Ya no hace falta el padding-right porque el botón está abajo */
}

/* El botón circular azul Cerb */
.add-participant-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    background-color: var(--cerb-blue);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 190, 253, 0.3);
    transition: all 0.2s ease;
}

.add-participant-btn:active {
    transform: scale(0.9); /* Efecto de pulsación */
}

/* --- Easter Egg Banner --- */
.easter-egg-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* Empieza un poco pequeño para la animación */
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Soporte para iOS */
    color: white;
    padding: 16px 30px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
    z-index: 9999; /* Por encima de todo */
    opacity: 0;
    pointer-events: none; /* Para que no estorbe si haces clic rápido */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}

.easter-egg-banner.show {
    opacity: .8;
    transform: translate(-50%, -50%) scale(1);
}

/* --- Soft DOM Patching Animation --- */
@keyframes flashUpdate {
    0% { background-color: rgba(253, 216, 53, 0.4); } /* Soft yellow */
    100% { background-color: white; }
}

.flash-update {
    animation: flashUpdate 2s ease-out;
}

/* --- Animaciones Secuenciales (Fade & Slide) --- */

/* 1. Control de Opacidad (Dura 200ms) */
.card-animating-opacity {
    transition: opacity 0.2s ease !important;
}

.card-invisible {
    opacity: 0 !important;
}

/* 2. Control de Altura y Espaciado (Dura 300ms) */
.card-animating-layout {
    overflow: hidden !important;
    max-height: 250px; /* Límite temporal para poder animar a 0 */
    transition: max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease !important;
}

.card-collapsed {
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
}