/* 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 (André 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; } .header::-webkit-scrollbar { display: none; } .header > * { flex-shrink: 0; } .header-marca { flex: 0 0 auto; font-size: 16px; gap: 6px; } /* ⭐ Celular: O ANEL FICA (André, 22/08 — *"no celular ... não tem nada do nosso logo da marca mãe"*). A 1ª versão escondia a trava INTEIRA aqui, e o resultado foi o telefone dele abrir o Conecta sem nenhum sinal da SOLONEXA — que é justamente o defeito que esta mudança veio curar, nascendo de novo na tela onde ele mais trabalha. O anel é a marca; a PALAVRA é que não cabe. Some só a palavra e o risco: 84px + 2 folgas numa barra de 48px que ainda tem de caber o operador e os botões. */ .header-marca .nx-palavra, .header-marca .brand-risco { display: none; } .header-marca .nx-anel { width: 26px; height: 27px; } /* Coluna única: lista ocupa tudo; divisória e painel Sofia (col-c) ficam p/ desktop. */ .col-a { width: 100% !important; max-width: none; } .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 (André 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 (André 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 (André 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, Faça por mim, Comprovante, tags e editar. */ #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