/* Conecta — celular (≤820px): 1 coluna. Lista sempre visível; conversa e painéis
   admin abrem em tela cheia (classes m-chat/m-admin no body, via scripts/mobile.js). */

.m-voltar, .m-fechar { display: none; }

@media (max-width: 820px) {
  /* Topo verde DESLIZA de lado (o médico, 27/07, opção B): os controles (atendente, IA, canal,
     engrenagem, Sair) não cabem numa linha no celular e ficavam cortados SEM alcance —
     flex encolhia/cortava e não havia rolagem. Agora arrasta o topo pra chegar no Sair.
     flex-shrink:0 é essencial: sem ele os selects se espremem em vez de transbordar. */
  .header { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
            padding: 0 10px; gap: 7px; }
  .header::-webkit-scrollbar { display: none; }
  .header > * { flex-shrink: 0; }
  .header-marca { flex: 0 0 auto; font-size: 16px; gap: 6px; }
  /* ⭐ Celular: A PALAVRA SOLONEXA FICA (o médico, 24/08/2026 — *"aqui no celular só aparece o nome
     Conecta; em todo lugar no nosso sistema precisa aparecer a marca mãe"*). Até 24/08 só o anel
     sobrevivia no telefone, e anel sozinho não é a marca lida: quem abria o Conecta pelo celular
     via só "Conecta". O Atlas já mostrava a trava inteira no telefone — esta é a MESMA trava, na
     mesma ordem (anel · SOLONEXA · risco · Conecta), pros dois aplicativos dizerem a mesma coisa.
     ⛔ ELA ENCOLHE EM PAR. A regra dos 22/08 continua valendo: a palavra é uma máscara cuja
        altura de caixa alta é `w × 75.40/628.61`, e a maiúscula da fonte do sistema mede
        `fs × 0.7286`. Igualando: **fs = w × 0.1646**. Aqui w=72px (cap 8,6px) pede b a 12px
        (cap 8,7px). Mexer num sem o outro desalinha SOLONEXA e Conecta — foi essa mesma conta
        que deu os 84px/14px do computador.
     ⛔ E ELA NÃO PODE EMPURRAR O "SAIR" PRA FORA. A barra ROLA de lado no celular
        (`.header{overflow-x:auto}` logo acima), então nada é CORTADO sem alcance — mas o que
        sai da primeira tela some pra quem não adivinha que dá pra arrastar. Medido em 390px:
        a trava inteira custa +79px e o botão de sair terminava em 401px, 11px além da borda.
        Por isso o `padding` da barra caiu de 16px pra 10px e o `gap` de 12px pra 7px: são 26px
        devolvidos, e a barra fecha em 388px de 390. ⚠️ Quem mexer nesses dois números tem de
        remedir o `scrollWidth` da `.header` num telefone de 390px. */
  .header-marca .nx-palavra { width: 72px; height: calc(72px * 75.40 / 628.61); }
  .header-marca .brand-risco { height: 22px; margin-left: 6px; }
  .header-marca b { font-size: 12px; margin-left: 6px; }
  .header-marca .nx-anel { width: 26px; height: 27px; }

  /* ⭐ O BOTÃO DE QUEM ESTÁ ATENDENDO TEM TETO NO CELULAR (o médico, 24/08/2026 — *"o botão do
     usuário tá muito grande"*). Um `<select>` se dimensiona pela OPÇÃO MAIS LONGA, não pela
     escolhida: com um primeiro nome curto ele mede 105px, e com um nome completo e título
     ("Dra." + dois sobrenomes) vai a 196px, empurrando tudo o que vem depois pra fora da
     primeira tela. ⚠️ Medido com nome de gente, não no vazio — é o caso real que quebra.
     ⛔ E o exemplo fica SEM NOME de propósito: esta folha vai crua pro navegador, e a guarda
        `test-nome-de-paciente-nao-vai-pro-navegador` reprova nome de pessoa em comentário
        aqui. Ela me pegou escrevendo um; está certa.
     Quem lê a barra precisa saber QUEM está atendendo, não o nome inteiro com título: o começo
     basta pra distinguir, e o nome cheio aparece inteiro assim que a lista abre — que num
     telefone é o único jeito de ler mesmo. ⚠️ Não adianta "põe no `title`": celular não tem
     hover, e `title` num aparelho de toque não é lido por ninguém.
     ⛔ O teto é só deste seletor. O da IA usa a MESMA classe e NÃO pode entrar aqui: "IA:
        Desligada" cortado em "IA: Deslig…" ainda parece uma frase inteira — e uma frase que
        não diz mais se a IA está ligada ou não. */
  #sac-operador { max-width: 118px; text-overflow: ellipsis; }

  /* Coluna única: lista ocupa tudo; divisória e painel Sofia (col-c) ficam p/ desktop. */
  .col-a { width: 100% !important; max-width: none; }
  /* ⭐ A LISTA NÃO CABIA (o médico, 16/10/2026 — "filtro, mas não tem espaço para ler msg").
     Com etiqueta escolhida, o cabeçalho da coluna (Nova conversa, busca, filtros, ordenar,
     tarja amarela, "Aguardando orientação") ficava PARADO e só a lista rolava — no iPhone
     sobrava uma tira de ~1 cartão. Agora a COLUNA INTEIRA rola junta: rolar a lista leva o
     cabeçalho embora e devolve a tela à conversa; só as abas ficam presas no alto.
     ⛔ Nada some nem muda de lugar — é só quem rola. O vigia do poll (app.js) escuta a
     rolagem da coluna também, senão o redesenho de 30 s voltava a travar a rolagem no iOS. */
  .col-a { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .col-a > * { flex-shrink: 0; }
  .col-a > .lista-contatos { flex: none; overflow: visible; }
  .col-a > .abas { position: sticky; top: 0; z-index: 3; background: var(--superficie); }
  .col-resizer, .col-c { display: none !important; }
  .abas { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .aba { flex: 0 0 auto; padding: 12px 10px; }

  /* Linha de filtro por atendente (Todas/Atend. 1/…) sai do celular (o médico, 25/07): ocupa altura
     e no telefone não é usada pra filtrar — a lista já entra em "Todas". Segue no desktop. */
  .linha-legenda { display: none !important; }

  /* NOME EM PRIMEIRO LUGAR (o médico, 31/07): no celular as etiquetas ("Principal",
     "Pós-procedimento", "Respondida no aparelho · 11:05") não cabem na mesma linha do nome e o
     empurravam pra fora — a lista virava um monte de cartões sem nome, só com as iniciais do
     avatar. Agora o nome ocupa a primeira linha inteira e as etiquetas descem pra segunda. */
  .nome-row { flex-wrap: wrap; }
  .nome-row .contato-nome { flex: 1 1 auto; min-width: 0; }
  .nome-chips { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 6px; min-width: 0; margin-top: 2px; }

  /* Conversa em tela cheia quando um contato é tocado. */
  .col-b { display: none !important; }
  body.m-chat .col-b {
    display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; top: 48px;
    height: calc(100vh - 48px); height: calc(100dvh - 48px); z-index: 40;
  }
  .m-voltar {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; font-size: 26px; line-height: 1; padding: 0 6px 2px 0;
    color: var(--cor-primaria); cursor: pointer; flex-shrink: 0;
  }
  .conversa-header { flex-wrap: wrap; gap: 8px; }
  /* Os botões do topo (tags/seguir/transferir/atlas/editar/CONCLUIR) não cabem numa
     linha só no celular — sem quebrar, o "Concluir" saía pra fora da tela e não dava
     pra tocar. Com flex-wrap ele desce pra 2ª fileira e fica clicável. */
  .sac-botoes { margin-left: 0; width: 100%; flex-wrap: wrap; }

  /* ⚠️ O TOPO COMIA A CONVERSA (o médico, 31/07, viajando e trabalhando pelo iPhone). Um paciente
     com 6 etiquetas de doença + 7 botões enchia a tela inteira: sobrava uma tira de mensagens e
     "não dava pra trabalhar". Decisão dele: no CELULAR as etiquetas de doença não aparecem (elas
     seguem no computador) e ficam à mão só CONCLUIR e TRANSFERIR — o resto abre no ⋯.
     Nada foi apagado: um toque no ⋯ traz Seguir, Atlas, Comprovante, tags e editar ("Faça por mim" saiu em 08/09/2026). */
  #conv-tags { display: none; }
  .sac-botoes > .sac-btn { display: none; }
  .sac-botoes > #sac-transferir,
  .sac-botoes > #sac-concluir,
  .sac-botoes > #sac-mais { display: inline-flex; align-items: center; gap: 5px; }
  .sac-botoes.aberto > .sac-btn { display: inline-flex; }
  .sac-botoes.aberto > #sac-mais { background: var(--fundo); }
  .msg { max-width: 85%; }
  /* respiro extra + barra inferior do iPhone */
  .campo-resposta { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

  /* Composer do celular (igual WhatsApp): a caixa de texto + o botão ENVIAR ficam juntos
     na 1ª linha (enviar sempre ao lado do texto, fácil de achar); as ferramentas
     (respostas/anexar/nota/ditar/áudio) descem pra 2ª linha. Sem isso, os 6 botões
     (flex-shrink:0) comiam a largura e sobrava ~5 caracteres pra caixa — o texto saía
     empilhado, uma palavra por linha (bug do iPhone).
     O ::after com flex-basis:100% é só uma "quebra de linha" forçada entre o Enviar e
     as ferramentas — não muda nada no desktop (regra só vale ≤820px). */
  .sac-campo { flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .sac-campo textarea { order: 1; flex: 1 1 auto; }
  .sac-enviar-btn { order: 2; }
  .sac-campo::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  #sac-rapidas, #sac-anexar, #sac-nota, #sac-ditar, #sac-audio, .sac-audio-cancel { order: 4; }

  /* Pré-escuta do áudio: o tocador ganha a LINHA INTEIRA no celular (11/08). Espremido entre o
     rótulo e o "Enviar áudio", ele sobrava com 69px de largura num iPhone de 375px (medido) —
     um toco cinza, sem barra de tempo. `min-width` não resolve: o navegador tem regra própria
     pra <audio controls> que ganha da nossa (ver paineis.css). O que segura é o flex-basis.
     44px de altura porque é o mínimo do controle nativo — em 36px ele sai cortado. */
  .sac-audio-previa audio { flex-basis: 100%; height: 44px; }

  /* Caixas de transferir/encaminhar: empilha seletores e mantém os botões na tela. */
  .sac-transferir-box { flex-wrap: wrap; }
  .sac-transferir-box select { flex: 1 1 100%; max-width: none; }
  .sac-transferir-box .sac-btn { flex: 1 1 40%; }

  /* Painéis admin em tela cheia (o app.js liga display:block só no painel ativo). */
  body:not(.m-admin) .painel-admin { display: none !important; }
  body.m-admin .painel-admin {
    position: fixed; left: 0; right: 0; bottom: 0; top: 48px;
    height: calc(100vh - 48px); height: calc(100dvh - 48px); z-index: 40;
    padding: 14px 14px 76px; overflow-y: auto;
  }
  body.m-admin .m-fechar {
    display: block; position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
    z-index: 50; border: none; border-radius: 999px; padding: 10px 22px; font-size: 14px;
    font-weight: 600; background: var(--cor-primaria); color: var(--superficie); cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
  }

  /* Ajustes de densidade nos painéis. */
  .admin-cards { gap: 8px; }
  .admin-card { min-width: calc(50% - 4px); padding: 12px 14px; }
  .crm-col { min-width: 80vw; }
  .header-status { display: none; }
}

/* ── TELEFONE ESTREITO (iPhone SE/mini, 375px) ────────────────────────────────
   Os 72px da trava fecham a barra em 388px: cabe num iPhone de 390px e NÃO cabe num de 375px,
   onde o botão de sair volta a passar da borda (388 > 375). Um degrau a menos resolve — e ele
   desce EM PAR, pela mesma conta: w=60px (cap 7,2px) pede b a 10px (cap 7,3px).
   ⛔ Não trocar por `display:none` de novo: o pedido de 24/08 é que a marca mãe apareça no
      telefone, e telefone estreito continua sendo telefone. */
@media (max-width: 389px) {
  .header-marca .nx-palavra { width: 60px; height: calc(60px * 75.40 / 628.61); }
  .header-marca .brand-risco { height: 19px; }
  .header-marca b { font-size: 10px; }
}

/* ✦ Sofia dentro da conversa no celular (10/10): bloco mais baixo (a tela é pequena) e com
   gesto de rolagem próprio; as mensagens continuam com espaço para rolar em cima. */
@media (max-width: 820px) {
  .sofia-inline { padding: 8px 10px; }
  .sofia-inline-acoes button { padding: 6px 10px; font-size: 12px; }
  .sofia-inline-nota { display: none; }
}