/*
 * Archivo: css/movil-style.css
 * Descripción: Estilos DEFINITIVOS para la vista móvil (estilo WhatsApp).
 * Integrado con chat-style.css v3.4
 * Reconstruido el 27-08-2026 tras pérdida accidental del archivo original.
 */

/* ======================================================= */
/* --- Estilos para dispositivos móviles (hasta 768px) --- */
/* ======================================================= */
@media (max-width: 768px) {

    :root {
        --bg-color: #0E1512;
        --panel-color: #16211C;
        --panel-secondary-color: #1B2A22;
        --text-color: #E7F6EE;
        --text-secondary-color: #9FE1CB;
        --border-color: #1D2A24;
        --accent-color: #1D9E75;
        --success-color: #5DCAA5;
        --input-bg-color: #1B2A22;
        --accent-text-color: #E7F6EE;
    }

    .hidden,
    .nav-bar {
        display: none !important;
    }

    .conversation-footer,
    .conversation-footer *,
    .message-input-container,
    .message-input-container * {
        transform: none !important;
        margin: 0 !important;
    }

    .app-container {
        flex-direction: column;
        overflow: hidden;
    }

    .main-content {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .chat-list-panel,
    .conversation-panel {
        display: none;
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        background-color: var(--bg-color);
    }

    .visible-mobile {
        display: flex !important;
        flex-direction: column !important;
    }

    .chat-list-header {
        background-color: #16211C;
        color: #E7F6EE;
        padding: 15px;
        flex-shrink: 0;
        border-bottom: 1px solid #1D2A24;
    }

    .conversation-panel.visible-mobile {
        position: relative !important;
        height: 100vh !important;
        width: 100vw !important;
    }

    .conversation-panel .conversation-header {
        background-color: #16211C !important;
        color: #E7F6EE !important;
        padding: 10px 12px 10px 8px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        border-bottom: none !important;
        position: relative !important;
        z-index: 101 !important;
    }

    /* Avatar del header en móvil: más chico + anillo de color según estado */
    #chat-header-avatar.avatar-large {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 13px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
    #chat-header-avatar.avatar-large.status-online  { box-shadow: 0 0 0 2px #16211C, 0 0 0 4px #4CAF50 !important; }
    #chat-header-avatar.avatar-large.status-away    { box-shadow: 0 0 0 2px #16211C, 0 0 0 4px #FFC107 !important; }
    #chat-header-avatar.avatar-large.status-busy    { box-shadow: 0 0 0 2px #16211C, 0 0 0 4px #FF0000 !important; }
    #chat-header-avatar.avatar-large.status-offline,
    #chat-header-avatar.avatar-large.status-group   { box-shadow: 0 0 0 2px #16211C, 0 0 0 4px #3a4a42 !important; }

    /* El avatar/foto real que genera generarAvatarHTML() (clase .avatar o .avatar-img, con o
       sin status-*) se inyecta COMO HIJO de #chat-header-avatar, y trae su propio tamaño fijo
       de 50px (el que usa en la lista de contactos) — sin esto se desborda del círculo de 34px
       del header y tapa/opaca el aro. Lo forzamos a llenar exactamente el círculo del padre. */
    #chat-header-avatar.avatar-large .avatar,
    #chat-header-avatar.avatar-large .avatar-img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        font-size: 13px !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* Si está en vivo, el aro multicolor manda sobre el anillo de estado (más específico + carga al final) */
    .kapi-header-avatar-wrap.kapi-is-live #chat-header-avatar.avatar-large {
        box-shadow: 0 0 0 2px #16211C !important;
    }

    /* Barra de iconos del header más compacta en móvil */
    .conversation-header {
        flex-wrap: nowrap !important;
    }
    .conversation-header .header-info {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        padding: 5px 6px !important;
    }
    .conversation-header .header-info h5,
    .conversation-header .header-info h5 * {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        max-width: 100% !important;
    }
    .conversation-header .header-icons {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        flex-shrink: 0 !important;
    }
    .conversation-header .header-icons .material-icons {
        font-size: 19px !important;
        padding: 6px !important;
    }
    .conversation-header .header-icons .icon-btn {
        padding: 6px !important;
        width: auto !important;
        height: auto !important;
    }
    .conversation-header .header-icons .icon-btn .material-icons {
        padding: 0 !important;
    }
    .conversation-header .menu-container {
        flex-shrink: 0 !important;
    }
    /* stream-button suele estar oculto (d-none); si algún día se muestra, que no rompa el layout */
    .conversation-header #stream-button.d-none,
    .conversation-header #stream-dropdown-menu.d-none {
        display: none !important;
    }

    .conversation-header .header-info h5,
    .conversation-header .header-icons {
        color: white !important;
    }

    .conversation-header .header-info p {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .back-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        background: none !important;
        border: none !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 2px 0 -10px !important;
    }
    .back-button .material-icons {
        font-size: 12px !important;
    }

    .conversation-panel.visible-mobile .message-area {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 15px !important;
        padding-bottom: 80px !important;
        background-color: #e5ddd5 !important;
        position: relative !important;
        z-index: 1 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .message-area::-webkit-scrollbar {
        display: none !important;
    }

    .conversation-footer {
        position: relative;
        background-color: var(--panel-color);
        padding: 8px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        align-items: flex-end;
    }

    .message-input-wrapper {
        display: flex;
        align-items: flex-end;
        width: 100%;
        gap: 8px;
    }

    .message-input-container {
        display: flex;
        align-items: flex-end;
        flex-grow: 1;
        background-color: var(--input-bg-color);
        border-radius: 24px;
        padding: 4px 8px;
    }

    .message-input {
        flex-grow: 1;
        border: none;
        background: transparent;
        color: var(--text-color);
        font-size: 16px;
        padding: 10px 0;
        line-height: 1.4;
        resize: none;
        max-height: 120px;
        overflow-y: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
        scrollbar-width: none;
        min-height: 20px;
        outline: none;
    }

    .message-input::-webkit-scrollbar {
        display: none;
    }

    .message-input:empty::before {
        content: attr(placeholder);
        color: var(--text-secondary-color);
        pointer-events: none;
        display: block;
    }

    .icon-btn {
        background: none;
        border: none;
        color: var(--text-secondary-color);
        cursor: pointer;
        padding: 8px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
        flex-shrink: 0;
    }

    .icon-btn:hover {
        background-color: var(--button-secondary-hover);
    }

    .attachment-btn,
    .emoji-btn {
        color: var(--text-secondary-color);
    }

    .voice-send-btn {
        background-color: #1D9E75;
        color: #06120D;
        box-shadow: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .voice-send-btn .material-icons {
        font-size: 24px;
    }

    .attachment-menu {
        position: absolute;
        bottom: 60px;
        left: 8px;
        right: 8px;
        background-color: var(--panel-secondary-color);
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        z-index: 50;
        opacity: 0;
        transform: translateY(10px) scale(0.98);
        pointer-events: none;
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
        padding: 10px;
    }

    .attachment-menu.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .attachment-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        text-align: center;
    }

    .attachment-item {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        color: var(--text-secondary-color);
        font-size: 12px;
    }

    .attachment-item i {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5px;
        transition: transform 0.2s;
        color: white;
        font-size: 24px;
    }

    .conversation-panel.visible-mobile .conversation-footer,
    .conversation-panel.visible-mobile .conversation-footer * {
        pointer-events: auto !important;
        touch-action: auto !important;
        user-select: auto !important;
    }

    .mensaje {
        max-width: 85% !important;
        margin-bottom: 8px !important;
        word-wrap: break-word !important;
        font-size: 14px !important;
    }

    .mensaje.recibido {
        background-color: #16211C !important;
        color: #E7F6EE !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    .mensaje.enviado {
        background-color: #1D9E75 !important;
        color: #06120D !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: var(--panel-color);
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--text-secondary-color);
        font-size: 0.7rem;
        gap: 4px;
        cursor: pointer;
        padding: 8px;
    }

    .nav-item.active {
        color: #5DCAA5;
    }

    .nav-item .material-icons {
        font-size: 22px;
    }

    .fab {
        position: fixed;
        bottom: 80px;
        right: 20px;
        width: 56px;
        height: 56px;
        background-color: #1D9E75;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #06120D;
        font-size: 24px;
        box-shadow: none;
        cursor: pointer;
        z-index: 1001;
        border: none;
        transition: transform 0.2s ease;
    }

    .fab:hover {
        transform: scale(1.05);
    }

    /* FIX RAÍZ (11-09-2026-f): esta lista ocultaba, con !important, TODO
       elemento cuyo id/clase contuviera la palabra "modal" ([id*="modal"],
       [class*="modal"]) y también cualquier div con position:fixed o
       position:absolute+z-index puesto por JS (div[style*="position: fixed"],
       etc.). Cada modal/overlay/ventana NUEVO que se creara en la app caía
       en esa trampa automáticamente y había que agregarlo a mano a la lista
       de excepciones de abajo — por eso cada modal nuevo (llamadas,
       batallas, encuestas...) aparecía roto la primera vez y se iba
       arreglando uno por uno. Se elimina ese comportamiento genérico:
       ahora solo se ocultan por nombre los elementos que sí son
       exclusivos de escritorio (selector de archivo adjunto, emoji picker,
       stickers). Los modales/overlays reales (.modal, .modal-backdrop,
       .modal-overlay) siguen ocultos por defecto y se muestran completos
       (ancho y alto del dispositivo) solo con la clase .visible/.show/
       .active, ver la sección "SISTEMA GENÉRICO DE MODALES" más abajo —
       así cualquier modal, ventana o panel que se cree de ahora en
       adelante se adapta solo, sin tocar este archivo de nuevo. */
    .conversation-footer input[type="file"],
    .conversation-footer input[type="file"]+label,
    .conversation-footer .file-upload,
    .conversation-footer .file-input-wrapper,
    input[type="file"],
    input[type="file"]+*,
    .attachment-modal,
    #attachment-modal,
    .emoji-picker,
    .sticker-picker,
    .sticker-panel {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        z-index: -999 !important;
    }

    /* ============================================================
       SISTEMA GENÉRICO DE MODALES/VENTANAS EN MÓVIL
       Cualquier elemento con clase .modal, .modal-backdrop o
       .modal-overlay empieza oculto, y se muestra a pantalla
       completa (cubriendo ancho y alto real del dispositivo) en
       cuanto recibe .show/.active/.visible — sin importar su id o
       las clases de sus hijos. Al no ocultar los hijos por nombre
       (como hacía la regla vieja), un modal nuevo funciona apenas
       se crea, sin necesitar ninguna excepción adicional aquí. */
    .modal,
    .modal-backdrop,
    .modal-overlay {
        display: none !important;
    }

    .modal.show,
    .modal.active,
    .modal.visible,
    .modal-backdrop.visible,
    .modal-overlay.visible {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 99999 !important;
    }

    /* Notificaciones pequeñas flotantes (NO ocupan la pantalla completa,
       a diferencia de los modales/ventanas reales de arriba): el aviso
       de adjunto activado y el banner de batalla en curso */
    .attachment-modal.show.user-activated,
    #kapiBattleIncomingBanner {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: fixed !important;
        z-index: 99999 !important;
        width: auto !important;
        height: auto !important;
        left: 12px !important;
        top: max(16px, env(safe-area-inset-top)) !important;
        right: 12px !important;
    }

    /* Overlays de pantalla completa creados por JS con id propio, que no
       usan .modal-backdrop/.modal-overlay como envoltorio */
    #kapiBattleInviteModal,
    #addParticipantModal,
    #kapi-call-type-selector,
    #kapi-individual-picker {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 99999 !important;
    }

    /* FIX (11-09-2026-c): la excepción de arriba tenía ".modal-backdrop.visible.user-activated",
       pero NINGÚN JS del proyecto agrega jamás la clase "user-activated" —
       es una condición muerta que nunca se cumple. Efecto real: TODO
       elemento con class="modal-backdrop" (calls-modal-overlay,
       group_call_modal, profile-modal-overlay, settings-modal-overlay,
       forward_modal, etc.) quedaba SIEMPRE oculto en el celular real
       (pantallas <768px), sin importar que loadAndShowModal/togglePanelModal
       le pusieran display:flex y la clase "visible" — la regla de arriba
       en este archivo (la que oculta "todo lo que diga modal") lo tapaba
       igual. Por eso el botón de Llamadas en la rueda satélite del celular
       no hacía absolutamente nada: el panel SÍ se abría en el DOM, pero
       invisible. Se cambió la condición a ".modal-backdrop.visible" (sin
       el requisito imposible), y se le da el tamaño completo de pantalla
       abajo, igual que a los demás overlays de llamadas. También se agregó
       ".modal-overlay.visible" (mismo problema exacto, pero es la clase que
       usan profile-modal-overlay y settings-modal-overlay como wrapper en
       vez de "modal-backdrop" — sin este agregado, Perfil y Ajustes seguían
       100% rotos en el celular real, aunque nunca se había probado/reportado). */
    .modal-backdrop.visible,
    .modal-overlay.visible {
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* FIX (11-09-2026-d/e): el fix de arriba solo arregla el FONDO oscuro
       (.modal-backdrop.visible / .modal-overlay.visible) — por eso en el
       celular aparecía "la cortina negra" (o nada) pero sin ningún modal
       adentro, o solo un borde delgado (una "línea") en vez de la tarjeta
       completa. Motivo real, más profundo de lo que parecía al principio:
       la regla de arriba en este archivo ([class*="modal"]:not(.modal-backdrop))
       oculta con !important CUALQUIER clase que contenga la palabra "modal"
       en TODA la app — y eso incluye no solo el contenedor de la tarjeta
       (.modal-panel-view, .modal-generic, .profile-modal-container, etc.,
       ya cubiertos abajo) sino también sus piezas internas: .modal-header,
       .modal-body, .modal-footer, .modal-btn, .modal-close-btn, etc. Con el
       header y el body ocultos, la tarjeta (ya en flex-column) se
       colapsaba a su borde de 1px de alto — de ahí la "línea verde" que
       reportó el usuario (el border-color del tema es verde/teal). En vez
       de seguir agregando clases una por una cada vez que aparezca un
       modal nuevo, se exceptúan aquí TODAS las piezas conocidas de una
       sola vez, como descendientes de un modal ya visible (.modal-backdrop
       o .modal-overlay con clase "visible"). */
    /* FIX (11-09-2026-g): pedido explícito del usuario — ya no como "tarjeta
       flotante" centrada (95% / max-width 400px / 85vh, con margen negro
       alrededor), sino a pantalla completa: cubre TODO el ancho y TODO el
       alto real del dispositivo, para cualquier tamaño de pantalla. */
    .modal-backdrop.visible .modal-panel-view,
    .modal-backdrop.visible .modal-generic,
    .modal-backdrop.visible .create-group-modal,
    .modal-backdrop.visible .modal-content-info,
    .modal-backdrop.visible .profile-modal-container,
    .modal-backdrop.visible .profile-modal-content,
    .modal-backdrop.visible .confirm-dialog,
    .modal-backdrop.visible .emoji-modal-content,
    .modal-backdrop.visible .wink-modal-content,
    .modal-backdrop.visible .pinned-list-modal,
    .modal-backdrop.visible .group-call-modal-content,
    .modal-backdrop.visible .profile-modal-container,
    .modal-backdrop.visible .profile-modal-content,
    .modal-backdrop.visible .confirm-dialog,
    .modal-backdrop.visible .emoji-modal-content,
    .modal-backdrop.visible .wink-modal-content,
    .modal-backdrop.visible .pinned-list-modal,
    .modal-backdrop.visible .group-call-modal-content,
    .modal-overlay.visible .modal-panel-view,
    .modal-overlay.visible .modal-generic,
    .modal-overlay.visible .create-group-modal,
    .modal-overlay.visible .modal-content-info,
    .modal-overlay.visible .confirm-dialog,
    .modal-overlay.visible .emoji-modal-content,
    .modal-overlay.visible .wink-modal-content,
    .modal-overlay.visible .pinned-list-modal {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
    }

    /* FIX (23-sep-2026): .profile-modal-container/.profile-modal-content salen
       de la lista de arriba y quedan acá, aparte, con overflow:hidden en vez
       de overflow-y:auto. El modal de Perfil (modals/profile.html) está armado
       para que SOLO su .profile-body-section interno haga scroll, dejando el
       header (portada+avatar) y el footer (Guardar/Cancelar) siempre fijos y
       visibles — si el contenedor completo también puede hacer scroll (como
       hacía acá con overflow-y:auto !important), el navegador termina
       mezclando ambos scrolls y el botón Guardar deja de ser alcanzable en
       celular real. Los demás modales de la lista de arriba no se tocan,
       siguen igual que antes. */
    .modal-backdrop.visible .profile-modal-container,
    .modal-backdrop.visible .profile-modal-content,
    .modal-overlay.visible .profile-modal-container,
    .modal-overlay.visible .profile-modal-content {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }


    /* Piezas INTERNAS de cualquier tarjeta de modal ya visible (header,
       footer, botones, divisores, inputs, imágenes) — cada una recupera
       el display que ya le daba appstyle.css antes de que esta regla se
       lo tapara. .modal-body se deja "block" (no flex) porque sus hijos
       internos (listas, textos) ya estaban maquetados para flujo normal;
       forzarlo a flex reordenaría su contenido sin necesidad. */
    .modal-backdrop.visible .modal-header,
    .modal-backdrop.visible .modal-footer,
    .modal-backdrop.visible .modal-btn,
    .modal-backdrop.visible .modal-btn-primary,
    .modal-backdrop.visible .modal-close-btn,
    .modal-overlay.visible .modal-header,
    .modal-overlay.visible .modal-footer,
    .modal-overlay.visible .modal-btn,
    .modal-overlay.visible .modal-btn-primary,
    .modal-overlay.visible .modal-close-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        z-index: auto !important;
        width: auto !important;
        height: auto !important;
    }

    .modal-backdrop.visible .modal-body,
    .modal-backdrop.visible .modal-divider,
    .modal-backdrop.visible .modal-avatar-img,
    .modal-backdrop.visible .modal-input-neon,
    .modal-overlay.visible .modal-body,
    .modal-overlay.visible .modal-divider,
    .modal-overlay.visible .modal-avatar-img,
    .modal-overlay.visible .modal-input-neon {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        z-index: auto !important;
        width: auto !important;
        height: auto !important;
    }

    /* FIX (23-09-2026): la regla de arriba pone width/height:auto !important
       a CUALQUIER .modal-avatar-img visible (para no chocar con el fix que
       revive modal-body/modal-divider/modal-input-neon en el celular real).
       Pero eso incluye el avatar circular del modal de Perfil, que en su
       propio <style> (modals/profile.html) y en appstyle.css SÍ define un
       tamaño fijo (88px/100px) sin !important — y pierde contra esta regla.
       Resultado: en el celular real, la foto de perfil se renderiza a su
       tamaño natural (a veces varios cientos de px) en vez de 88px,
       desbordándose fuera del círculo/modal. Se fija el tamaño aquí con
       selector por ID (mayor especificidad que .modal-overlay.visible) para
       ganarle a la regla de arriba sin tocar su comportamiento para los
       demás elementos (modal-body, modal-divider, modal-input-neon). */
    #profile-modal-overlay.visible .modal-avatar-img {
        width: 88px !important;
        height: 88px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }

    /* FIX (23-sep-2026): PERFIL SIEMPRE SE ABRÍA EN "MODO EDICIÓN" EN EL CELULAR.
       Causa real: la regla de arriba (.modal-overlay.visible .modal-input-neon
       { display:block !important; ... }), pensada para revivir inputs de otros
       modales, también atrapa los campos de edición del perfil (alias, frase de
       estado, sobre mí), que en modals/profile.html llevan
       class="edit-only modal-input-neon" y se esconden con
       ".edit-only { display:none !important }". Como esta regla móvil tiene MÁS
       especificidad (3 clases vs 1), ganaba siempre: los campos de edición se
       veían junto al texto de vista, sin haber tocado "Editar perfil", y sin
       botones Cancelar/Guardar (el footer sí sigue oculto). Se restaura el
       comportamiento de profile.html SOLO para el perfil: ocultos en vista,
       visibles (a todo el ancho) cuando el contenedor tiene .editing. Los
       demás modales no se tocan. */
    #profile-modal-overlay.visible .modal-input-neon.edit-only {
        display: none !important;
    }
    #profile-modal-overlay.visible .profile-modal-container.editing .modal-input-neon.edit-only {
        display: block !important;
        width: 100% !important;
    }

    /* FIX (11-09-2026): mismo patrón que el fix de #kapiBattleInviteModal de
       abajo — la excepción de arriba solo arregla display/opacity/etc, pero
       la regla "oculta todo lo que diga modal / todo fixed" más arriba en
       este archivo también deja width:0, height:0 y left/top:-9999px con
       !important, y esos 4 nunca se revertían para estos 3 overlays nuevos
       (creados por JS en llamadasgrupal.js: el picker "Añadir a la llamada"
       dentro de una llamada 1a1, y los selectores Individual/Grupal del
       panel de Llamadas). Por eso en el celular real quedaban con
       display:flex pero tamaño cero y fuera de pantalla — invisibles aunque
       "mostrados" (confirmado con DevTools remoto: el elemento existía en
       el DOM con display:flex pero esas 4 propiedades tachadas por esta
       regla). Estos 3 cubren toda la pantalla (fondo oscuro + caja
       centrada por su propio CSS interno), así que necesitan el tamaño
       completo en vez del recuadro angosto de arriba (pensado para
       kapiBattleInviteModal, que es una notificación pequeña). */
    #addParticipantModal,
    #kapi-call-type-selector,
    #kapi-individual-picker {
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* FIX: la excepción de arriba solo arregla display/opacity/etc — pero
       la regla que oculta "todo lo que diga modal" (más arriba en este
       archivo) también deja width:0, height:0 y left/top:-9999px puestos
       con !important, y esos 4 nunca se estaban revirtiendo para este
       modal en particular. Sin esto, quedaba con display:flex pero
       tamaño cero y fuera de la pantalla — invisible aunque "mostrado".
       Mismo patrón que ya usa #call-modal.visible más abajo, en vez de
       forzarle el tamaño a TODOS los modales genéricos de la lista de
       arriba (eso rompería los que ya funcionan bien con su propio ancho). */
    #kapiBattleInviteModal {
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    #call-modal.visible {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 2000 !important;
    }

    .modal-backdrop {
        z-index: 2000 !important;
    }

    /* FIX (11-09-2026-g): esta segunda regla (fuera de .visible) repetía el
       tamaño de tarjeta flotante y, al venir DESPUÉS en el archivo, le
       ganaba a la regla de arriba aunque ambas tuvieran !important —
       dejaba el panel de Llamadas como tarjeta chica de nuevo sin importar
       lo que se cambiara arriba. Mismo criterio: pantalla completa. */
    .modal-generic,
    .modal-panel-view,
    .preview-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }

    .preview-modal .modal-body {
        min-height: 200px;
        max-height: 60vh;
        overflow-y: auto;
    }

    .preview-modal .modal-footer {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 15px !important;
    }

    .preview-modal .modal-footer .message-input {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    .preview-buttons-container {
        display: flex;
        width: 100%;
        gap: 10px;
        justify-content: flex-end;
    }

    .preview-modal .modal-footer .modal-btn.cancel,
    .preview-modal .modal-footer .modal-btn.send {
        flex-grow: 1;
        padding: 10px !important;
        text-align: center;
        border-radius: 20px !important;
    }

    .sticker-panel {
        bottom: 70px !important;
        left: 10px !important;
        right: 10px !important;
        max-height: 300px !important;
        overflow-y: auto !important;
    }

    #in-chat-search-bar.visible {
        position: sticky !important;
        top: 0 !important;
        z-index: 101 !important;
    }

    #menu-toggle-button {
        display: none !important;
    }
    /* ✅ FIX: ".menu-container .dropdown-menu" estaba agrupado acá por error,
       ocultando SIEMPRE el menú de 3 puntos (⋮) de la conversación en mobile
       con !important — sin importar que el JS le agregara la clase "visible",
       display:none siempre gana. Por eso nunca abría en la app/celular. */

    body.light-theme .conversation-footer {
        background-color: #f0f0f0 !important;
        border-top-color: #d1d7db !important;
    }
    body.light-theme .conversation-footer .message-input,
    body.light-theme .conversation-footer .message-input-container {
        background-color: white !important;
        border-color: #ddd !important;
        color: #000 !important;
    }
    body.light-theme .message-area {
        background-color: #e5ddd5 !important;
    }

    body.dark-theme .conversation-footer {
        background-color: #16211C !important;
        border-top-color: #1D2A24 !important;
    }
    body.dark-theme .conversation-footer .message-input-container {
        background-color: #3e4245 !important;
        border-color: #5a5f63 !important;
    }
    body.dark-theme .conversation-footer .message-input,
    body.dark-theme .conversation-footer .message-input::placeholder {
        color: white !important;
    }
    body.dark-theme .message-area {
        background-color: #0B120E !important;
    }
    body.dark-theme .mensaje.recibido {
        background-color: #16211C !important;
        color: #E7F6EE !important;
    }
    body.dark-theme .mensaje.enviado {
        background-color: #0F6E56 !important;
        color: #E7F6EE !important;
    }
}

/* Ocultar widgets de racha/nivel en móvil */
#personal-progress-widget,
#streak-indicator {
    display: none !important;
}

/* Fix definitivo: .call-modal-content necesita su propio tamaño real, no heredar 0x0 */
#call-modal.visible .call-modal-content {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: calc(85vh * 9 / 16) !important;
    height: 85vh !important;
    max-width: 480px !important;
    max-height: 100vh !important;
    z-index: auto !important;
}
@media (max-width: 500px) {
    #call-modal.visible .call-modal-content {
        width: 100vw !important;
        height: 100svh !important;
        max-width: 100vw !important;
    }
}

/* Fix: deja espacio suficiente abajo para que el último chat no quede tapado por la barra inferior nueva */
html.kapi-native-app .chat-list-panel {
    padding-bottom: 90px !important;
    -webkit-overflow-scrolling: touch;
}

/* =======================================================
   RUEDA DE NAVEGACIÓN (solo dentro de la app nativa)
   ======================================================= */

html.kapi-native-app .kapi-wheel-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color, #E7F6EE);
    z-index: 500;
}

html.kapi-native-app .kapi-wheel-nav {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 280px;
    height: 280px;
}

html.kapi-native-app .kapi-wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: var(--accent-color, #1D9E75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    cursor: pointer;
}

html.kapi-native-app .kapi-wheel-center i {
    color: #06120D;
    font-size: 26px;
}

html.kapi-native-app .kapi-wheel-center span {
    color: #06120D;
    font-size: 11px;
    font-weight: 600;
}

html.kapi-native-app .kapi-wheel-satellite {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
}

html.kapi-native-app .kapi-wheel-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: var(--panel-color, #16211C);
    display: flex;
    align-items: center;
    justify-content: center;
}

html.kapi-native-app .kapi-wheel-satellite i {
    color: var(--text-secondary-color, #9FE1CB);
    font-size: 22px;
}

html.kapi-native-app .kapi-wheel-satellite span {
    font-size: 10px;
    color: var(--text-secondary-color, #9FE1CB);
}

/* Hexágono de 6 satélites (60° entre cada uno), todos centrados con
   translate(-50%,-50%) sobre el mismo punto para que queden simétricos */
html.kapi-native-app .kapi-wheel-sat-chats    { left: 50%;              top: calc(50% - 100px); transform: translate(-50%, -50%); }
html.kapi-native-app .kapi-wheel-sat-grupos   { left: calc(50% + 87px); top: calc(50% - 50px);  transform: translate(-50%, -50%); }
html.kapi-native-app .kapi-wheel-sat-canales  { left: calc(50% + 87px); top: calc(50% + 50px);  transform: translate(-50%, -50%); }
html.kapi-native-app .kapi-wheel-sat-live     { left: 50%;              top: calc(50% + 100px); transform: translate(-50%, -50%); }
html.kapi-native-app .kapi-wheel-sat-estados  { left: calc(50% - 87px); top: calc(50% + 50px);  transform: translate(-50%, -50%); }
html.kapi-native-app .kapi-wheel-sat-llamadas { left: calc(50% - 87px); top: calc(50% - 50px);  transform: translate(-50%, -50%); }

/* Satélite "Live" resaltado (coral) para distinguirlo de los demás */
html.kapi-native-app .kapi-wheel-sat-live .kapi-wheel-icon {
    background-color: #D85A30;
}
html.kapi-native-app .kapi-wheel-sat-live i,
html.kapi-native-app .kapi-wheel-sat-live span {
    color: #FAECE7;
}

/* =======================================================
   CENTRO DE LIVE — sheet del satélite "Live" (público/privado/
   premium + accesos directos a las herramientas de transmisión)
   ======================================================= */
html.kapi-native-app #kapi-live-hub {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(20,20,20,0.97);
    border-radius: 16px 16px 0 0;
    padding: 16px;
    /* 06-09-2026 FIX: la barra inferior (.kapi-bottom-bar) tiene z-index 999999 !important
       más abajo en este mismo archivo — por eso tapaba las últimas filas del hub aunque
       el sheet ya tuviera scroll. Este z-index tiene que quedar por encima de esa barra. */
    padding-bottom: max(76px, calc(60px + env(safe-area-inset-bottom) + 16px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000000;
}
html.kapi-native-app #kapi-live-hub.open { display: block; }

#kapi-live-hub .kapi-live-hub-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
#kapi-live-hub .kapi-live-hub-header span {
    color: #E7F6EE; font-size: 15px; font-weight: 500;
}
#kapi-live-hub .kapi-live-hub-header button {
    background: none; border: none; color: #9FE1CB; font-size: 20px;
}

#kapi-live-hub .kapi-live-hub-visibility {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-bottom: 14px;
}
#kapi-live-hub .kapi-live-hub-visibility button {
    background: #1a1a1f; border: none; border-radius: 10px;
    padding: 10px 4px; display: flex; flex-direction: column;
    align-items: center; gap: 4px; color: #9FE1CB; font-size: 11px;
}
#kapi-live-hub .kapi-live-hub-visibility button i { font-size: 18px; }
#kapi-live-hub .kapi-live-hub-visibility button.kapi-premium-opt {
    color: #FAC775;
}

#kapi-live-hub .kapi-live-hub-tools {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
#kapi-live-hub .kapi-live-hub-tools button {
    background: rgba(255,255,255,0.08); border: none; border-radius: 12px;
    padding: 10px 4px; display: flex; flex-direction: column;
    align-items: center; gap: 4px; color: #D3D1C7; font-size: 10px;
}
#kapi-live-hub .kapi-live-hub-tools button i { font-size: 18px; color: #B4B2A9; }

/* Barra inferior nueva (dentro de la app) */
html.kapi-native-app .kapi-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    background-color: var(--panel-color, #16211C);
    border-top: 1px solid var(--border-color, #1D2A24);
    z-index: 500;
}

html.kapi-native-app .kapi-bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-secondary-color, #9FE1CB);
    font-size: 0.65rem;
    background: none;
    border: none;
    cursor: pointer;
}

html.kapi-native-app .kapi-bottom-item i {
    font-size: 20px;
}

html.kapi-native-app .kapi-bottom-item span {
    font-size: 10px;
}

html.kapi-native-app .kapi-bottom-item.active i,
html.kapi-native-app .kapi-bottom-item.active span {
    color: #5DCAA5;
}

body.kapi-showing-chats .chat-list-panel {
    display: flex !important;
}

/* Fix: ocultar la barra inferior nueva mientras hay una conversación abierta, para no tapar el footer del chat */
html.kapi-native-app body:has(.conversation-panel.visible-mobile) .kapi-bottom-bar {
    display: none !important;
}

/* Fix: ocultar la barra inferior mientras hay una llamada entrante/activa, para que no choque con el modal */
html.kapi-native-app body:has(#call-modal.visible) .kapi-bottom-bar {
    display: none !important;
}

/* FIX (23-sep-2026-c): la barra inferior (.kapi-bottom-bar, z-index 999999 !important)
   quedaba POR ENCIMA del modal de Perfil (#profile-modal-overlay, z-index 99999 !important):
   tapaba el borde inferior y "Sobre mí", y por eso el perfil se sentía cortado/empujado.
   Mismo patrón que la llamada y el compositor de Reel de arriba/abajo: mientras el perfil
   está abierto (.visible) la barra se oculta; al cerrarse (closeProfileModal/closeAllModals
   quitan .visible) la barra vuelve sola. */
html.kapi-native-app body:has(#profile-modal-overlay.visible) .kapi-bottom-bar {
    display: none !important;
}

/* Vida al botón central "En vivo": anillos de pulso tipo señal + respiración */
html.kapi-native-app .kapi-wheel-center {
    animation: kapiEnVivoBreathe 2.4s ease-in-out infinite;
}
html.kapi-native-app .kapi-wheel-center::before,
html.kapi-native-app .kapi-wheel-center::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #1D9E75;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
    animation: kapiEnVivoPulse 2.4s ease-out infinite;
}
html.kapi-native-app .kapi-wheel-center::after {
    animation-delay: 1.2s;
}
@keyframes kapiEnVivoPulse {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.55; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
@keyframes kapiEnVivoBreathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    html.kapi-native-app .kapi-wheel-center,
    html.kapi-native-app .kapi-wheel-center::before,
    html.kapi-native-app .kapi-wheel-center::after {
        animation: none;
    }
}

/* Ocultar la rueda y la barra inferior cuando el modo streaming está activo (son hermanas de .app-container, no hijas) */
html.kapi-native-app .app-container.streaming-active ~ .kapi-wheel-header,
html.kapi-native-app .app-container.streaming-active ~ .kapi-wheel-nav,
html.kapi-native-app .app-container.streaming-active ~ .kapi-bottom-bar {
    display: none !important;
}

/* Y asegurar que el streaming-stage sí se muestre a pantalla completa (esa sí es descendiente de .app-container) */
html.kapi-native-app .app-container.streaming-active #streaming-stage {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 600 !important;
}

/* Quitar el límite de 640x360 al video local durante streaming a pantalla completa.
   Excluye el modo batalla (kapi-battle-active): ahí kapi-streambox.css pone cada
   cámara al 50% del ancho, y esta regla con !important le ganaba por especificidad,
   estirando el video del rival a pantalla completa en el celular. */
html.kapi-native-app .app-container.streaming-active #streaming-stage:not(.kapi-battle-active) > #stream-preview-local,
html.kapi-native-app .app-container.streaming-active #streaming-stage:not(.kapi-battle-active) > #pro-main-stream-video,
html.kapi-native-app .app-container.streaming-active #streaming-stage:not(.kapi-battle-active) > #kapi-watermark-canvas {
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* El posicionamiento y estilo del dock del transmisor (mic/cámara/+/finalizar)
   ahora vive únicamente en kapi-streambox.css, en la regla "#streaming-stage
   .broadcaster-controls-bar": esa usa un ID y por eso le gana en especificidad
   a cualquier cosa que pongamos aquí (con o sin !important) — tenerlo
   duplicado en dos archivos fue justo lo que causó el desorden la vez
   anterior. Si hay que tocar el dock, se toca allá. */

html.kapi-native-app .app-container.streaming-active #minigames-btn,
html.kapi-native-app .app-container.streaming-active #filters-btn {
    display: none !important;
    animation: none !important;
}

html.kapi-native-app .app-container.streaming-active #streaming-more-sheet {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20,20,20,0.97);
    border-radius: 16px 16px 0 0;
    padding: 16px;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    z-index: 700;
}

html.kapi-native-app .app-container.streaming-active #streaming-more-sheet.open {
    display: grid !important;
}

html.kapi-native-app .app-container.streaming-active #streaming-more-sheet button,
html.kapi-native-app .app-container.streaming-active #streaming-more-sheet #minigames-btn,
html.kapi-native-app .app-container.streaming-active #streaming-more-sheet #filters-btn {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}

/* Fix: ocultar lista de chats por defecto, mostrar solo tras pulsar el satélite "Chats" */
html.kapi-native-app .chat-list-panel {
    display: none !important;
}
html.kapi-native-app .chat-list-panel.show-chat-list {
    display: flex !important;
}

/* Fix: la barra vieja (.bottom-nav) no debe mostrarse nunca dentro de la app nativa,
   sin importar el ancho de pantalla que dispare las reglas de appstyle.css */
html.kapi-native-app .bottom-nav {
    display: none !important;
}

/* Fix: la barra inferior nueva debe verse SIEMPRE por encima de listas/conversaciones */
html.kapi-native-app .kapi-bottom-bar {
    z-index: 9999 !important;
}

/* Fix definitivo: forzar la barra inferior SIEMPRE visible dentro de la app nativa,
   sin importar qué otra regla haya antes — al ir al final del archivo, esta gana
   el empate de especificidad contra cualquier otra regla anterior */
html.kapi-native-app .kapi-bottom-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
}

/* FIX v2: minigames-btn y filters-btn son hermanos de body, no descendientes de .app-container
   (por eso la regla anterior con ".streaming-active #minigames-btn" nunca los alcanzaba) */
html.kapi-native-app #minigames-btn,
html.kapi-native-app #filters-btn {
    display: none !important;
}

/* FIX v3 (06-09-2026): mismo tratamiento para el resto de botones flotantes
   sueltos que aparecían regados por la pantalla durante una transmisión —
   ahora solo se muestran dentro de #streaming-more-sheet cuando se abre
   "Más opciones", igual que ya pasaba con minigames-btn y filters-btn */
html.kapi-native-app #gifts-open-btn,
html.kapi-native-app #achievements-open-btn,
html.kapi-native-app #membership-open-btn,
html.kapi-native-app #notifications-btn,
html.kapi-native-app #referrals-btn,
html.kapi-native-app #leaderboard-open-btn,
html.kapi-native-app #streak-indicator,
html.kapi-native-app #emote-toggle-btn,
html.kapi-native-app #wallet-btn {
    display: none !important;
}
html.kapi-native-app .app-container.streaming-active #streaming-more-sheet.open #gifts-open-btn,
html.kapi-native-app .app-container.streaming-active #streaming-more-sheet.open #achievements-open-btn,
html.kapi-native-app .app-container.streaming-active #streaming-more-sheet.open #membership-open-btn,
html.kapi-native-app .app-container.streaming-active #streaming-more-sheet.open #notifications-btn,
html.kapi-native-app .app-container.streaming-active #streaming-more-sheet.open #referrals-btn,
html.kapi-native-app .app-container.streaming-active #streaming-more-sheet.open #leaderboard-open-btn,
html.kapi-native-app .app-container.streaming-active #streaming-more-sheet.open #streak-indicator,
html.kapi-native-app .app-container.streaming-active #streaming-more-sheet.open #emote-toggle-btn,
html.kapi-native-app .app-container.streaming-active #streaming-more-sheet.open #wallet-btn {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    border-radius: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    flex-direction: column;
    gap: 2px;
}

/* FIX v2: el botón de encuesta lo inyecta el JS dentro del riel; lo ocultamos en móvil */
html.kapi-native-app .app-container.streaming-active #create-poll-btn {
    display: none !important;
}

/* FIX v2: el header real trae calidad de conexión + engagement + controles de teatro
   en la misma fila, que no cabe en una pantalla angosta y se corta ("ENC..."):
   dejamos solo avatar + badge + título + contador de espectadores */
html.kapi-native-app .app-container.streaming-active .live-header-overlay {
    padding: 12px !important;
}

html.kapi-native-app .app-container.streaming-active #connection-quality,
html.kapi-native-app .app-container.streaming-active .engagement-wrapper,
html.kapi-native-app .app-container.streaming-active .theater-controls {
    display: none !important;
}

html.kapi-native-app .app-container.streaming-active .streamer-details h3 {
    font-size: 13px !important;
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Chat lateral flotante para el streaming en vivo (móvil, app nativa) — selectores reales del HTML.
   Los mensajes siguen ocupando el ancho útil (dejando hueco a la izq. para las reacciones
   y a la der. para el dock); la franja de texto en sí va aparte, a todo el ancho y al fondo. */
html.kapi-native-app .app-container.streaming-active #pro-chat-sidebar {
    display: flex !important;
    flex-direction: column;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 30vh !important;
    background: transparent !important;
    border: none !important;
    transform: none !important;
    /* FIX 14-09-2026: mismo problema que en appstyle.css (desktop) —
       60 quedaba por encima de la columna de botones del espectador
       (.kapi-viewer-actions, z-index:40). Bajado a 10 por consistencia,
       aunque en el celular no coincidía en X con los botones por eso
       no se notaba ahí; el panel de regalos en sí (z-index 1000001+)
       sigue intacto, ese es un problema aparte sin resolver todavía. */
    z-index: 10;
    pointer-events: none;
}
/* Nota: #live-chat-input-area es hijo de este contenedor y también usa
   position:absolute con bottom:0 — como ese "bottom:0" es relativo a ESTA
   caja (el ancestro posicionado más cercano), si aquí arriba pusiéramos
   cualquier valor distinto de 0 la franja de texto quedaría flotando esa
   misma distancia por encima del borde real de la pantalla, en vez de al raz. */

/* El header real es .chat-header (no tiene id) */
html.kapi-native-app .app-container.streaming-active #pro-chat-sidebar .chat-header {
    display: none !important;
}

html.kapi-native-app .app-container.streaming-active #pro-chat-messages {
    background: transparent !important;
    /* padding-bottom real de la franja de texto (ver #live-chat-input-area más abajo:
       ~6px arriba + campo de ~34px + espacio inferior seguro) para que el último
       mensaje nunca quede tapado detrás de la caja de escribir */
    padding: 0 54px calc(52px + env(safe-area-inset-bottom)) 44px !important;
    gap: 6px !important;
    overflow-y: auto;
    /* Antes el degradado ocupaba el 30% superior de la caja, lo que en una caja
       tan baja (30vh) hacía que un comentario recién llegado ya estuviera medio
       transparente casi de inmediato. Ahora el mensaje entra bien visible (fade-in
       propio, ver .chat-message más abajo) y solo se difumina el 15% superior,
       justo antes de desaparecer del todo por scroll, dando más tiempo de lectura. */
    mask-image: linear-gradient(to bottom, transparent, #000 15%);
}

html.kapi-native-app .app-container.streaming-active .chat-welcome {
    display: none !important;
}

/* Estructura real: avatar + chat-message-content (header con nombre + texto) */
html.kapi-native-app .app-container.streaming-active .chat-message {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: rgba(0,0,0,0.35);
    border-radius: 12px;
    padding: 5px 10px;
    pointer-events: auto;
    max-width: 100%;
    width: fit-content;
    /* Transición de entrada: cada comentario aparece con un fade + pequeño
       deslizamiento en vez de saltar de golpe, para que el que transmite
       alcance a leerlo antes de que suba y empiece a difuminarse arriba. */
    animation: kapiChatMsgIn 0.35s ease-out;
}

@keyframes kapiChatMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

html.kapi-native-app .app-container.streaming-active .chat-message-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.kapi-native-app .app-container.streaming-active .chat-message-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

html.kapi-native-app .app-container.streaming-active .chat-username {
    font-size: 10px;
    font-weight: 500;
}

html.kapi-native-app .app-container.streaming-active .chat-message-text {
    font-size: 12px;
    color: #E7F6EE;
    word-break: break-word;
}

/* El área del input real tiene id="live-chat-input-area": ahora es la franja de texto
   a todo el ancho, pegada al fondo de la pantalla (la barra de reacciones ya no vive
   aquí adentro — ver #live-reactions-bar más abajo, que ahora es su propia columna
   vertical pegada al borde izquierdo). */
html.kapi-native-app .app-container.streaming-active #live-chat-input-area {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 6px 8px max(10px, env(safe-area-inset-bottom)) 2px !important;
    box-sizing: border-box !important;
    z-index: 61;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Barra de reacciones (emojis): columna vertical, casi transparente, pegada al borde
   izquierdo de la pantalla — a la misma altura que el dock del transmisor a la derecha. */
html.kapi-native-app .app-container.streaming-active #live-reactions-bar {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: none !important;
    padding: 0 !important;
    z-index: 55 !important;
}

html.kapi-native-app .app-container.streaming-active #live-reactions-bar .reaction-live-btn {
    background: rgba(0,0,0,0.22) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Botón de abrir el panel de regalos (kapi-gift-btn): pedido explícito del
   usuario con captura — sacarlo de la columna vertical de la derecha y
   ponerlo pegado a la caja de escribir, en la esquina inferior derecha,
   a la misma altura que el campo de texto (no arriba, con el resto de la
   columna de rosa/historial/corazón/compartir). */
html.kapi-native-app .app-container.streaming-active #kapi-gift-btn {
    position: fixed !important;
    right: 8px !important;
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)) !important;
    z-index: 62;
}

/* El panel de emotes y el autocompletado no caben en el espacio angosto: quedan ocultos hasta que se necesiten */
html.kapi-native-app .app-container.streaming-active #emote-panel,
html.kapi-native-app .app-container.streaming-active #emote-autocomplete {
    display: none !important;
}

html.kapi-native-app .app-container.streaming-active #emote-panel.visible {
    display: block !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 90px !important;
    z-index: 70 !important;
}

/* El envoltorio real del input es .chat-input-wrapper (no .input-wrapper).
   Ahora ocupa todo el ancho disponible de la franja del fondo. */
html.kapi-native-app .app-container.streaming-active .chat-input-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0,0,0,0.45);
    border-radius: 22px;
    padding: 6px 6px 6px 10px;
    pointer-events: auto;
}

html.kapi-native-app .app-container.streaming-active #pro-chat-input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    color: #E7F6EE;
    font-size: 13px;
    outline: none;
}

html.kapi-native-app .app-container.streaming-active #pro-send-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #1D9E75;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.kapi-native-app .app-container.streaming-active #pro-send-btn .material-icons {
    color: #06120D;
    font-size: 17px;
}
/* =======================================================
   FIX 06-09-2026: TODOS los paneles/modales de streaming deben
   verse a pantalla completa en el celular (antes usaban el diseño
   "modal centrado 90%" pensado para desktop, y en el celular se
   veía cortado/a la mitad). Un selector por ID le gana en
   especificidad a cualquier regla de clase (como .kapi-bottom-bar),
   así que esto queda por encima de la barra inferior sin importar
   el orden en el archivo.
   ======================================================= */
html.kapi-native-app #achievements-panel,
html.kapi-native-app #streak-panel,
html.kapi-native-app #notifications-panel,
html.kapi-native-app #notif-settings-panel,
html.kapi-native-app #referrals-panel,
html.kapi-native-app #membership-panel,
html.kapi-native-app #leaderboard-container,
html.kapi-native-app #liga-panel-container,
html.kapi-native-app #torneo-panel-container,
html.kapi-native-app #gifts-panel-container,
html.kapi-native-app #gifts-history-panel,
html.kapi-native-app #minigames-control-panel,
html.kapi-native-app #filters-panel,
html.kapi-native-app #poll-creator-modal,
html.kapi-native-app #wallet-panel,
html.kapi-native-app #emote-panel {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
    isolation: isolate !important;
    border-radius: 0 !important;
    z-index: 1000001 !important;
    opacity: 1 !important;
    animation: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 76px !important; /* que la última fila no quede tapada por la barra inferior */
}

/* La billetera queda con z-index más alto que .kapi-bottom-bar (500), así que
   la tapa por completo — el padding de 76px de la regla de arriba (pensado
   para paneles que sí conviven con la barra) le queda como espacio muerto
   al fondo. Se reemplaza por el inset de zona segura únicamente. */
html.kapi-native-app #wallet-panel {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Los modales de confirmación pequeños (dentro de los paneles de arriba)
   SÍ se quedan como diálogo centrado — no tiene sentido que un
   "¿confirmas suscribirte?" ocupe la pantalla completa */
html.kapi-native-app #membership-confirm-modal,
html.kapi-native-app #referral-welcome-modal,
html.kapi-native-app #missions-panel,
html.kapi-native-app #wallet-earnings-modal {
    position: fixed !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 88% !important; max-width: 420px !important;
    z-index: 1000002 !important;
}

/* =======================================================
   FIX 14-09-2026 (v1 - opacity: NO funcionó, confirmado por el
   usuario con captura nueva — mismo resultado exacto: opacity:1,
   visibility:visible, elementFromPoint()=el panel, pero nada
   pintado en pantalla). Sigue siendo el mismo patrón: el navegador
   (hit-testing/DOM) dice una cosa, lo que se pinta en pantalla es
   otra — eso confirma con más fuerza que es una "hardware overlay"
   nativa de Android (SurfaceView/SurfaceControl) para el <video>,
   fuera por completo del árbol de pintura de Chromium.
   FIX v2: un overlay de hardware NO puede recortarse en esquinas
   redondeadas ni con overflow:hidden — apenas se le pide eso al
   video, Android está obligado a sacarlo de la ruta de overlay y
   componerlo como textura normal (si no, no podría recortarse).
   border-radius:1px es imperceptible a simple vista pero basta
   para forzar el cambio de ruta de renderizado. */
html.kapi-native-app #streaming-stage > #pro-main-stream-video,
html.kapi-native-app #streaming-stage > #stream-preview-local {
    opacity: 0.9999 !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    border-radius: 1px !important;
    overflow: hidden !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
}

/* Fix: ocultar la barra inferior mientras el compositor de Reel está abierto, para no tapar el boton Publicar */
html.kapi-native-app body:has(.kapi-reel-screen.visible) .kapi-bottom-bar {
    display: none !important;
}

/* FIX (07-oct-2026): el modal "Nuevo Grupo" (#new-group-modal-overlay) quedaba con los botones
   Cancelar / Crear tapados por la barra inferior (.kapi-bottom-bar, z-index 999999 !important).
   Mismo patrón que el perfil, la llamada y el compositor de Reel: mientras el modal está abierto
   (.visible, lo pone openNewGroupModal en grupos.js) la barra se oculta; al cerrarse
   (_closeNewGroupModal quita .visible) la barra vuelve sola. */
html.kapi-native-app body:has(#new-group-modal-overlay.visible) .kapi-bottom-bar {
    display: none !important;
}