/* ════════════════════════════════════════════════════════════════════════════ 40-conversas.css — a aba Conversas (caixa de entrada do WhatsApp) no celular ════════════════════════════════════════════════════════════════════════════ COBRE, e só: a superfície de #view-chats — .chat-wrap (altura derivada dos tokens), .chat-pane-list, .chat-pane-thread, .chat-list-head, .chat-list, .chat-item* (+ .chat-item .av, .chat-unread-pill), .chat-thread, .chat-head (+ .chat-head-info/-name/-sub, .chat-head .av, .chat-head .chat-star), .chat-back, .chat-window-chip, .chat-msgs, .chat-day, .msg/.bubble/.m-meta, .wa-media-img/-video/-audio, .chat-banner e .banner-act (+ .banner-act .banner-btn), .chat-composer e o textarea dentro dele, .chat-snip-btn, .chat-send, .chat-snips (+ .chat-snips .snip-item), e o único `and (orientation:landscape)` de toda a camada mobile. NÃO COBRE (e esta folha não declara em lugar nenhum): · `main` e `body` — peça 10-casca.css é a dona. O gutter lateral zero e o padding-bottom da barra inferior vêm DELA (ver PRÉ-REQUISITO abaixo). Furos [4] e [14]: era exatamente a colisão de `main` entre 10 e 40 que colocava o botão de enviar debaixo da barra de navegação. · `nav.tabs`, `header.top`, `.tab-badge`, `#chatBadge` — peça 10. · `.drawer`/`.dhead`/`.dbody` (a ficha do lead que o nome da conversa abre via openDrawer, app.js:2314) — peça 20-folha.css. · tabelas, `td[data-lab]`, `.tablewrap` — peça 30-cartao.css. · qualquer `#view-*` que não seja Conversas — peça 50. · `font-size` do `#chatInput` e do `#chatSearch`: o piso de 16px do iOS é declarado pela peça 00-base.css (bloco `.chat-composer textarea, .chat-list-head input{font-size:16px;min-height:var(--m-tap);padding:11px 12px}`). Aqui não se repete font-size nem padding desses dois campos — só order, flex-basis e geometria de caixa, pra não haver duas cópias da mesma regra. TUDO dentro de @media (max-width:780px). Nenhuma exceção fora de media query. ════════════════════════════════════════════════════════════════════════════ */ /* ⚠️ A CONDICAO DA CAMADA MOBILE, identica nos 6 arquivos: largura ate 780px OU (altura ate 520px E ponteiro grosso) O segundo ramo existe porque celular DEITADO nao cabe no primeiro: um iPhone 12/13/14 em paisagem mede 844px de largura (Pro Max, 926) e caia FORA da camada — recebia o layout de desktop numa tela de 375px de altura, com estouro horizontal de 45px (medido). `max-height:520px` pega paisagem de celular (375-428px de altura) e nao pega iPad deitado (768). `pointer:coarse` garante que nenhuma janela de desktop encolhida na vertical entre aqui. */ @media (max-width:780px), (max-height:520px) and (pointer:coarse){ /* ═══════════════════════════════════════════════════════════════════════════ 1 ── A CAIXA: altura real, sem número mágico e sem vh ═══════════════════════════════════════════════════════════════════════════ */ /* DESFAZ styles.css:359 (height:calc(100vh - 148px); min-height:420px) e styles.css:451 (height:calc(100vh - 128px)). Duas coisas erradas no original, medidas: (a) `100vh` no iPhone é o large viewport (barras do navegador retraídas), então com a barra do Safari à mostra o compositor cai ~60-70px abaixo do visível — e como .chat-wrap é overflow:hidden, a caixa PARECE completa e ninguém percebe que o ➤ está debaixo da barra; (b) `min-height:420px` não é sobrescrito pelo bloco mobile, então em paisagem (altura visível 320-430px) o piso de 420 vence o calc e a caixa fica MAIOR que a tela, com o compositor fora por baixo. A fórmula é a do furo [4]/[14], escrita uma vez só pra não existirem dois números na camada: 100dvh − cabeçalho − 12px do topo do main − barra inferior − safe-area − teclado PRÉ-REQUISITO LOAD-BEARING (peça 10): `body:has(#view-chats.active) main{ padding-inline:0;padding-top:12px}`, que mantém o padding-bottom de calc(var(--m-nav-h) + var(--m-safe-b) + 16px) do `main`. É esse padding-bottom que garante que a caixa TERMINA acima da barra inferior — a barra é position:fixed, opaca e z-index:70, e intercepta o toque. Se a peça 10 não entregar a regra, a degradação é benigna: sobram os 28px de gutter e 2px de diferença no topo (14 em vez de 12), e o compositor continua acima da barra. A 1ª declaração de height é o FALLBACK para navegador sem dvh (ele descarta só a 2ª linha e fica com o mesmo 128 que styles.css:451 já usava); a 2ª é a verdade. `min-height:0` mata o piso de 420px. Com o teclado aberto: --kb é publicado por mobile.js a partir de window.visualViewport (nem vh nem dvh mudam quando o teclado sobe, porque o padrão do navegador é interactive-widget=resizes-visual). A caixa encolhe --kb, então o compositor sobe junto e fica VISÍVEL — e, como a barra inferior fica atrás do teclado (ela é fixed no rodapé do layout viewport), o compositor nunca tem a barra por cima: sobra a folga de nav+safe+16px entre o pé da caixa e o pé do layout. */ .chat-wrap{ min-height:0; height:calc(100vh - 145px); /* os 30px: 1 de border-bottom do header + 12 de padding-top do main + 16 de folga do padding-bottom do main (acima da barra) + 1 de border-top da barra. Sem eles a caixa ficava 17px mais alta que o espaço e a PÁGINA ganhava rolagem vertical morta atrás de uma caixa que já rola por dentro. */ /* `max()` e nao soma: com o teclado ABERTO a barra inferior fica ATRAS dele (ela e position:fixed contra o layout viewport, que nao encolhe), entao reservar os dois ao mesmo tempo comeria ~90px de conversa a toa justamente quando a tela ja esta pela metade. Reserva-se o MAIOR dos dois. */ height:calc(100dvh - var(--m-header-h) - max(calc(var(--m-nav-h) + var(--m-safe-b)), var(--kb,0px)) - 30px); /* a caixa passa a ser a tela: sem moldura lateral nem cantos, porque a peça 10 devolveu os 28px de gutter que o main gastava (defeito medido: .chat-wrap ficava com 347px de 375, 7,5% da largura virando enfeite) */ border-radius:0; border-left-width:0; border-right-width:0; } /* Meia tela morta abaixo da lista: com 6 conversas reais (curl /api/conversations) a lista mede ~428px dentro de uma caixa de 684px — 256px de branco com borda e sombra, parecendo tela quebrada — e a página TAMBÉM rolava (100vh), dando duas rolagens aninhadas no mesmo dedo. FECHADA, a caixa encolhe até o conteúdo e a única rolagem é a da página. ABERTA (.thread-open) a altura fixa acima continua valendo, que é o que a thread precisa pra ter o compositor colado no pé. Especificidade (0,2,0) contra (0,1,0) da regra acima — não precisa de !important, e media query não somaria especificidade nenhuma. */ .chat-wrap:not(.thread-open){height:auto} .chat-wrap:not(.thread-open) .chat-list{overflow:visible} /* em 1 coluna (styles.css:451 já faz grid-template-columns:1fr) a borda direita do painel da lista vira um risco vertical solto na tela */ .chat-pane-list{border-right:0} /* FURO [5] — FUNDO PRÓPRIO da folha do thread. O botão de voltar do celular é JS (mobile.js observa `.thread-open` em #chatWrap e empilha history; app.js:2277 closeThreadPane é reusada) e não é desta peça. O que o CSS garante é que a folha do thread é OPACA: ela ocupa a MESMA célula do grid que a lista, e hoje só não vaza porque styles.css:453 põe a lista em display:none. A garantia não pode depender disso — .chat-pane-thread já herda background:var(--bg) de styles.css:379 e aqui isso é reafirmado com contexto de empilhamento próprio, pra que nenhuma transição futura mostre a lista atrás da conversa. */ .chat-wrap.thread-open .chat-pane-thread{ background:var(--bg); position:relative; z-index:1; } /* ═══════════════════════════════════════════════════════════════════════════ 2 ── LISTA DE CONVERSAS: a prévia que cortava sem reticências ═══════════════════════════════════════════════════════════════════════════ */ /* O conserto de raiz, uma linha, a MESMA que styles.css:390/393 já aplicaram em .chat-head-name/.chat-head-sub com o comentário certo em styles.css:388 ("display:block é essencial: ellipsis/overflow:hidden não recortam inline") — e que faltou aqui. .chat-item-preview é um filho de .chat-item-mid (app.js:2244), e .chat-item-mid é um BLOQUIFICADO por ser item de flex mas que não é contêiner de flex: o filho inline não é recortado, então o texto vazava ("...trabalho em pronto socc", EVIDENCIA §6) e, pior, como .chat-list é overflow-y:auto (styles.css:364) o eixo x computa para auto (CSS Overflow 3) e a lista de conversas passava a rolar de lado. .chat-item-name já é item de flex de .chat-item-top (display:flex, styles.css:370), logo já está bloquificado — a regra aqui é cinto e suspensório: se o dia em que .chat-item-top deixar de ser flex, a reticência continua funcionando. */ .chat-item-name, .chat-item-preview{display:block} /* guarda do eixo x da lista, junto com o conserto acima. `hidden` e não `clip` de propósito: com overflow-y:auto na mesma caixa, um valor `clip` computaria para hidden de qualquer forma, e `hidden` é o que todo navegador do parque entende. (A proibição de overflow-x:hidden vale pra html/body, onde propaga pro viewport e mata position:sticky — aqui é uma caixa interna.) */ .chat-list{ overflow-x:hidden; overscroll-behavior:contain; } /* alvo de toque e texto legível na fila de atendimento */ .chat-item{ min-height:var(--m-tap); gap:10px; padding:11px 12px; } .chat-item-top{gap:8px} .chat-item-name{font-size:14px} .chat-item-preview{font-size:13px} .chat-item-time{font-size:11.5px} /* hover colado no toque: a conversa tocada ficava com cara de selecionada depois de voltar da thread (styles.css:366 .chat-item:hover) */ @media (hover:none){ .chat-item:hover{background:transparent} .chat-item.on:hover{background:var(--accent-soft)} } /* a busca de conversas: só a caixa em volta. font-size/min-height/padding do input são da peça 00 (bloco do piso de 16px do iOS). */ .chat-list-head{padding:8px 10px} /* ═══════════════════════════════════════════════════════════════════════════ 3 ── CABEÇALHO DA CONVERSA: o ‹ de 20px e a linha que o chip roubava ═══════════════════════════════════════════════════════════════════════════ */ .chat-head{ gap:8px; padding:8px 10px; } .chat-head .av{flex:0 0 34px} /* DESFAZ styles.css:397 (padding:4px 6px, font-size:20px) e styles.css:455 (.chat-back{display:block}) — mesma especificidade (0,1,0), vence por vir depois. O conteúdo é o glifo "‹" (app.js:2305): ~7px de largura a 20px de fonte + 12 de padding = alvo medido de ~20×32px, e é o ÚNICO caminho de volta pra lista (closeThreadPane só é chamada de $("#chatBack").onclick, app.js:2313; com .thread-open a lista é display:none). 44×44 é o mínimo do iOS HIG. O margin-left negativo devolve o recuo ótico sem estreitar o alvo. */ .chat-back{ display:grid; place-items:center; min-width:var(--m-tap); min-height:var(--m-tap); padding:0; margin-left:-4px; font-size:26px; line-height:1; border-radius:var(--m-r-sm); } .chat-back:active{background:var(--surface-2)} /* a estrela "Interessado" (styles.css:462) é 34×34 e fica entre o nome e o chip — ela marca o lead como público ⭐ da Campanha, então errar o toque tem consequência */ .chat-head .chat-star{ width:var(--m-tap); height:var(--m-tap); flex:0 0 var(--m-tap); } /* ── o chip da janela de 24h ────────────────────────────────────────────── styles.css:458 manda o chip pra uma faixa de largura cheia (order:5;flex-basis:100%;text-align:center;margin-top:4px). Com o cabeçalho em ~78px dentro de uma conversa de ~500px, essa linha custa 6% da thread. Mas ela NÃO é sempre redundante, e essa é a correção que o dossiê não fez: · JANELA FECHADA (.closed) e número bloqueado: o .chat-banner colado ao compositor repete a informação COM a instrução (app.js:2385 e 2366) — ali o chip é puro desperdício, então vira um selo de ~26px na linha do nome. · JANELA ABERTA (.open): renderThread esconde o banner (`banner.classList.toggle("hide", windowOpen && !bloqueado)`, app.js:2364) e o chip passa a ser o ÚNICO lugar que diz até que hora o lead pode receber texto livre. Esse prazo NÃO é descartável — o chip fica na faixa própria, só mais fino. Especificidade (0,2,0) contra (0,1,0) de styles.css:394/458. */ .chat-window-chip.closed{ order:0; /* volta pra linha do nome, depois da estrela */ flex:0 0 auto; margin:0 0 0 2px; padding:5px 7px; text-align:left; /* o texto ("🔒 janela 24h fechada") continua no DOM e no nome acessível do nó; só não é PINTADO — o ::before desenha o cadeado no lugar dele */ font-size:0; line-height:1; } .chat-window-chip.closed::before{ content:"🔒"; font-size:13px; line-height:1; } .chat-window-chip.open{ margin-top:2px; padding:3px 8px; font-size:11px; line-height:1.35; } /* ═══════════════════════════════════════════════════════════════════════════ 4 ── A THREAD: mídia dentro da bolha, horário na linha do texto ═══════════════════════════════════════════════════════════════════════════ */ .chat-msgs{ padding:10px 10px; /* era 16px 18px (styles.css:399): +16px de bolha */ overflow-x:hidden; /* mesmo efeito de overflow-y:auto do .chat-list */ overscroll-behavior:contain; /* Puxar a thread pra baixo no topo encadeava pro scroller da página e caía no pull-to-refresh do Chrome/Android — que recarrega o CRM e leva o texto já digitado (não existe rascunho persistido: localStorage guarda só o tema, app.js:87/298) e marca a sugestão do ✨ como descartada (pagehide, app.js:3694). `contain` corta o encadeamento sem desligar o pull-to-refresh nas outras abas. */ } /* DESFAZ styles.css:468/469: nenhum dos dois tem max-width:100% (só o áudio, em styles.css:470). Medido em 375px: conteúdo útil da bolha = 245,7px; a imagem de 260px estoura 14px e o vídeo de 280px estoura 34px, e como .chat-msgs é overflow-y:auto o eixo x vira auto e a conversa rola de lado. Os max-height de 300/320px FICAM: sem eles a foto vertical do score toma a tela inteira e enterra a mensagem seguinte. */ .wa-media-img, .wa-media-video{ max-width:100%; height:auto; } .wa-media-audio{width:100%} /* DESFAZ styles.css:413 (.msg .m-meta{display:flex}). `display:flex` é block-level: o horário + ticks (app.js:2337) sempre desciam pra uma linha nova DENTRO da bolha, ao contrário do WhatsApp, que os encaixa no fim da última linha. São ~17px por mensagem — numa thread de 40, ~680px de rolagem a mais, e uma bolha de duas palavras ficava com 3 linhas. O float reserva a largura no fim do último parágrafo (funciona sob white-space:pre-wrap, styles.css:405) e o translateY encosta a meta na base da bolha; o padding-bottom de 9px é o que segura o deslocamento dentro da caixa — sem ele o horário encosta na borda. */ /* ⚠️ `display:flow-root` é LOAD-BEARING, não estilo: cria o BFC que CONTÉM o `float:right` da meta. `.msg .bubble` (styles.css:410) não tem overflow nem contain, e em mensagem só de mídia — `m.body` vazio, app.js:2337 — a mídia é `display:block` (styles.css:467-469) e a meta flutuada fica ABAIXO dela, sem contribuir para a altura da bolha: o horário e os ticks eram pintados FORA da bolha, por cima da mensagem seguinte. Áudio é justamente o formato em que o lead manda mais contexto. */ .msg .bubble{display:flow-root;padding:7px 10px 9px} .msg .m-meta{ display:inline-flex; float:right; margin:0 0 0 10px; transform:translateY(4px); } /* ═══════════════════════════════════════════════════════════════════════════ 5 ── O BANNER DO ENVIO ASSISTIDO: um terço da conversa ═══════════════════════════════════════════════════════════════════════════ */ /* `remetente.podeEnviar:false` é o estado REAL deste servidor, então chatBloqueado() (app.js:2171) é verdadeiro e o banner longo de app.js:2366-2373 fica SEMPRE visível: ~185 caracteres a 12,5px numa faixa de 313px ≈ 4 linhas ≈ 95px; com a confirmação pendente entram os 3 .banner-btn, que somam ~420px contra 313 e embrulham em 2-3 fileiras de ~30px, levando o banner a ~160-185px. É justamente a tela em que se copia a resposta, vai pro WhatsApp e volta pra confirmar "✓ Enviei". O teto em dvh (com fallback em vh na linha anterior, que navegador velho mantém) garante que o banner nunca passe de um terço da tela; o resto rola dentro dele, com o encadeamento contido pra não arrastar a thread. */ .chat-banner{ padding:8px 12px; font-size:12px; line-height:1.45; max-height:34vh; max-height:34dvh; overflow:auto; overscroll-behavior:contain; } .banner-act{gap:6px;margin-top:8px} /* um botão por linha, alvo de 44px: "↗ Abrir no WhatsApp", "✓ Enviei — registrar no CRM" e "Ainda não" (app.js:2370-2373) deixam de embrulhar em fileiras de 30px. .banner-btn é do banner e de nenhum outro lugar do app (grep: styles.css:446 e app.js:2370-2373), mas fica escopado em .banner-act pra não haver dúvida de propriedade. */ .banner-act .banner-btn{ flex:1 1 100%; min-height:var(--m-tap); display:flex; align-items:center; justify-content:center; text-align:center; padding:5px 14px; font-size:13px; } /* ═══════════════════════════════════════════════════════════════════════════ 6 ── O COMPOSITOR: a linha que decide se dá pra responder o lead ═══════════════════════════════════════════════════════════════════════════ */ /* Medição do original em 375px: .chat-wrap 347 → .chat-composer com padding 10px 12px (styles.css:422) deixa 321 úteis; ⚡ 38 + ✨ 38 (styles.css:423) + ➤ 42 (styles.css:437) = 118, mais 3 gaps de 8 = 24 → sobram 179px para o textarea e 151px de texto: ~24 caracteres por linha, com o placeholder cortado em "Escreva uma respos". Com flex-wrap + flex-basis:100% o campo passa a ocupar a linha inteira (~355px, ~40 caracteres) e os três botões descem pra uma 2ª fileira, onde cabem 44/48px de alvo. TETO REAL DO CAMPO — o que esta peça NÃO entrega (furo [10]): a altura do textarea é escrita em `style.height` por JS com Math.min(120, scrollHeight) em TRÊS lugares — app.js:2555 (digitação), app.js:2604 (resposta pronta do ⚡) e app.js:3668 (sugestão do ✨) — e estilo inline vence qualquer max-height de folha externa. Logo: o campo continua parando em 120px (~5 linhas). O que esta peça entrega é MAIS CARACTERE POR LINHA (de ~24 para ~40), não mais linha. A sugestão do ✨, de 4-6 linhas, passa a caber em ~3-4 e o resto continua rolando dentro do campo. Subir o teto exige tocar em app.js (fora deste pacote) — está registrado no relatório. */ .chat-composer{ flex-wrap:wrap; gap:6px; padding:8px 10px; } /* order/flex só: font-size (16px, o limiar exato do auto-zoom do iOS) e padding do #chatInput são da peça 00 */ .chat-composer textarea{ order:1; flex:1 1 100%; } /* ⚡ (index.html:230) e ✨ (index.html:231) — os dois são .chat-snip-btn */ .chat-snip-btn{ order:2; flex:0 0 var(--m-tap); width:var(--m-tap); height:var(--m-tap); font-size:18px; } /* enviar é ação com consequência (a API do WhatsApp não desfaz envio, e no estado assistido este botão copia o texto e abre a conversa no WhatsApp): alvo grande, no canto onde o polegar direito cai */ .chat-send{ order:3; flex:0 0 var(--m-tap-lg); width:var(--m-tap-lg); height:var(--m-tap-lg); margin-left:auto; } /* a folha de respostas prontas abre PRA CIMA a partir do compositor (bottom:calc(100% + 6px), styles.css:426) e vive dentro do .chat-wrap, que é overflow:hidden — então ela nunca chega perto da barra inferior. O que muda: teto em dvh (48vh do original não conhece o teclado nem a caixa encolhida), encadeamento contido e item com alvo de 44px. */ .chat-snips{ left:8px; right:8px; max-height:min(300px,42vh); max-height:min(300px,42dvh); overscroll-behavior:contain; } .chat-snips .snip-item{ min-height:var(--m-tap); padding:11px 14px; } } /* ═══════════════════════════════════════════════════════════════════════════ 7 ── PAISAGEM — o único segundo breakpoint autorizado em toda a camada (CONTRATO, seção BREAKPOINT: "Uma exceção declarada, e só uma: @media (max-width:780px) and (orientation:landscape) na peça de Conversas, para devolver a altura que o .chat-head embrulhado rouba em paisagem.") ═══════════════════════════════════════════════════════════════════════════ */ @media (orientation:landscape) and (max-height:520px) and (pointer:coarse){ /* Em paisagem a altura visível de um iPhone fica entre 320 e 430px, e o teclado toma mais da metade. A altura da seção 1 já é derivada dos tokens (o piso de 420px foi morto lá), mas cada pixel de moldura fixa vale uma bolha: o cabeçalho embrulhado somava ~78px. `flex-wrap:nowrap` impede a segunda linha do cabeçalho e o chip sai — em paisagem se está digitando, e a informação da janela de 24h continua no banner quando ela está fechada (app.js:2385), que é o caso em que ela muda o que fazer. */ .chat-head{ flex-wrap:nowrap; padding:6px 10px; } .chat-window-chip{display:none} .chat-head .av{ width:28px; height:28px; flex:0 0 28px; } .chat-msgs{padding:8px 10px} .chat-banner{ max-height:38vh; max-height:38dvh; } .chat-composer{padding:6px 10px} }