/* ============================================
   SPEGASOFT CRM - ESTILOS DEL CHAT CENTRAL
   (Extraído de central-chat.blade.php)
   ============================================ */

/* =========================================================================
   ⚡ MAGIA PARA SPA (SINGLE PAGE APPLICATION)
   El selector :has() aplica estas reglas SOLO si el chat está abierto.
   Si navegas a "Escritorio" o "Contactos", estas reglas se apagan solas.
   ========================================================================= */

/* 1. Bloqueamos el doble scroll en toda la página */
body:has(#central-chat-wrapper) {
    overflow: hidden !important;
}

/* 2. Quitamos los márgenes de Filament para que el chat ocupe todo el espacio.
      OJO: NO usamos width: 100%, así evitamos que el Header se salga por la derecha */
.fi-main-ctn:has(#central-chat-wrapper),
.fi-content:has(#central-chat-wrapper),
.fi-page:has(#central-chat-wrapper) {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Ajustamos la altura exacta restando el alto del Header de Filament (4rem) */
.fi-content:has(#central-chat-wrapper) {
    height: calc(100vh - 4rem) !important;
    overflow: hidden !important;
}

/* ⚡ SOLUCIÓN AL CLIC MUERTO: Forzamos que la cabecera del chat esté al frente de todo y reciba clics */
.fi-page > form {
    position: relative;
    z-index: 10;
}

/* Aseguramos que nada transparente tape los botones de la cabecera */
.pointer-events-none-override {
    pointer-events: auto !important;
}

/* Estilos personalizados réplica de WhatsApp Web */
:root {
    --wa-bg-header-light: #f0f2f5;
    --wa-bg-header-dark: #202c33;
    --wa-bg-sidebar-light: #ffffff;
    --wa-bg-sidebar-dark: #111b21;
    --wa-bg-chat-light: #efeae2;
    --wa-bg-chat-dark: #0b141a;
    --wa-item-active-light: #f0f2f5;
    --wa-item-active-dark: #2a3942;
    --wa-item-hover-light: #f5f6f6;
    --wa-item-hover-dark: #202c33;
    --wa-bubble-out-light: #d9fdd3;
    --wa-bubble-out-dark: #005c4b;
    --wa-bubble-in-light: #ffffff;
    --wa-bubble-in-dark: #202c33;
    --wa-text-primary-light: #111b21;
    --wa-text-primary-dark: #e9edef;
    --wa-text-secondary-light: #667781;
    --wa-text-secondary-dark: #8696a0;
}

.wa-sidebar-header {
    background-color: var(--wa-bg-header-light) !important;
}
.dark .wa-sidebar-header {
    background-color: var(--wa-bg-header-dark) !important;
}

.wa-sidebar {
    background-color: var(--wa-bg-sidebar-light) !important;
}
.dark .wa-sidebar {
    background-color: var(--wa-bg-sidebar-dark) !important;
}

.wa-chat-header {
    background-color: var(--wa-bg-header-light) !important;
}
.dark .wa-chat-header {
    background-color: var(--wa-bg-header-dark) !important;
}

.wa-chat-footer {
    background-color: var(--wa-bg-header-light) !important;
}
.dark .wa-chat-footer {
    background-color: var(--wa-bg-header-dark) !important;
}

.wa-item {
    background-color: var(--wa-bg-sidebar-light);
    border-bottom: 1px solid #f0f2f5;
    transition: background-color 0.15s ease;
}
.dark .wa-item {
    background-color: var(--wa-bg-sidebar-dark);
    border-bottom: 1px solid #222e35;
}
.wa-item:hover {
    background-color: var(--wa-item-hover-light) !important;
}
.dark .wa-item:hover {
    background-color: var(--wa-item-hover-dark) !important;
}
.wa-item.active {
    background-color: var(--wa-item-active-light) !important;
}
.dark .wa-item.active {
    background-color: var(--wa-item-active-dark) !important;
}

/* Message bubbles */
.wa-bubble {
    max-width: 65%;
    padding: 8px 12px 10px 12px;
    font-size: 14px;
    position: relative;
    box-shadow: 0 1px 0.5px rgba(11,20,26,.13);
    border-radius: 8px;
    margin-bottom: 2px;
    user-select: text !important;
}
.wa-bubble-out {
    background-color: var(--wa-bubble-out-light) !important;
    color: var(--wa-text-primary-light) !important;
    border-top-right-radius: 0px !important;
}
.dark .wa-bubble-out {
    background-color: var(--wa-bubble-out-dark) !important;
    color: var(--wa-text-primary-dark) !important;
}
.wa-bubble-in {
    background-color: var(--wa-bubble-in-light) !important;
    color: var(--wa-text-primary-light) !important;
    border-top-left-radius: 0px !important;
}
.dark .wa-bubble-in {
    background-color: var(--wa-bubble-in-dark) !important;
    color: var(--wa-text-primary-dark) !important;
}

/* Time indicators */
.wa-time {
    font-size: 9.5px;
    color: var(--wa-text-secondary-light);
    margin-left: 20px;
    float: right;
    margin-top: 4px;
    user-select: none;
}
.dark .wa-time {
    color: var(--wa-text-secondary-dark);
}

/* BURBUJA DE MENSAJES NO LEÍDOS */
.wa-unread-badge {
    background-color: #25D366;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 6px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.dark .wa-unread-badge {
    background-color: #00a884;
    color: #111b21;
}

/* CONTENEDOR DE ETIQUETAS */
.wa-tags-container {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.wa-tags-container::-webkit-scrollbar {
    display: none;
}

/* DISEÑO DE LA ETIQUETA */
.wa-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    color: #4b5563;
    white-space: nowrap;
    user-select: none;
    background-color: transparent;
}
.dark .wa-tag-item {
    border-color: #374151;
    color: #9ca3af;
}

.wa-tag-color-square {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* HORA DEL MENSAJE */
.wa-time-text {
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
    color: #667781;
}
.dark .wa-time-text {
    color: #8696a0;
}
.wa-time-text.wa-unread {
    color: #25D366 !important;
}
.dark .wa-time-text.wa-unread {
    color: #00a884 !important;
}

/* BOTÓN DE FILTRO */
.wa-filter-btn {
    padding: 6px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: background-color 0.2s;
}
.wa-filter-btn:hover { background-color: #f3f4f6; }
.wa-filter-btn.active { background-color: #e5e7eb; }
.dark .wa-filter-btn { color: #8696a0; }
.dark .wa-filter-btn:hover { background-color: #202c33; }
.dark .wa-filter-btn.active { background-color: #2a3942; }

/* CONTENEDOR POPOVER DEL FILTRO */
.wa-filter-popover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 240px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 12px;
    z-index: 50;
}
.dark .wa-filter-popover {
    background-color: #233138;
    border-color: #374151;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}
@media (max-width: 640px) {
    .wa-filter-popover {
        right: auto;
        left: 0;
    }
}

/* INPUTS / SELECTS DEL FILTRO */
.wa-filter-group {
    margin-bottom: 12px;
}
.wa-filter-group:last-child {
    margin-bottom: 0;
}
.wa-filter-label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #6b7280;
    margin-bottom: 4px;
}
.dark .wa-filter-label { color: #8696a0; }

.wa-filter-select {
    width: 100%;
    font-size: 12px;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    color: #1f2937;
    border-radius: 6px;
    padding: 6px 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wa-filter-select:focus {
    border-color: #25D366;
    box-shadow: 0 0 0 1px #25D366;
}
.dark .wa-filter-select {
    background-color: #111b21;
    border-color: #4b5563;
    color: #e9edef;
}
.dark .wa-filter-select:focus {
    border-color: #00a884;
    box-shadow: 0 0 0 1px #00a884;
}

/* CONTENEDOR DEL AVATAR */
.wa-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

/* BADGE DEL OPERADOR */
.wa-operator-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid #ffffff;
    z-index: 10;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    user-select: none;
}
.dark .wa-operator-badge {
    border-color: #111b21;
}

.wa-badge-bot {
    background-color: #00a884;
    color: #ffffff;
    font-size: 9px;
}
.wa-badge-human {
    background-color: #3b82f6;
    color: #ffffff;
}
.wa-badge-none {
    background-color: #9ca3af;
    color: #ffffff;
    font-size: 11px;
}

/* MENÚ CONTEXTUAL */
.wa-context-menu {
    position: fixed;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px 0 rgba(11,20,26,.26), 0 2px 10px 0 rgba(11,20,26,.16);
    padding: 8px 0;
    min-width: 200px;
    z-index: 999999;
}
.dark .wa-context-menu {
    background-color: #233138;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.5), 0 2px 10px 0 rgba(0,0,0,.5);
}

.wa-context-item {
    padding: 12px 24px;
    font-size: 13.5px;
    color: #3b4a54;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.15s ease;
    user-select: none;
}
.wa-context-item:hover {
    background-color: #f5f6f6;
}
.dark .wa-context-item {
    color: #d1d7db;
}
.dark .wa-context-item:hover {
    background-color: #182229;
}

/* DARK MODE - Fondo del contenedor de burbujas */
.dark #contenedor-burbujas {
    background-color: #0b141a !important;
    background-blend-mode: overlay;
    opacity: 0.95;
}

/* ============================================
   PANEL DE VISTA PREVIA DE ARCHIVO (WhatsApp Web)
   ============================================ */
.wa-preview-panel {
    background-color: var(--wa-bg-header-light);
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    animation: wa-preview-in 0.2s ease-out;
}
.dark .wa-preview-panel {
    background-color: var(--wa-bg-header-dark);
    border-top-color: #374151;
}

@keyframes wa-preview-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.wa-preview-contenido {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.wa-preview-img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    background-color: #fff;
}
.dark .wa-preview-img {
    background-color: #111b21;
}

.wa-preview-icono {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-color: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dark .wa-preview-icono {
    background-color: #233138;
    color: #8696a0;
}

.wa-preview-info {
    min-width: 0;
}

.wa-preview-nombre {
    font-size: 14px;
    font-weight: 600;
    color: #111b21;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.dark .wa-preview-nombre {
    color: #e9edef;
}

.wa-preview-tipo {
    font-size: 12px;
    color: #667781;
    margin-top: 2px;
}
.dark .wa-preview-tipo {
    color: #8696a0;
}

.wa-preview-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.wa-preview-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wa-preview-btn-cancelar {
    background-color: #f3f4f6;
    color: #ef4444;
}
.wa-preview-btn-cancelar:hover {
    background-color: #fee2e2;
}
.dark .wa-preview-btn-cancelar {
    background-color: #2a3942;
    color: #f87171;
}
.dark .wa-preview-btn-cancelar:hover {
    background-color: #374151;
}

.wa-preview-btn-enviar {
    background-color: #25D366;
    color: #ffffff;
}
.wa-preview-btn-enviar:hover {
    background-color: #1fb958;
}
.dark .wa-preview-btn-enviar {
    background-color: #00a884;
}
.dark .wa-preview-btn-enviar:hover {
    background-color: #00bfa5;
}

/* ============================================
   OVERLAY DE DRAG & DROP (WhatsApp Web)
   ============================================ */
.wa-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wa-drop-in 0.15s ease-out;
    backdrop-filter: blur(2px);
}

@keyframes wa-drop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.wa-drop-overlay-contenido {
    text-align: center;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px dashed #25D366;
    border-radius: 16px;
    padding: 40px 60px;
    max-width: 90%;
}
.dark .wa-drop-overlay-contenido {
    border-color: #00a884;
}

/* --- TARJETA DE CONTACTO --- */
        .wa-contact-card {
            background-color: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            width: 260px;
            max-width: 100%;
            border: 1px solid #e1e8ed;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .dark .wa-contact-card {
            background-color: #111b21;
            border-color: #2a3942;
        }
        .wa-contact-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
        }
        .wa-contact-avatar {
            width: 42px;
            height: 42px;
            background-color: #dfe5e7;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 20px;
            flex-shrink: 0;
        }
        .dark .wa-contact-avatar { background-color: #667781; }
        
        .wa-contact-info {
            flex: 1;
            overflow: hidden;
        }
        .wa-contact-name {
            font-size: 14px;
            font-weight: 600;
            color: #111b21;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .dark .wa-contact-name { color: #e9edef; }
        .wa-contact-phone {
            font-size: 12px; 
            color: #667781; 
            margin-top: 2px;
        }
        .dark .wa-contact-phone { color: #8696a0; }
        
        .wa-contact-action {
            display: block;
            width: 100%;
            text-align: center;
            padding: 12px;
            border-top: 1px solid #e1e8ed;
            background: transparent;
            color: #00a884;
            font-size: 13px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .wa-contact-action:hover { background-color: #f5f6f6; }
        .dark .wa-contact-action { border-color: #2a3942; color: #00bfa5; }
        .dark .wa-contact-action:hover { background-color: #202c33; }

/* --- SEPARADOR DE FECHAS EN EL CHAT --- */
        .wa-date-divider {
            background-color: #ffffff;
            color: #54656f;
            border: 1px solid #f3f4f6;
            font-size: 11px;
            font-weight: 600;
            padding: 6px 12px;
            border-radius: 8px;
            box-shadow: 0 1px 1px rgba(11,20,26,.05);
            text-transform: uppercase;
            user-select: none;
        }
        .dark .wa-date-divider {
            background-color: #182229;
            color: #8696a0;
            border-color: #222e35;
            box-shadow: 0 1px 1px rgba(0,0,0,.15);
        }

/* --- FOOTER DEL CHAT --- */
        .wa-chat-footer {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            padding: 10px 16px;
            background-color: #f0f2f5;
            border-top: 1px solid #d1d7db;
            width: 100%;
            flex-shrink: 0;
        }
        .dark .wa-chat-footer {
            background-color: #202c33;
            border-color: #2a3942;
        }

        /* Contenedor del Input */
        .wa-input-wrapper {
            flex: 1;
            display: flex;
            align-items: flex-end;
            background-color: #ffffff;
            border-radius: 8px;
            padding: 9px 12px;
            min-height: 40px;
        }
        .dark .wa-input-wrapper {
            background-color: #2a3942;
        }

        /* Textarea Autoajustable (Blindado contra Tailwind) */
        .wa-textarea-input {
            flex: 1;
            background: transparent !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important; /* Mata el borde azul de Tailwind */
            color: #111b21 !important;
            font-size: 15px;
            line-height: 20px;
            resize: none;
            padding: 0;
            margin: 0;
            max-height: 120px;
            overflow-y: auto;
            scrollbar-width: none;
            /* Forzar la eliminación del ring de Tailwind */
            --tw-ring-shadow: 0 0 transparent !important;
            --tw-ring-offset-shadow: 0 0 transparent !important;
        }
        .wa-textarea-input::placeholder { color: #667781; }
        .dark .wa-textarea-input { color: #e9edef !important; }
        .dark .wa-textarea-input::placeholder { color: #8696a0; }

        /* Botones Circulares (Micrófono, Enviar, Volver) */
        .wa-btn-circle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            color: #54656f;
            cursor: pointer;
            border-radius: 50%;
            flex-shrink: 0;
            transition: color 0.2s;
        }
        .dark .wa-btn-circle { color: #8696a0; }
        .wa-btn-circle:hover { color: #00a884; }
        .dark .wa-btn-circle:hover { color: #00bfa5; }

        /* Envoltorio del Clip (Para que no rompa Filament) */
        .wa-clip-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
            height: 20px; /* Alineado a la altura de 1 línea de texto */
            color: #54656f;
        }
        .dark .wa-clip-wrapper { color: #8696a0; }
        
        /* Limpiamos estilos residuales del botón de Filament */
        .wa-clip-wrapper button {
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
            padding: 0 !important;
            color: inherit !important;
        }

/* ============================================
GALERÍA MULTIMEDIA (LIGHTBOX)
============================================ */
        .wa-lightbox-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(11, 20, 26, 0.95);
            z-index: 9999999;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(2px);
        }
        
        .wa-lightbox-toolbar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        .wa-lightbox-btn {
            background: transparent;
            border: none;
            color: #d1d7db;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s, color 0.2s;
        }
        .wa-lightbox-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
        }

        .wa-lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            padding: 20px;
            z-index: 10;
        }
        .wa-lightbox-prev { left: 10px; }
        .wa-lightbox-next { right: 10px; }

        .wa-lightbox-content-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: auto; /* Permite arrastrar cuando hay zoom */
            scrollbar-width: none;
        }

        .wa-lightbox-media {
            max-width: 90vw;
            max-height: 85vh;
            object-fit: contain;
            transition: transform 0.2s ease-out;
            transform-origin: center center;
            user-select: none;
        }

        /* Contenedor del video en el chat para capturar el clic */
        .wa-video-preview {
            position: relative;
            cursor: pointer;
        }
        .wa-video-preview::after {
            content: '▶';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            pointer-events: none;
        }

        /* Ajuste para que la galería sea una columna y quepa el carrusel abajo */
        .wa-lightbox-overlay {
            flex-direction: column;
        }

        .wa-lightbox-content-wrapper {
            flex: 1; /* Ocupa todo el espacio menos el carrusel */
        }

        /* --- CARRUSEL DE MINIATURAS --- */
        .wa-lightbox-carousel {
            height: 80px;
            width: 100%;
            background-color: rgba(11, 20, 26, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 10px;
            overflow-x: auto;
            flex-shrink: 0;
            border-top: 1px solid rgba(255,255,255,0.1);
            scrollbar-width: thin;
        }

        .wa-lightbox-thumbnail {
            width: 54px;
            height: 54px;
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            opacity: 0.5; /* Oscurecidas por defecto */
            transition: opacity 0.2s, border 0.2s;
            border: 2px solid transparent;
            flex-shrink: 0;
            position: relative;
        }

        .wa-lightbox-thumbnail:hover {
            opacity: 0.8;
        }

        .wa-lightbox-thumbnail.active {
            opacity: 1; /* Resalta la activa */
            border-color: #00a884; /* Borde verde WhatsApp */
        }

/* ============================================
   BOTÓN FLOTANTE "IR AL FINAL" (Estilo WhatsApp)
   ============================================ */
.wa-scroll-bottom-btn {
    position: absolute;
    bottom: 20px;
    right: 30px;
    width: 42px;
    height: 42px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 1px 0 rgba(11,20,26,.06), 0 2px 5px 0 rgba(11,20,26,.2);
    cursor: pointer;
    z-index: 100;
    color: #8696a0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.dark .wa-scroll-bottom-btn {
    background-color: #202c33;
    color: #8696a0;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.15), 0 2px 5px 0 rgba(0,0,0,.3);
}

.wa-scroll-bottom-btn:hover {
    color: #54656f;
}
.dark .wa-scroll-bottom-btn:hover {
    color: #d1d7db;
}

.wa-new-messages-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #25D366;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.dark .wa-new-messages-badge {
    background-color: #00a884;
    color: #111b21;
}

/* ============================================
   ESTILOS DE CITAS (REPLY)
   ============================================ */
        .wa-quoted-msg {
            background-color: rgba(0, 0, 0, 0.05);
            border-left: 4px solid #00a884;
            border-radius: 4px;
            padding: 6px 8px;
            margin-bottom: 6px;
            font-size: 12px;
            cursor: pointer;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .dark .wa-quoted-msg { background-color: rgba(255, 255, 255, 0.05); border-left-color: #00bfa5; }
        .wa-quoted-sender { font-weight: bold; font-size: 11px; margin-bottom: 2px; }
        .wa-quoted-text { color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .dark .wa-quoted-text { color: #8696a0; }

        /* Barra de Previsualización antes de enviar */
        .wa-reply-preview-bar {
            background-color: #f0f2f5;
            border-left: 4px solid #00a884;
            padding: 8px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 8px 8px 0 0;
            margin-bottom: -10px; /* Para pegarse al input */
            z-index: 0;
        }
        .dark .wa-reply-preview-bar { background-color: #202c33; border-left-color: #00bfa5; }
        
        /* Botón de responder al lado del mensaje */
        .wa-reply-btn {
            opacity: 0;
            color: #8696a0;
            cursor: pointer;
            padding: 6px;
            transition: opacity 0.2s, color 0.2s;
        }
        .group:hover .wa-reply-btn { opacity: 1; }
        .wa-reply-btn:hover { color: #00a884; }

/* ============================================
   EFECTO DE RESALTE (MENSAJE CITADO)
   ============================================ */
@keyframes wa-highlight-blink {
    0% { filter: brightness(1); }
    30% { filter: brightness(0.85) sepia(0.5) hue-rotate(90deg); } /* Efecto verde brillante */
    100% { filter: brightness(1); }
}

/* En modo oscuro el brillo debe manejarse distinto para que resalte */
@keyframes wa-highlight-blink-dark {
    0% { filter: brightness(1); }
    30% { filter: brightness(1.5) sepia(0.5) hue-rotate(90deg); }
    100% { filter: brightness(1); }
}

.wa-highlight-msg {
    animation: wa-highlight-blink 2s ease-out !important;
}

.dark .wa-highlight-msg {
    animation: wa-highlight-blink-dark 2s ease-out !important;
}

/* ============================================
   NOTAS PRIVADAS (Estilo Chatwoot)
   ============================================ */
/* Switch / Tabs */
.wa-reply-tabs {
    display: flex;
    gap: 5px;
    padding: 6px 16px 0 16px;
    background-color: transparent;
    margin-bottom: -4px;
    z-index: 10;
    position: relative;
}
.wa-tab-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #667781;
    background-color: #e5e7eb;
}
.dark .wa-tab-btn { color: #8696a0; background-color: #111b21; }

.wa-tab-btn.active-reply {
    background-color: #ffffff; /* Blanco para responder */
    color: #111b21;
}
.dark .wa-tab-btn.active-reply { background-color: #2a3942; color: #e9edef; }

.wa-tab-btn.active-private {
    background-color: #fff9c4; /* Amarillo para nota */
    color: #856404;
}
.dark .wa-tab-btn.active-private { background-color: #fbc02d; color: #000000; }

/* La burbuja pintada de amarillo */
.wa-bubble-private {
    background-color: #fff9c4 !important;
    color: #424242 !important;
    border: 1px solid #fde073;
}
.dark .wa-bubble-private {
    background-color: #fbc02d !important;
    color: #111b21 !important;
    border: none;
}

/* ============================================
   LOADER SCROLL INFINITO
   ============================================ */
.wa-loader-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 12px 0;
    flex-shrink: 0;
    transition: opacity 0.3s;
}

.wa-loader-circle {
    background-color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(11,20,26,.1);
}
.dark .wa-loader-circle {
    background-color: #202c33;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.wa-spinner {
    animation: wa-spin 1s linear infinite;
    width: 20px;
    height: 20px;
    color: #00a884;
}

@keyframes wa-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}