/* Telas do app. Tokens em tokens.css — derivados do design system Camp do
   ActiveCampaign, sem a fonte e sem os ícones deles. Ver prototipo/README.md. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:400 14px/20px 'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
     color:var(--azul-1000);background:var(--neutro-200)}
button{font:inherit;cursor:pointer}

/* ── primitivos, no espírito do Camp ────────────────────────────────── */
.btn{height:var(--controle);padding:8px 12px;border-radius:var(--r-4);border:1px solid transparent;
     font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:var(--transicao)}
.btn:focus-visible{outline:none;box-shadow:var(--foco)}
.btn-1{background:var(--azul-700);color:#fff}
.btn-1:hover{background:var(--azul-800)}
.btn-2{background:var(--superficie);color:var(--azul-1000);border-color:var(--borda)}
.btn-2:hover{background:var(--superficie-hover)}
.btn-txt{background:transparent;color:var(--azul-700);padding:8px}
.btn-p{height:28px;padding:4px 8px;font-size:12px;line-height:16px}
.campo{height:var(--controle);padding:8px 12px;border:1px solid var(--borda);border-radius:var(--r-4);
       width:100%;font:inherit;color:inherit;background:var(--superficie)}
.campo:focus{outline:none;border-color:var(--azul-700);box-shadow:var(--foco)}
.pilula{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;
        border-radius:var(--r-pilula);font-size:12px;line-height:16px;font-weight:500;
        border:1px solid transparent;white-space:nowrap}
.p-fila{background:var(--aviso-fundo);border-color:var(--aviso-borda);color:#8a6200}
.p-ativo{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok-tinta)}
.p-fim{background:var(--neutro-200);border-color:var(--neutro-300);color:var(--neutro-700)}
.p-grupo{background:var(--azul-100);border-color:var(--azul-300);color:var(--azul-800)}
.av{width:28px;height:28px;border-radius:100%;display:grid;place-items:center;flex:none;
    font-size:12px;font-weight:600;color:#fff;background:var(--neutro-700)}
.av-g{background:var(--azul-600)}
.contador{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pilula);background:var(--azul-700);
          color:#fff;font-size:12px;line-height:20px;font-weight:600;text-align:center}

/* ── caixa de entrada ───────────────────────────────────────────────── */
.inbox{width:100%;max-width:1200px;height:720px;background:var(--superficie);border-radius:var(--r-8);
       box-shadow:var(--e3);display:grid;grid-template-columns:320px 1fr;overflow:hidden}
/* `min-height:0` não é firula: o padrão de item de flex/grid é `min-height:auto`,
   que o impede de encolher abaixo do próprio conteúdo. Sem isto a coluna cresce
   até o tamanho da conversa inteira, o `overflow:auto` de dentro nunca é
   acionado, e o campo de envio vai parar fora da tela — foi o que aconteceu com
   1736 px de coluna dentro de um modal de 1329 px. */
.col-lista{border-right:1px solid var(--borda-sutil);display:flex;flex-direction:column;
           min-width:0;min-height:0}
.topo-lista{padding:16px;border-bottom:1px solid var(--borda-sutil);display:grid;gap:8px}
.filtros{display:flex;gap:4px;flex-wrap:wrap}
.filtros .btn-p{border:1px solid var(--borda);background:var(--superficie);border-radius:var(--r-pilula)}
.filtros .btn-p[aria-pressed=true]{background:var(--azul-1000);color:#fff;border-color:var(--azul-1000)}
.lista{overflow-y:auto;flex:1;min-height:0}
.item{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--borda-sutil);
      padding:12px 16px;display:grid;grid-template-columns:28px 1fr auto;gap:8px;transition:var(--transicao)}
.item:hover{background:var(--superficie-hover)}
.item[aria-current=true]{background:var(--azul-100);box-shadow:inset 3px 0 0 var(--azul-700)}
.item-nome{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-txt{display:block;color:var(--neutro-700);overflow:hidden;text-overflow:ellipsis;
          white-space:nowrap;font-size:13px}
/* a coluna do meio precisa poder encolher: sem min-width:0 o grid usa o
   tamanho do conteudo e o nome empurra a hora para fora */
.item > span:nth-child(2){min-width:0;display:block}
.item-meta{display:grid;gap:4px;justify-items:end;font-size:12px;line-height:16px;
           color:var(--neutro-700);white-space:nowrap}
.item-sinais{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}

.col-conversa{display:flex;flex-direction:column;min-width:0;min-height:0}
.topo-conversa{padding:12px 16px;border-bottom:1px solid var(--borda-sutil);
               display:flex;gap:12px;align-items:center}
.topo-conversa .id{min-width:0;flex:1;overflow:hidden}
.topo-conversa .nome{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo-conversa .sub{font-size:12px;line-height:16px;color:var(--neutro-700)}
.fio{flex:1;min-height:0;overflow-y:auto;padding:16px;background:var(--superficie-apoio);display:grid;gap:8px;align-content:start}
.bolha{max-width:62%;padding:8px 12px;border-radius:var(--r-8);box-shadow:var(--e1);background:var(--superficie)}
.b-cliente{justify-self:start;border-bottom-left-radius:var(--r-2)}
.b-operador{justify-self:end;background:var(--azul-100);border-bottom-right-radius:var(--r-2)}
.b-nota{justify-self:end;background:var(--aviso-fundo);border:1px solid var(--aviso-borda);box-shadow:none}
.b-autor{font-size:12px;line-height:16px;font-weight:600;color:var(--azul-800);margin-bottom:2px}
.b-fone{font-weight:400;color:var(--neutro-500)}
/* Contraste medido: --neutro-500 sobre branco dá 2,48:1, e o mínimo do WCAG AA
   para texto é 4,5:1. Num painel de atendimento a hora da mensagem não é
   decoração — é o que diz se o cliente está esperando há dois minutos ou duas
   horas. --neutro-700 sobe para 5,5:1. */
.b-hora{font-size:11px;line-height:16px;color:var(--neutro-700);margin-top:2px;text-align:right}
.sistema{justify-self:center;font-size:12px;line-height:16px;color:var(--neutro-700);
         background:var(--neutro-200);padding:4px 12px;border-radius:var(--r-pilula)}
.anexo{display:flex;align-items:center;gap:8px;padding:8px;background:var(--neutro-100);
       border:1px solid var(--borda-sutil);border-radius:var(--r-4);font-size:13px}
.barra-audio{height:4px;flex:1;background:var(--neutro-300);border-radius:var(--r-pilula);min-width:80px}
.barra-audio i{display:block;height:100%;width:38%;background:var(--azul-700);border-radius:var(--r-pilula)}
.rodape{border-top:1px solid var(--borda-sutil);padding:12px 16px;background:var(--superficie)}
.linha-envio{display:flex;gap:8px;align-items:flex-end}
.aviso{display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:var(--r-4);
       background:var(--aviso-fundo);border:1px solid var(--aviso-borda);font-size:13px;line-height:18px}
.aviso.err{background:var(--erro-fundo);border-color:var(--erro-borda)}
.relogio{font-variant-numeric:tabular-nums;font-weight:600}
.vazio{display:grid;place-items:center;height:100%;text-align:center;color:var(--neutro-700);padding:32px}
.vazio h3{margin:8px 0 4px;font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--azul-1000)}
.vazio p{margin:0;max-width:280px}

/* assinatura discreta — o app não se passa por parte do ActiveCampaign */
.assinatura{display:flex;align-items:center;gap:6px;font-size:11px;line-height:16px;
            color:var(--neutro-700);padding:6px 16px;border-top:1px solid var(--borda-sutil);
            background:var(--superficie-apoio)}
.ponto{width:6px;height:6px;border-radius:100%;background:var(--ok-tinta);flex:none}

/* ── Quick View: 373px é o TETO MEDIDO do contêiner do AC ───────────── */
.qv{height:373px;background:var(--superficie);border:1px solid var(--borda-sutil);
    border-radius:var(--r-4);box-shadow:var(--e1);display:flex;flex-direction:column;overflow:hidden}
.qv .topo-conversa{padding:8px var(--padding-painel)}
.qv .fio{padding:var(--padding-painel);gap:6px}
.qv .bolha{max-width:85%;padding:6px 10px}
.qv .rodape{padding:8px var(--padding-painel)}
.qv .campo,.qv .btn{height:32px}
.icone{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
       stroke-linecap:round;stroke-linejoin:round}

/* ── modal: salvar contato no ActiveCampaign ────────────────────────── */
.veu{position:fixed;inset:0;background:rgba(20,35,65,.5);display:grid;place-items:center;
     padding:24px;z-index:10}
.modal{background:var(--superficie);border-radius:var(--r-8);box-shadow:var(--e3);
       width:100%;max-width:480px;max-height:90vh;display:flex;flex-direction:column}
.modal-topo{padding:16px 20px;border-bottom:1px solid var(--borda-sutil);
            display:flex;align-items:flex-start;gap:12px}
.modal-topo h2{margin:0;font:600 16px/24px 'IBM Plex Sans',sans-serif}
.modal-topo p{margin:2px 0 0;font-size:12px;line-height:16px;color:var(--neutro-700)}
.fechar{margin-left:auto;background:none;border:0;color:var(--neutro-700);padding:4px;
        border-radius:var(--r-4);line-height:0}
.fechar:hover{background:var(--superficie-hover)}
.modal-corpo{padding:20px;overflow-y:auto;display:grid;gap:16px}
.modal-rodape{padding:16px 20px;border-top:1px solid var(--borda-sutil);
              display:flex;justify-content:flex-end;gap:8px}
.grupo-campo{display:grid;gap:4px}
.grupo-campo label{font-weight:500}
.grupo-campo .ajuda{font-size:12px;line-height:16px;color:var(--neutro-700)}
.grupo-campo .ajuda.err{color:var(--erro-tinta)}
.campo[readonly]{background:var(--neutro-100);color:var(--neutro-700)}
.campo.invalido{border-color:var(--erro-tinta)}
.campo.invalido:focus{box-shadow:0 0 0 2px var(--erro-borda)}
select.campo{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d6981' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
.origem{display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:var(--r-4);
        background:var(--azul-100);border:1px solid var(--azul-300);font-size:12px;line-height:18px;
        color:var(--azul-900)}
.sucesso{display:grid;justify-items:center;text-align:center;gap:8px;padding:32px 20px}
.selo-ok{width:48px;height:48px;border-radius:100%;background:var(--ok-fundo);
         border:1px solid var(--ok-borda);color:var(--ok-tinta);display:grid;place-items:center}
.selo-ok .icone{width:24px;height:24px}

/* ── anexos e citação ───────────────────────────────────────────────────── */

.b-texto{white-space:pre-wrap;word-break:break-word}

/* Miniatura com teto de altura: uma foto vertical do WhatsApp ocuparia a
   conversa inteira e empurraria todo o resto para fora da vista. */
.anexo-img{display:block;margin:2px 0}
.anexo-img img{display:block;max-width:100%;max-height:280px;border-radius:var(--r-4);
               background:var(--neutro-200)}
.anexo-audio{display:block;width:100%;min-width:220px;max-width:320px;margin:2px 0;height:36px}
.anexo-video{display:block;max-width:100%;max-height:280px;border-radius:var(--r-4);margin:2px 0}

/* A mensagem citada: barra à esquerda e fundo mais claro, como no WhatsApp.
   Antes disso vinha como uma parede de traços dentro do balão. */
/* A barra à esquerda é a convenção universal de citação — WhatsApp, e-mail,
   Slack. O detector a sinaliza como "borda colorida de card", que é outro
   padrão; aqui ela carrega significado, não decoração.
   Contraste medido antes: 1,53:1 no texto e 2,9:1 no autor. Citação é o
   contexto de uma resposta: ilegível, ela não serve para nada. */
.citacao{display:block;margin:0 0 6px;padding:6px 8px;border-left:3px solid var(--azul-600);
         border-radius:var(--r-2);background:rgba(81,127,255,.08);font-size:12px;
         line-height:17px;color:var(--neutro-800)}
.citacao-autor{display:block;font-weight:600;color:var(--azul-900)}
.citacao-texto{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
               overflow:hidden;white-space:pre-wrap}

/* ── barra de envio ─────────────────────────────────────────────────────── */

.btn-icone{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;
           justify-content:center;flex:none}
.gravando{display:flex;align-items:center;gap:8px;flex:1;padding:0 12px;height:36px;
          border:1px solid var(--erro-borda);border-radius:var(--r-4);
          background:var(--erro-fundo);color:var(--erro-tinta);font-size:13px}
.pulso{width:8px;height:8px;border-radius:100%;background:var(--erro-tinta);
       animation:pulsar 1s ease-in-out infinite}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.25}}
.relogio-gravacao{font-variant-numeric:tabular-nums;font-weight:600}
.envio-ocupado{opacity:.6;pointer-events:none}

/* ── acessibilidade ──────────────────────────────────────────────────────── */

/* Rótulo que existe para o leitor de tela e não ocupa espaço. Placeholder NÃO
   é rótulo: some quando a pessoa digita, e alguns leitores o ignoram. */
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
           overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Quem pediu menos movimento não perde informação, só o movimento: o ponto de
   gravação continua vermelho e visível, apenas para de piscar. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .pulso { opacity: 1; }
}

/* ── carregando ──────────────────────────────────────────────────────────
   Esqueleto no lugar de "Carregando…": a tela já mostra a forma do que vem,
   e a espera deixa de parecer travamento. */
.esqueleto{display:grid;gap:8px;padding:16px}
.esq-bolha{height:44px;border-radius:var(--r-8);background:linear-gradient(90deg,
           var(--neutro-200) 25%, var(--neutro-100) 37%, var(--neutro-200) 63%);
           background-size:400% 100%;animation:esq-brilho 1.4s ease infinite}
.esq-bolha:nth-child(1){width:58%}
.esq-bolha:nth-child(2){width:72%}
.esq-bolha:nth-child(3){width:44%;justify-self:end}
.esq-bolha:nth-child(4){width:64%}
@keyframes esq-brilho{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion: reduce){
  .esq-bolha{animation:none;background:var(--neutro-200)}
}

/* ── tela estreita ───────────────────────────────────────────────────────
   Abaixo de 760 px o grid de 320 px + resto deixaria a conversa com uma
   coluna inútil. Empilha, como o WhatsApp Web: lista OU conversa, com volta.
   A classe `vendo-conversa` é posta pelo JS quando alguém abre uma conversa. */
@media (max-width: 760px) {
  .inbox { grid-template-columns: 1fr; }
  .col-lista { border-right: 0; }
  .inbox.vendo-conversa .col-lista { display: none; }
  .inbox:not(.vendo-conversa) .col-conversa { display: none; }
  .voltar { display: inline-flex; }
  /* Alvo de toque de 44 px: dedo não acerta 28 px com confiança. */
  .item { padding: 14px 16px; }
  .btn-icone { width: 44px; height: 44px; }
  .linha-envio .campo { height: 44px; }
}

/* O botão de voltar só existe na versão empilhada. */
.voltar { display: none; width: 32px; height: 32px; padding: 0; margin-right: 4px;
          align-items: center; justify-content: center; flex: none;
          background: transparent; border: 0; border-radius: var(--r-4);
          color: var(--neutro-800); cursor: pointer }
.voltar:hover { background: var(--superficie-hover) }