trae la clase "right-chat-active" pegada en el HTML (no es un toggle), y esa clase es justo la que el style.css base del template usa para deslizar el panel de CONTACTOS (.right-chat) encima del chat en mobile. Al quedar siempre activa, el panel de contactos podía quedar semi-superpuesto al área de mensajes en vez de comportarse como un toggle real. Solución: en mobile, contactos y conversación pasan a ser dos PANTALLAS COMPLETAS separadas (como WhatsApp/Telegram), una visible por vez, controladas por una clase propia en (body.ampara-chat-abierto) en vez de depender de "right-chat-active". El alto real disponible (con teclado y barra de direcciones incluidos) se mide por JS con la Visual Viewport API y se guarda en variables CSS (--ampara-vh/--ampara-header-h/--ampara-footer-h/--ampara-input-h). Ver default-message.html, CORRECCIÓN 24/25 para el JS correspondiente. Todo con !important porque no tenemos a la vista el style.css base del template, así que necesitamos pisar cualquier regla de "right-chat-active" que venga de ahí. Si algo no termina de comportarse bien, mandá style.css y afinamos selectores. */ :root { --ampara-vh: 1dvh; /* fallback si el JS todavía no corrió */ --ampara-header-h: 60px; --ampara-footer-h: 60px; --ampara-input-h: 70px; } @media (max-width: 991.98px) { /* Pantalla 1: CONTACTOS — pantalla completa entre header y footer, ignorando cualquier posición que le imponga "right-chat-active" en el style.css base. */ .right-chat { display: block !important; position: fixed !important; top: var(--ampara-header-h) !important; left: 0 !important; right: 0 !important; bottom: var(--ampara-footer-h) !important; width: 100% !important; max-width: 100vw !important; height: auto !important; margin: 0 !important; transform: none !important; z-index: 15; background: #fff; } .middle-sidebar-right-content { max-height: none !important; height: 100% !important; overflow-y: auto !important; } /* Pantalla 2: CONVERSACIÓN — oculta hasta que se abre un chat. */ .middle-sidebar-left { display: none !important; } /* Body en modo "conversación abierta": se invierte qué pantalla se ve. Este toggle reemplaza al de "right-chat-active". */ body.ampara-chat-abierto .right-chat { display: none !important; } body.ampara-chat-abierto .middle-sidebar-left { display: block !important; } /* El chat ocupa el alto real disponible (header + footer + input descontados), usando el alto visual real del navegador —no 100vh, que no baja cuando aparece el teclado. */ .chat-wrapper { height: calc(var(--ampara-vh) * 100 - var(--ampara-header-h) - var(--ampara-footer-h) - var(--ampara-input-h)) !important; max-height: none !important; } .chat-body { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .messages-content { padding-bottom: calc(var(--ampara-input-h) + 10px) !important; } /* El input queda siempre pegado arriba del footer móvil, nunca tapado por el teclado ni por la barra inferior. */ .chat-bottom { position: fixed !important; left: 0 !important; right: 0 !important; bottom: var(--ampara-footer-h) !important; z-index: 25; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } .ampara-scroll-btn { position: fixed !important; bottom: calc(var(--ampara-footer-h) + var(--ampara-input-h) + 12px) !important; } } /* ================================================================ CORRECCIÓN 33/34 (nueva): en style.css base, .right-chat nace SIEMPRE en right:-290px (fuera de pantalla) y solo se muestra con la clase .active-sidebar, que ningún botón/JS de esta página agrega — por eso el panel de contactos desaparecía por completo en cualquier ancho >= 992px (laptop y PC), no solo en laptop. Se fuerza right:0 directo para dejarlo siempre visible desde los 992px (el espacio ya está reservado ahí porque .main-content trae la clase "right-chat-active" fija en el HTML). El padding-top también se corrige: style.css trae padding-top hardcodeado en 96px (calc(90px + 6px)), asumiendo un nav-header de esa altura exacta. El nav-header real de esta página mide distinto (buscador + íconos propios), así que ese número tapaba el título "CONTACTOS" y el primer contacto. Se reemplaza por la variable --ampara-header-h, que default-message.js YA calcula con el alto real del header en cualquier ancho de pantalla (línea ~184, $navHeader.offsetHeight) — no es una variable nueva, es la misma que ya usa el bloque mobile de acá arriba. */ @media (min-width: 992px) { /* CORRECCIÓN 35 (nueva, la causa real): style.css trae @media (max-width:1600px) que le saca el padding-right a .main-content, fuerza .middle-sidebar-left a width:100%, y vuelve .right-chat translúcido con blur (rgba(255,255,255,.3)). Ese bloque está pensado para pantallas "medianas" donde el sidebar es un drawer de cristal que se desliza ENCIMA del chat, no una columna fija — por eso el header de la conversación (z-index:5) se veía transparentándose sobre los contactos: es literal, el panel es 30% opaco ahí abajo. Toda laptop común (1366/1440/1536px) cae en ese rango <1600px. Se restaura acá el comportamiento de pantalla grande (columna sólida, con espacio reservado) desde los 992px para arriba. */ .main-content { padding-right: 290px !important; } .middle-sidebar-left { width: auto !important; } .right-chat { right: 0 !important; background-color: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding-top: calc(var(--ampara-header-h, 96px) + 6px) !important; } /* CORRECCIÓN 36 (nueva): style.css trae .middle-sidebar-left con max-width:960px + margin auto a partir de 1200px/1400px — pensado para centrar un FEED de posts en pantallas anchas. En la página de chat esto deja un hueco vacío enorme entre la conversación y el panel de contactos en cualquier pantalla más ancha que 960px + 280px (nav) + 290px (contactos). Se quita para que el chat aproveche todo el ancho real disponible en el medio. */ .middle-sidebar-left { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } } /* Botón "←" para volver de la conversación a la lista de contactos (ver CORRECCIÓN 24 en default-message.html). */ #ampara-btn-volver { border: none; background: none; font-size: 20px; line-height: 1; padding: 4px 12px 4px 0; margin-right: 4px; cursor: pointer; color: inherit; }