/* MARINHOPORAI — Mobile WhatsApp Fix V4
   Cobre celular vertical (390px) E horizontal (844px) — limite até 1024px
   No celular: mostra UMA coluna por vez. */

@media (max-width: 1024px) {
  /* Container principal vira coluna única */
  #wa-chat-wrap {
    flex-direction: column !important;
    width: 100% !important;
    display: flex !important;
  }

  /* Lista ocupa tela toda */
  #wa-conversas,
  #wae-tag-filter-bar,
  #wae-chat-tabs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
  }

  /* QUANDO conversa ativa, esconde a lista */
  body.wa-mob-active #wa-conversas,
  body.wa-mob-active #wae-chat-tabs,
  body.wa-mob-active #wae-tag-filter-bar {
    display: none !important;
  }

  /* QUANDO conversa ativa, chat ocupa tela toda */
  body.wa-mob-active #wa-chat-header,
  body.wa-mob-active #wa-msgs,
  body.wa-mob-active #wa-chat-actions,
  body.wa-mob-active #wae-status-bar,
  body.wa-mob-active #wae-chat-state-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Espaço pro botão voltar */
  body.wa-mob-active #wa-chat-header {
    padding-left: 110px !important;
  }

  /* Botões de ação em flex-wrap pra caberem */
  body.wa-mob-active #wa-chat-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body.wa-mob-active #wa-chat-actions button {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* Mensagens com altura adequada */
  body.wa-mob-active #wa-msgs {
    min-height: 50vh !important;
    max-height: calc(100vh - 280px) !important;
    overflow-y: auto !important;
  }
}

/* Atualiza também o detector pra valer até 1024px */