/* ============================================================================
   20-folha.css — A FOLHA (tudo dentro do #drawer)
   ============================================================================

   O QUE ESTA PECA COBRE
   O `<aside class="drawer" id="drawer">` (index.html:258) e o hospedeiro UNICO de
   todas as folhas do app. Abri as funcoes que escrevem nele antes de escrever uma
   linha — sao OITO, nao seis (o contrato lista seis; encontrei duas a mais, e as
   regras abaixo foram conferidas contra as oito):
     1. ficha do lead ............. renderDrawer        app.js:1346  (.contact-row, .meta-grid x6, .tag, .pr-*, .ob, .nf-lead-form)
     2. gerenciar time ............ openTeam            app.js:1613  (.fieldset + .chip; .tm-google no vendedor ← 28/09/2026)
     3. passo do disparo assistido  renderAssistedStep  app.js:1894  (.cbtn solto + .contact-row NAO-primeiro-filho)
     4. novo lead ................. openNewLead         app.js:1950  (.meta-grid x3 + focus() por codigo em 1975)
     5. previa da importacao ...... showImportPreview   app.js:2115  (.imp-prev > table)   ← nao listada no contrato
     6. meu perfil ................ openProfile         app.js:2817  (.fieldset centrado)  ← nao listada no contrato
     7. dia da Agenda ............. openDay             app.js:2906  (.ag-slot*, .tag-input-row)
     8. detalhe da campanha ....... renderCampanha      app.js:3517  (.mkpis, .prev-mail, tabela SEM data-lab)
     9. transcricao da call ....... openTranscricao     app.js (secao MEET)  (.tr-*, busca em .field input)   ← 28/09/2026
    10. calls sem ficha (admin) ... openSemFicha        app.js (secao MEET)  (.ag-slot*, .sf-*)              ← 28/09/2026
   A ficha (1) ganhou o bloco do Google Meet (#dMeet) e as gravacoes (#dGravacoes) — regras na secao 10.
   Mais dois estados de carregamento que tem `.dbody` e NAO tem `.dhead`
   (app.js:1264 e 3509) — nenhuma regra daqui depende de `.dhead` existir.

   O QUE ESTA PECA **NAO** COBRE
   - `nav.tabs`, `header.top`, `main`, `thead th`, `.khead` ............ peca 10-casca
   - qualquer `table`/`tbody`/`tr`/`td`/`.tablewrap` — inclusive a tabela de
     destinatarios dentro desta folha (app.js:3568) e a `.imp-prev` ..... peca 30-cartao
   - `.chat-*` (a conversa nao passa pelo #drawer: openChat poe `.thread-open`
     em #chatWrap) ...................................................... peca 40-conversas
   - `.nf-form` da aba Vendas, `.ct-form`, `.filters`, `#view-email`,
     `#view-campaign`, `#view-nfse` ..................................... peca 50-paineis
   - o `font-size`/`min-height` base de `.field input|select|textarea`, de
     `.chip-btn`, `.data-save`, `.lead-delete`, `.toggle` e do
     `.dinheiro-eco` .................................................... peca 00-base
   Consumo os tokens `--m-*` da peca 00 e o `--kb` publicado por
   mobile.js:188 (que declara, no proprio arquivo, ser consumido por 20-folha.css).

   TUDO dentro de `@media (max-width:780px)`. Zero excecao nominal, zero
   `!important`, zero `overflow-x:hidden`.
   ========================================================================== */

/* ⚠️ 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 FOLHA: de painel lateral de 460px a folha de tela cheia
     ══════════════════════════════════════════════════════════════════════════ */

  /* DESFAZ styles.css:208 (.drawer{top:0;right:0;height:100%;width:460px;
     max-width:94vw;border-left:1px solid;transform:translateX(100%)}).
     Por que ancorar pela ESQUERDA e nao so alargar: o `right:0` resolveu contra a
     largura do DOCUMENTO (461px, medido em EVIDENCIA §2), nao contra os 375
     visiveis — a ficha nasceu em x=109 com width=353, ou seja 87px dela fora da
     tela, levando o X de fechar, o botao E-mail e a coluna direita de todo par de
     campos. `left:0` vale nas DUAS interpretacoes de bloco contentor; `right:0`
     nao. Junto disso, trocar translateX por translateY tira a folha FECHADA da
     faixa horizontal (fechada ela ia de x=462 a x=815).
     NAO escrevo `inset-inline:0` como o contrato sugere: ele reexpandiria para
     `right:0` depois do `right:auto` e deixaria a caixa sobre-restrita (left +
     width + right). `left:0;right:auto` e deterministico. */
  .drawer{
    left:0;
    right:auto;
    top:auto;

    width:100%;
    max-width:100%;

    /* FURO [21] — consumo obrigatorio de `--kb`. Nem vh nem dvh encolhem quando
       o teclado virtual sobe (o padrao do navegador e
       interactive-widget=resizes-visual), e a folha e `position:fixed`: ancorada
       em `bottom:0` ela termina no pe do viewport de LAYOUT, isto e, debaixo do
       teclado. Quem paga: o Prontuario da ficha (app.js:1449-1467, tarefa que E
       digitar), o "Novo lead" (focus() por codigo em app.js:1975) e a propria
       barra de acoes sticky da secao 4.
       Os DOIS eixos tem que consumir o token: `height` sozinho encolheria a folha
       pelo TOPO e deixaria o pe dela exatamente onde estava — atras do teclado.
       Com `--kb` valendo 0 (desktop, Android sem teclado, navegador sem
       visualViewport) as duas declaracoes sao identicas ao contrato:
       `bottom:0` + `height:100dvh`. */
    bottom:var(--kb,0px);
    height:calc(100dvh - var(--kb,0px));
    max-height:calc(100dvh - var(--kb,0px));

    border-left:0;
    transform:translateY(100%);
  }
  /* REDUNDANTE, e de proposito: `.drawer.open` (styles.css:209) tem
     especificidade 0,2,0 e ja vence o `translateY(100%)` de 0,1,0 da regra acima,
     entao a folha abriria certo mesmo sem esta linha. Declaro de novo para que o
     estado ABERTO nao dependa de aritmetica de especificidade — e porque
     `transform:none` e o que a transicao de styles.css:208 anima, agora no eixo Y.
     Nao e load-bearing: apagar esta linha nao quebra nada hoje. */
  .drawer.open{transform:none}

  /* `.scrim` (styles.css:206) fica como esta, de proposito: com a folha opaca de
     tela cheia por cima (z-index 90 contra 80) ele nao aparece mais e tambem nao
     atrapalha — `inset:0` nao gera estouro. Registro aqui que a peca 20 e a dona
     do seletor e decidiu nao declarar nada nele. */

  /* ══════════════════════════════════════════════════════════════════════════
     2 · CABECALHO DA FOLHA: puxador + X que volta pra tela
     ══════════════════════════════════════════════════════════════════════════ */

  /* `.dhead` e irmao do `.dbody` DENTRO do `.drawer` (que e flex column,
     styles.css:208) — ou seja, ele nao esta no contentor de rolagem e ja fica
     permanentemente no topo. Por isso `position:relative` e nao `sticky`:
     sticky aqui seria inerte e mentiria sobre o que a regra faz. O que a regra
     realmente precisa entregar e bloco contentor para o `::before` do puxador.
     DESFAZ o padding:20px de styles.css:210 (sobrava pouco para o titulo com o X
     em 44px). */
  .dhead{
    position:relative;
    padding:16px 14px 12px;
    gap:12px;
  }
  /* O puxador. E so CSS e so sinaliza que a coisa e uma folha que sobe — o
     arrastar-pra-baixo-fecha e JS e esta em fora_de_escopo do contrato. As duas
     saidas reais no celular sao o X (agora com 44px, abaixo) e o botao de voltar
     do aparelho (mobile.js:159, que observa a classe `open` deste mesmo #drawer). */
  .dhead::before{
    content:"";
    position:absolute;
    top:6px;
    left:50%;
    transform:translateX(-50%);
    width:36px;
    height:4px;
    border-radius:2px;
    background:var(--border-strong);
  }

  /* DESFAZ styles.css:238 (.icon-close{width:32px;height:32px}) — o X e a saida
     nº 1 da folha nas oito telas e estava medido FORA da tela (EVIDENCIA §2). */
  .icon-close{
    width:var(--m-tap);
    height:var(--m-tap);
    flex:none;
    font-size:17px;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     3 · CORPO ROLAVEL
     ══════════════════════════════════════════════════════════════════════════ */

  /* DESFAZ o padding:18px 20px de styles.css:215. Os 40px laterais custavam 11%
     da largura da folha; com 32px sobram 343px de conteudo em 375.
     `overscroll-behavior:contain` e o conserto de "chegar no fim do Prontuario
     comeca a rolar a lista atras": quando a folha fecha, closeDrawer chama
     setView(currentView) (app.js:1600) e a lista reaparece em outro lugar.
     O `--m-safe-b` no pe tira o ultimo botao da folha (🗑️ Excluir, app.js:1469;
     ⚖️ LGPD, 1470) de debaixo da faixa de gesto do iPhone — ele so devolve valor
     real porque index.html:5 tem viewport-fit=cover. */
  .dbody{
    padding:14px 16px calc(18px + var(--m-safe-b));
    gap:16px;
    overscroll-behavior:contain;
  }

  /* PRE-REQUISITO da barra sticky da secao 4: sem reserva, no fim da rolagem os
     ~64px finais do conteudo da FICHA (🗑️ Excluir, app.js:1469, e ⚖️ LGPD, 1470)
     ficariam atras da barra grudada no rodape, que nunca sai do lugar.

     ⚠️ A reserva tem que ser um ITEM EM FLUXO, nunca `padding-bottom`.
     CSS Position 3 §6.3: a caixa sticky e deslocada e depois CONTIDA no bloco
     contentor dela — que e o CONTENT box do `.dbody`, sem o padding. Com a reserva
     em padding, o `bottom:0` resolve contra o scrollport (padding box) mas a barra
     para 76px acima, no fim do CONTEUDO: ela cobriria permanentemente os dois
     botoes finais e deixaria uma faixa branca embaixo de si. O espacador `::after`
     e item de flex do `.dbody` (styles.css:215 e `display:flex;flex-direction:column`),
     logo estende o content box e a barra chega ao pe de verdade.

     Conta: 8 (padding-top da barra) + 48 (.cbtn) + 8 (padding-bottom) = 64, mais o
     `--m-safe-b` da faixa do indicador de home e 16 de respiro. O `gap:16px` do
     `.dbody` soma por cima, entao o ultimo botao real para ~32px acima da barra.
     O `:has(> .contact-row:first-child)` casa SO na ficha — que e exatamente onde
     a barra sticky existe (ver secao 4). Falha graciosamente: navegador sem
     `:has()` fica com o padding normal da regra acima. */
  .drawer .dbody:has(> .contact-row:first-child){
    padding-bottom:0;
  }
  .drawer .dbody:has(> .contact-row:first-child)::after{
    content:"";
    flex:0 0 calc(65px + var(--m-safe-b) + 16px);   /* 8 + 48 + 8 + 1 de borda */
  }

  /* ══════════════════════════════════════════════════════════════════════════
     4 · BARRA DE ACOES DA FICHA, grudada no pe
     ══════════════════════════════════════════════════════════════════════════ */

  /* Substitui a `<div class="dact">` fixa que exigiria uma linha nova em
     renderDrawer (app.js:1471) — app.js nao e editado neste pacote.
     CONFERIDO NAS OITO TELAS, e o contrato esta certo por pouco: `.contact-row` e
     o PRIMEIRO filho do `.dbody` SO na ficha (app.js:1381-1385). No passo do
     disparo assistido ele e o TERCEIRO filho (app.js:1906, dentro de 1903-1911: .field da
     mensagem, depois `<a class="cbtn wa">`, depois o par "Enviado ✓ próximo" /
     "Pular", e depois ainda "Encerrar disparo"). Nas outras seis telas ele nao
     existe.
     Por isso o `:first-child`: se a regra fosse `.drawer .contact-row`, no
     assistido a barra flutuaria para o pe da folha e cobriria o "Encerrar
     disparo", que vem DEPOIS dela no fluxo. No assistido a folha e curta e os
     dois botoes ja ficam a um toque sem sticky nenhum — o defeito de la ("Pular"
     56% fora da tela) era o deslocamento de 87px da folha, resolvido na secao 1.
     FURO [8]: NAO empilho `.contact-row` em uma coluna. Sao dois BOTOES, nao dois
     campos: (375 − 32 de padding − 9 de gap)/2 ≈ 167px cada, folgado para
     "WhatsApp" e "E-mail". Empilhado, a barra viraria 112px (14%) de altura util
     comida para sempre. Quem empilha e so o `.meta-grid`, na secao 5. */
  .drawer .dbody > .contact-row:first-child{
    /* ⚠️ `sticky` NAO serve aqui, e foi MEDIDO: com `bottom:0` o sticky so impede
       a caixa de descer ABAIXO do pe do scrollport — ele nunca empurra pra baixo
       uma caixa que esta ACIMA. E o `.contact-row` e o PRIMEIRO filho do `.dbody`,
       entao nasce no topo: rolando pra baixo ele ia embora junto com o conteudo.
       Medicao com a ficha do lead 15 rolada ao fim (scrollTop 2731 de 3437):
       `position:sticky` computado, e a barra em y = -2611 — fora da tela.
       `fixed` resolve contra o viewport, que no celular e exatamente a caixa da
       folha (`.drawer` cobre a tela inteira: left/right 0, height 100dvh). Durante
       os 280ms da transicao o `.drawer` tem transform != none e passa a ser o bloco
       contentor, entao a barra sobe junto com a folha — que e o desejado. Fechada,
       a folha esta em translateY(100%) e leva a barra com ela. */
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    background:var(--surface);
    border-top:1px solid var(--border);
    padding:8px 16px calc(8px + var(--m-safe-b));
    margin-bottom:0;
  }
  /* Preco declarado deste padrao: um vao de ~64px no topo do corpo da ficha (o
     lugar de origem do `.contact-row`, que sai do fluxo). Em troca, WhatsApp e
     E-mail ficam a um toque mesmo com a pessoa no Prontuario, a ~700px de rolagem
     de distancia — e agora de verdade, nao so nas primeiras telas de rolagem. */

  /* DESFAZ o font-size:13px de styles.css:217 e traz os 48px de alvo de acao com
     consequencia. Vale para os TRES `.cbtn` do app — os dois da ficha
     (app.js:1383-1384) e o "Abrir no WhatsApp" solto do disparo assistido
     (app.js:1905), que nao mora dentro de `.contact-row`. */
  .drawer .cbtn{
    min-height:var(--m-tap-lg);
    font-size:14.5px;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     5 · AS GRADES DE DUAS COLUNAS EMPILHAM
     ══════════════════════════════════════════════════════════════════════════ */

  /* DESFAZ styles.css:227 (.meta-grid{grid-template-columns:1fr 1fr}) — nenhuma
     media query tocava nela em 791 linhas.
     Aritmetica do defeito: folha de 353px − 40 de padding do .dbody = 313 de
     conteudo; (313−13)/2 = 150 por coluna; menos padding 12+12 e borda 1+1 do
     `.field input` (styles.css:224) = 124px de texto util. Nessa caixa estavam
     `#dCallAt` type=datetime-local (app.js:1417), `#eData`/`#nData` type=date
     (1400, 1970) e `#dCallDone` (1223) — um datetime-local nativo precisa
     renderizar "15/09/2026 14:30" MAIS o controle de calendario.
     Alcance: 6 blocos na ficha (app.js:1390, 1395, 1399, 1403, 1416 e o 1222 do
     callDoneBox) + 3 no Novo lead (1958, 1962, 1966) + 2 FORA do #drawer, no modo
     API da aba Campanha (app.js:1863 e 1869) — nesses dois o empilhamento em 375px
     tambem e o certo (o par "Teste antes: seu WhatsApp" + botao vira duas linhas
     de largura cheia), e o contrato me da o seletor `.meta-grid` com exclusividade,
     entao declaro sem escopo em vez de deixar dois donos para a mesma classe. */
  .meta-grid{grid-template-columns:1fr}

  /* ══════════════════════════════════════════════════════════════════════════
     6 · ALVOS DE TOQUE E ARMADILHAS DE ROLAGEM DA FICHA
     ══════════════════════════════════════════════════════════════════════════ */

  /* "🙋 Atender este lead" — ja tem ~55px de altura por causa das duas linhas de
     texto (styles.css:272); o que falta e nao brigar com a barra sticky e ter
     margem de respiro no toque. */
  .claim-btn{min-height:var(--m-tap-lg)}
  /* (conferência da SPEC-MEET-6, medido nas capturas de 390px) o `min-height` acima troca o `min-height:auto` do item de
     flex do `.dbody` (flex column com rolagem): o botão ENCOLHIA para 48px e cortava a 2ª linha ("sinaliza pro time que é
     você"; scrollHeight 50 > 48). Sem encolher, ele fica com a altura do texto — e o bloco "📅 Call" logo abaixo não sobe. */
  .claim-btn{flex-shrink:0}

  /* `.claim-box` e uma linha "quem esta atendendo" + botao Liberar. Em 343px o
     nome do colega e o "desde ontem 14:20" precisam quebrar sem espremer o botao. */
  .claim-box{
    flex-wrap:wrap;
    padding:12px;
  }
  /* DESFAZ o padding:8px 12px + font-size:12.5px de styles.css:281 (~33px de
     alvo). O `.claim-release` e o "Liberar" da ficha, o "Pular" do disparo
     assistido (app.js:1908) e o "🔁 Reenviar pra quem nao abriu" DESTA folha
     (app.js:3546) — e, fora do #drawer, os botoes de teste do e-mail e da
     campanha. O contrato me da o seletor com exclusividade; o mesmo alvo de 44px
     e o certo nos tres lugares. */
  .claim-release{
    min-height:var(--m-tap);
    padding:0 14px;
    font-size:13.5px;
  }

  /* DESFAZ o padding:9px 6px/font-size:12.5px de styles.css:480 (~38px medidos).
     Sao os botoes de DESFECHO: "📞 Call realizada", "✅ Cliente", "🔄 Follow-up",
     "🕓 Nao agora" (app.js:1422-1427), o veredito de qualificacao (app.js:191-193)
     e o "✅ Confirmar / ❌ Recusar" da call na ficha (app.js:2965).
     `.outcome-btns` ja e 1 coluna por styles.css:485 — nao redeclaro.
     Igualo a especificidade de `.call-resp .ob` (0,2,0), que tem padding proprio. */
  .outcome-btns .ob,
  .call-resp .ob{
    min-height:var(--m-tap-lg);
    font-size:14px;
  }

  /* DESFAZ styles.css:242 (~27px medidos). Sao as duas abas do Prontuario
     (app.js:1452-1455) — 36px e o que o contrato fixa para controle de
     segmentacao, e as duas cabem numa linha de 343px a 12.5px. */
  .pr-head{gap:8px}
  .pr-tab{
    min-height:36px;
    padding:8px 14px;
    font-size:12.5px;
  }

  /* DESFAZ styles.css:338 (~27px medidos) para os chips de proximo retorno
     "amanha / em 3 dias / em 1 semana / ✕ limpar" (app.js:1439-1442). O
     `[data-next]` mantem a regra dentro da minha peca: a forma base de
     `.chip-btn` e da peca 00, e o atributo so existe dentro da ficha. */
  .chip-btn[data-next]{
    min-height:40px;
    padding:9px 14px;
    font-size:13px;
  }

  /* O X que APAGA etiqueta era um alvo de ~8×12px colado na propria etiqueta, e o
     clique dispara DELETE /leads/:id/tags direto (app.js:1585-1588), sem
     confirmacao — encostar nele ao tentar tocar na etiqueta destruia o que o
     #fTag filtra. 32px e o teto aqui: 44 estouraria o chip. A segunda metade
     (o confirm() antes do DELETE) e app.js e fica fora deste pacote. */
  .tag{
    padding:6px 6px 6px 11px;
    font-size:13px;
  }
  .tag button{
    min-width:32px;
    min-height:32px;
    display:grid;
    place-items:center;
    margin-left:2px;
    opacity:.75;
  }

  /* O "+" de adicionar etiqueta (app.js:1447) e o "+ livre" da Agenda
     (app.js:2927) nao tem largura propria em styles.css:233 — viravam alvos de
     ~38px de largura. A altura vem do `align-items:stretch` do flex, casada com
     os 44px que a peca 00 da ao `input` do `.field`. */
  .tag-input-row button{
    min-width:var(--m-tap);
    min-height:var(--m-tap);
    flex:none;
  }

  /* DESFAZ styles.css:572 (max-height:180px;overflow:auto). Rolagem aninhada de
     180px dentro da folha que ja rola: o dedo prende na caixa de dentro. Sao as
     6 ultimas mensagens do WhatsApp (app.js:1330) — o bloco que responde "o lead
     falou por ultimo?" (app.js:1338). Seis mensagens curtas nao justificam um
     segundo contentor de rolagem. */
  .brief-thread{
    max-height:none;
    overflow:visible;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     7 · NOTA FISCAL DENTRO DA FICHA (notaPanel, app.js:156-178)
     ══════════════════════════════════════════════════════════════════════════ */

  /* DESFAZ styles.css:655 (.nf-lead-form{display:flex;gap:8px} SEM flex-wrap).
     Aritmetica do defeito, nos 313px de conteudo da ficha: 313 − 16 de gaps = 297;
     as bases eram 140 (inline no `.dinheiro`) + 0 + 0, e o resto era dividido em
     partes iguais → dinheiro ≈192px, `#nfLeadProd` ≈52px e `#nfLeadDoc` ≈52px. Um
     select de 52px nao mostra QUAL produto esta selecionado, numa tela que emite
     documento fiscal.
     Preciso do `>` para igualar a especificidade de `.nf-lead-form input` (0,1,1,
     styles.css:656) e `.nf-lead-form select` (0,1,1, styles.css:665): media query
     nao soma especificidade, e sem isso o `flex:1` delas continuaria valendo.
     O `>` tambem protege o input INTERNO do campo de dinheiro (app.js:167), que e
     filho de `.dinheiro` e tem regra propria em styles.css:732.
     O `.dinheiro` NAO entra: ele carrega `style="flex:1 1 140px"` INLINE
     (app.js:167) e estilo inline vence qualquer seletor sem !important — FURO [22]
     manda nao tentar vence-lo. Nao preciso: com o wrap ligado, os dois irmaos de
     base 100% caem cada um na sua linha e o `.dinheiro` sobra sozinho na primeira,
     onde o `flex-grow:1` dele mesmo o faz ocupar a largura inteira. Tres linhas de
     largura cheia, sem tocar em app.js.
     O `.dinheiro-eco` (o eco por extenso do valor) e IRMAO do `.nf-lead-form`,
     nao filho (app.js:171) — dono dele e a peca 00, por FURO [22]. */
  .nf-lead-form{
    flex-wrap:wrap;
    gap:10px;
  }
  .nf-lead-form > select,
  .nf-lead-form > input{
    flex:1 1 100%;
    min-width:0;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     8 · O DIA DA AGENDA DENTRO DA FOLHA (openDay, app.js:2906-2945)
     ══════════════════════════════════════════════════════════════════════════ */

  /* DESFAZ styles.css:525/527/529: `.ag-slot{display:flex;align-items:center}`
     com `.ag-slot-main{flex:1}` empurrava o `.ag-slot-act` para o fim da linha, e
     os botoes ✅/❌ nasciam em x≈380-435 — inteiros depois da borda da tela de
     375. E a unica coisa que a aba Agenda pede: "confirme as calls que o time
     agendar com voce" (app.js:2874 e index.html:194). Os botoes existem so aqui
     (app.js:2919); o caminho alternativo pela ficha (callStatusHtml, app.js:2965)
     nao substitui a aba.
     Com `flex-basis:100%` nos dois filhos, a faixa de acoes desce para baixo do
     horario e nasce em x=16, dentro dos 343px visiveis. */
  .ag-slot{flex-wrap:wrap}
  .ag-slot-main{flex-basis:100%}
  .ag-slot-act{
    flex-basis:100%;
    justify-content:flex-start;
    margin-top:8px;
    gap:8px;
  }
  /* DESFAZ styles.css:530 (.ag-slot-act .ob{padding:5px 9px;font-size:13px}) — um
     ✅ de 5px de padding e o toque que confirma uma call. O `.chip` aqui e o 🗑️
     de remover horario (app.js:2921); escopo o seletor por `.ag-slot-act` para nao
     invadir o `.chip` generico (styles.css:144), que nao e desta peca. */
  .drawer .ag-slot-act .ob,
  .drawer .ag-slot-act .chip{
    min-height:var(--m-tap);
    min-width:56px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     9 · DETALHE DA CAMPANHA DE E-MAIL DENTRO DA FOLHA (renderCampanha, app.js:3517)
     ══════════════════════════════════════════════════════════════════════════ */

  /* `.mkpis` e `.prev-mail` existem em TRES lugares: nesta folha (app.js:3534 e
     3552), no Dashboard (app.js:870) e na aba E-mail (app.js:3133 e 3166). Meu
     escopo e so o que esta DENTRO do #drawer — por isso o prefixo `.drawer`, que
     alem de delimitar a peca ainda me da a especificidade (0,2,0) para vencer
     styles.css:608 e :605 sem !important. As instancias de fora sao pedido a
     peca 50. */

  /* DESFAZ styles.css:608 (repeat(auto-fit,minmax(140px,1fr))): fixa as duas
     colunas em vez de deixar o numero delas depender da largura medida — os seis
     cartoes (Enviados, Entrega, Abertura, Cliques, Rejeicao, Spam) viram 3 fileiras
     de 2, previsiveis. */
  .drawer .mkpis{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .drawer .mkpi{padding:10px 11px}

  /* DESFAZ o max-height:340px de styles.css:605 — 340px eram 42% de uma tela de
     812 e formavam um segundo contentor de rolagem VERTICAL dentro da folha, com o
     encadeamento no fim do conteudo pouco confiavel no Safari do iPhone.
     Mantenho `overflow:auto` (e nao `visible`, que o dossie sugeria) de proposito:
     o conteudo aqui e HTML de e-mail gerado pelo servidor (`c.corpoHtml`), que pode
     trazer tabela mais larga que os 343px; com `max-height:none` a caixa cresce
     ate o conteudo e NAO sobra rolagem vertical nenhuma, enquanto o eixo
     horizontal continua tendo saida. Com `visible` o excesso seria CLIPADO, porque
     o `.prev-mail` tem `overflow:hidden` (styles.css:602). */
  .drawer .prev-body{
    max-height:none;
    overflow:auto;
    padding:14px;
  }
  .drawer .prev-head{padding:10px 14px}

  /* ══════════════════════════════════════════════════════════════════════════
     10 · GOOGLE MEET NA FICHA, GRAVACOES, TRANSCRICAO, "CALLS SEM FICHA" E E-MAIL GOOGLE
          (meetBlocoHtml, gravacoesHtml, openTranscricao, openSemFicha, tmGoogleHtml — app.js)
     ══════════════════════════════════════════════════════════════════════════ */

  /* Quase tudo aqui ja vem pronto das pecas anteriores, e foi por isso que as telas novas
     reusam classes em vez de inventar: os botoes sao `.chip-btn` (44px, peca 00), as listas
     de gravacao e de "sem ficha" sao `.ag-slot` (a faixa de acoes desce para baixo do horario,
     secao 8 desta peca), a busca da transcricao e `.field input` (16px, peca 00) e as duas
     telas novas moram no #drawer (folha de tela cheia, secao 1). Abaixo, so o que sobra. */

  /* "📋 Copiar convite" e "▶ Entrar na call" sao as duas acoes da HORA da call; com largura de
     conteudo viravam dois alvos estreitos encostados no canto. Dividem a linha: 2 x ~167px
     nos 343px uteis, e quando so existe um, ele ocupa a linha inteira. O "Entrar" e um <a>:
     o text-align centraliza o rotulo que o flex esticou. */
  .meet-acoes .chip-btn{flex:1 1 140px;text-align:center}

  /* (SPEC-ACESSOS-GRAVACOES, 05/10/2026) "▶ Gravação" e "📄 Transcrição (no seu Google Drive)": o mesmo arranjo das duas acoes
     da hora da call — dividem a linha, e o rotulo longo quebra em vez de estourar a folha. A dica ("Abre com a conta…") e o
     "⏳ ainda não chegou" sobem para letra de leitura (os 11.5px do desktop sao rodape). (conferencia, achado T6) A frase do lead
     que saiu dela ("Este lead não está mais com você…", .mc-outra) tambem: e ela que explica por que nao ha "Abrir a ficha". */
  .grav-orig-links .chip-btn{flex:1 1 150px;text-align:center;white-space:normal}
  .grav-orig-dica,.grav-orig-st,.mc-outra{font-size:13px}

  /* Quando o navegador nega a area de transferencia, app.js abre o texto do convite e da
     select() nele — select() FOCA o campo, e abaixo de 16px o Safari do iPhone da zoom
     sozinho e nao desfaz (o mesmo motivo do piso da peca 00). */
  .meet-convite textarea{font-size:16px}
  /* o "ver o texto do convite" e um <summary> de 11.5px: alvo de toque de ~17px */
  .meet-convite summary{padding:10px 0;font-size:13px}

  /* Leitura de uma call de uma hora no celular: os 13px do desktop sao letra de rodape. */
  .tr-fala{font-size:15px;padding:10px 12px}
  .tr-t{font-size:12.5px}

  /* "Vincular a Fulana de Tal · call 28/09 14:30" e frase, nao rotulo: cada candidato numa
     linha inteira, alinhado a esquerda e quebrando — em largura de conteudo o nome virava
     reticencia, e o nome e justamente o que o admin precisa ler antes de vincular. */
  .sf-cands .chip-btn{
    flex:1 1 100%;
    justify-content:flex-start;
    text-align:left;
    white-space:normal;
  }

  /* O aviso "Entre com a conta fulana@mentoriabizus.com" e o que decide se a call tera transcricao:
     no celular ele e lido na hora de entrar, entao sobe para a letra de leitura (os 12px do
     desktop sao rodape). */
  .meet-conta{font-size:14px;padding:8px 10px}

  /* Equipe: o e-mail Google do vendedor. No desktop o campo comeca alinhado ao nome (44px de
     recuo, styles.css); nos 343px uteis do celular esse recuo come um e-mail de 30 caracteres —
     o campo ocupa a largura inteira. O input ja e `.field input` (16px/44px, peca 00) e o
     "Salvar" ja e `.tag-input-row button` (44px, secao 6 desta peca). */
  .tm-google{margin-left:0}
  .tm-google-st{font-size:13px}
  /* [F5] "recebe o aviso por WhatsApp": a linha inteira é o alvo de toque (44px), e a caixa tem o tamanho das caixas da janela
     de marcar call (22px, `.jc-opcao input`, seção 11) */
  .tm-wa .tm-wa-recebe{min-height:var(--m-tap);font-size:14px}
  .tm-wa .tm-wa-recebe input{width:22px;height:22px}
  /* [R5-G1-TOAST] a recusa de Gerenciar time escrita no drawer (`.tm-recusa`, styles.css) na letra de leitura do celular */
  .tm-recusa{font-size:14px}

  /* ══════════════════════════════════════════════════════════════════════════
     11 · SPEC-MEET-6 (29/09 noite): o bloco "📅 Call" no TOPO da ficha e a JANELA de marcar/excluir
          (callBlocoHtml, janelaMarcacaoHtml, janelaExclusaoHtml, janelaTrocaHtml — app.js; #janelaCall — index.html)
     ══════════════════════════════════════════════════════════════════════════ */

  /* O bloco vem logo depois do "Atender" (o WhatsApp/E-mail desceu para o pé, secao 1): e a primeira coisa que o
     polegar alcanca. Os botoes dividem a linha (2 x ~160px nos 343px uteis) em alvos de 44px. */
  .cb-acoes .cb-btn{flex:1 1 140px;min-height:var(--m-tap);font-size:14px}
  .cb-marcar{min-height:56px;font-size:16px}
  .ag-slot-act .ag-excluir{min-height:var(--m-tap);flex:1 1 auto}
  .ag-nova-dia{min-height:var(--m-tap-lg);font-size:15px}

  /* A JANELA vira folha que sobe de baixo, na LARGURA da tela (nada de rolagem lateral): cabecalho, corpo que rola e
     o pe com Cancelar / Confirmar, os dois em alvos de 48px. Acima do teclado (--kb, mobile.js) — o campo de busca do
     lead e a hora ficam a vista enquanto se digita. Todo campo a 16px (abaixo disso o Safari do iPhone da zoom). */
  .jc-fundo{align-items:flex-end;padding:0 0 var(--kb) 0}
  .jc-caixa{max-width:100%;border-radius:18px 18px 0 0;max-height:calc(100dvh - 24px - var(--kb));padding-bottom:env(safe-area-inset-bottom)}
  .jc-cab .icon-close{width:var(--m-tap);height:var(--m-tap)}
  .jc-campo{font-size:16px;min-height:var(--m-tap)}
  .jc-quando{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .jc-achado{min-height:var(--m-tap)}
  .jc-caixa-troca input{width:22px;height:22px}
  .jc-pe .jc-cancelar,.jc-pe .jc-confirmar{flex:1 1 140px;min-height:var(--m-tap-lg);font-size:15px;margin-left:0}

  /* 11b · SPEC-MEET-7 (30/09): o "🔗 Adicionar link de call" (o botao do bloco em linha inteira quando esta sozinho, o campo
     do link a 16px como os outros) e a lista de calls da sala na janela (cada opcao num alvo de 44px); em "Calls sem ficha",
     os botoes "Vincular a …" e "Nao e call de venda" em alvos de 44px */
  .cb-acoes .cb-link{flex:1 1 100%}
  .cb-acoes .cb-nota{flex:1 1 100%}
  .jc-opcao{min-height:var(--m-tap)}
  .jc-opcao input{width:22px;height:22px}
  .sf-cands .chip-btn,.sf-rodape .chip-btn{min-height:var(--m-tap)}

  /* 11c · SPEC-MEET-9 (01/10): a sugestao do CRM em "Calls sem ficha" — o "Vincular a …" da principal e o "Nao e call de
     venda" da reuniao interna em linha inteira e alvo de 44px (o nome e o que o admin le antes de vincular); as outras
     sugestoes recolhidas, cada uma numa linha; a caixa "Passar este lead para …" da janela num alvo de 44px */
  .sf-sug .chip-btn,.sf-outra .chip-btn{min-height:var(--m-tap);flex:1 1 100%;width:100%;justify-content:flex-start;text-align:left;white-space:normal}
  .sf-outras summary{min-height:var(--m-tap);display:flex;align-items:center;list-style:none}
  /* (conferência 01/10) o display:flex tira o triângulo do <summary>: sem ele, "Outras sugestões (1)" não parece tocável */
  .sf-outras summary::-webkit-details-marker{display:none}
  .sf-outras summary::before{content:"▸";margin-right:6px;font-size:12px}
  .sf-outras[open] summary::before{content:"▾"}
  .jc-passar .jc-caixa-troca{min-height:var(--m-tap);align-items:center}
  .jc-passar .jc-caixa-troca input{width:22px;height:22px}
}