/* =====================================================================
   responsive.css
   ---------------------------------------------------------------------
   Ajuste mobile-first do layout tipo "WhatsApp Web" para telas pequenas.
   Carregado DEPOIS dos CSS atuais para sobrescrever apenas o necessário
   via media query, sem tocar em style.css / chat.css / mobile.css.

   Regra de layout:
   - >= 992px  -> layout dividido (lista + conversa lado a lado) INTACTO.
   - <= 991px  -> uma tela por vez (lista OU conversa), estilo app nativo.

   O toggle "lista vs conversa" é feito pela classe `body.chat-open`,
   controlada em responsive.js.
   ===================================================================== */

@media (max-width: 991px) {

    /* -----------------------------------------------------------------
       Neutraliza o overlay antigo do mobile.css para que apenas UMA
       lógica (esta) controle a exibição da conversa.
       ----------------------------------------------------------------- */
    #chatArea {
        position: relative !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        inset: auto !important;
        z-index: auto !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* -----------------------------------------------------------------
       LISTA (padrão): ocupa a tela toda.
       O wrapper da coluna esquerda é o único <div> que tem #sidebar
       como filho direto — selecionado via :has() para não mexer no HTML.
       ----------------------------------------------------------------- */
    div:has(> #sidebar) {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* lista de contatos preenche o espaço ao lado da trilha de navegação */
    #sidebar.contact-sidebar {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* conversa começa escondida (só a lista aparece) */
    #chatArea {
        display: none !important;
    }

    /* -----------------------------------------------------------------
       CONVERSA aberta (body.chat-open): esconde a lista, mostra o chat.
       ----------------------------------------------------------------- */
    body.chat-open div:has(> #sidebar) {
        display: none !important;
    }

    body.chat-open #chatArea {
        display: flex !important;
    }

    /* -----------------------------------------------------------------
       Botão de voltar: no HTML ele tem `md:hidden` (some >= 768px).
       Como aqui o modo "uma tela" vai até 991px, forçamos ele visível.
       ----------------------------------------------------------------- */
    #backBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}