:root {
  --ground:    #F1F4F9;
  --surface:   #FFFFFF;
  --sunken:    #E8ECF3;
  --ink:       #0F172A;
  --slate:     #475569;
  --quiet:     #8B93A5;
  --line:      #DCE2EC;

  /* O par que carrega a tela. Compartilhado = verde; privado = cinza. */
  --share:      #166534;
  --share-bg:   #DCFCE7;
  --share-line: #86EFAC;
  --private:      #475569;
  --private-bg:   #F1F5F9;
  --private-line: #DCE2EC;

  --danger:    #A32B2B;
  --danger-bg: #FDECEC;

  /* Uma família só na interface inteira.
     Antes havia duas, com uma regra bonita no papel — mono para o que a máquina
     sabe, sans para o que as pessoas disseram. Na tela ela não funcionou: hora,
     contagem e telefone em monoespaçada fazem um painel de conversas pessoais
     parecer saída de terminal, e isso afasta exatamente quem este produto quer
     acolher. A hierarquia agora vem de tamanho e cor, que é como ela deve vir.
     Inter entra se estiver instalada; senão, a humanista de cada sistema. */
  --sans: Inter, ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI Variable Text",
          "Segoe UI", Roboto, system-ui, "Helvetica Neue", sans-serif;
  /* A ÚNICA sobrevivente da monoespaçada: o comando de terminal e o trecho de
     código. Aquilo não é interface, é literalmente um comando para copiar — em
     sans-serif, conferir um token caractere a caractere fica pior. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius: 10px;
  --topo: 56px;
  /* A coluna dos contatos. 500px e o alvo: com 360 a previa da conversa cortava
     cedo demais e os filtros quebravam em duas linhas. O min() e o freio — numa
     janela estreita, uma coluna fixa de 500 espremeria o fio da conversa, que e
     onde se le. Abaixo de uns 1090px de viewport ela cede; acima, sao os 500. */
  --coluna: min(500px, 46vw);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:    #0E1420;
    --surface:   #161D2B;
    --sunken:    #0A101A;
    --ink:       #EEF1F6;
    --slate:     #9AA5BA;
    --quiet:     #6C768C;
    --line:      #263149;

    --share:      #4ADE80;
    --share-bg:   #123021;
    --share-line: #256B3D;
    --private:      #9AA5BA;
    --private-bg:   #1A2233;
    --private-line: #263149;

    --danger:    #E88B8B;
    --danger-bg: #34191C;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── barra de cima ───────────────────────────────────────────────── */

.topo {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; height: var(--topo);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}

.marca {
  font-weight: 660; letter-spacing: 0.01em; font-size: 15.5px;
  text-decoration: none; white-space: nowrap; color: var(--ink);
}

/* A conta conectada, no canto oposto à marca. O estado do WhatsApp precisa
   estar à vista porque é o pressuposto de tudo — com ele caído, a lista abaixo
   é um retrato velho e ninguém avisou.
   Mas ele é uma palavra, não um LED: um ponto que fica aceso o tempo todo não
   informa nada, e o normal (estar conectado) não merece cor. Quando cai, a
   etiqueta fica vermelha — é aí que ela deve puxar o olho, e só aí. */
.estado {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink); text-decoration: none;
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; min-width: 0;
  margin-right: 4px;
}
.estado:hover { background: var(--sunken); }
.estado .quem-conectado { overflow: hidden; text-overflow: ellipsis; font-weight: 550; }
.etiqueta-estado {
  flex: none; font-size: 11.5px; font-weight: 550; padding: 2px 8px;
  border-radius: 20px; color: var(--slate);
  background: var(--private-bg); border: 1px solid var(--line);
}
.etiqueta-estado.ruim {
  color: var(--danger); background: var(--danger-bg); border-color: var(--danger);
}

/* Para quem lê com os ouvidos: o cabeçalho diz "Lucas Castro — WhatsApp:
   Conectado", enquanto na tela cabe só o nome e o ponto. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.acoes-topo { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.acoes-topo form { display: flex; }

.icone {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; min-width: 32px; padding: 0 9px;
  border: 1px solid transparent; border-radius: 8px; background: none;
  color: var(--slate); cursor: pointer; font: inherit; font-size: 13.5px;
  text-decoration: none;
}
.icone:hover { background: var(--sunken); color: var(--ink); }
.icone svg { width: 16px; height: 16px; }

/* ── páginas comuns (conexão, e o fallback sem JS dos modais) ─────── */

main { max-width: 860px; margin: 0 auto; padding: 34px 24px 80px; }

.limite {
  font-size: 26px; line-height: 1.3; font-weight: 450;
  letter-spacing: -0.018em; margin: 0 0 4px;
}
.limite b { font-weight: 660; }
.limite .n { font-weight: 640; font-variant-numeric: tabular-nums; }
.limite em { font-style: normal; color: var(--share); }

.sub { color: var(--slate); margin: 0 0 26px; font-size: 14px; max-width: 58ch; }
.cartao .sub, .modal .sub { max-width: 72ch; }

h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
     color: var(--slate); font-weight: 620; margin: 34px 0 12px; }

/* ── o painel: lista à esquerda, conversa à direita ──────────────── */

body.painel { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.painel .topo { position: static; flex: none; }

.quadro { flex: 1; display: grid; grid-template-columns: var(--coluna) 1fr; min-height: 0; }

.coluna {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line); background: var(--surface);
}
.coluna-topo { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }

/* A frase é o herói: o limite dito em palavras, sempre à vista. A lista abaixo
   é um limite, não um inventário — e é esta linha que diz isso. */
.contagem { font-size: 15px; line-height: 1.4; margin: 0 0 12px; font-weight: 450; }
.contagem em { font-style: normal; color: var(--share); font-weight: 620;
               font-variant-numeric: tabular-nums; }
.contagem .n { font-weight: 640; font-variant-numeric: tabular-nums; }

/* O aviso e um LINK para a triagem, e nao um x que dispensa. Contato novo e
   uma pergunta em aberto; dispensar em bloco respondia por todos de uma vez. */
.novos {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 12.5px; line-height: 1.45; color: var(--slate); text-decoration: none;
  background: var(--private-bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px;
}
.novos:hover { background: var(--sunken); }
.novos span { flex: 1; }
.novos b { color: var(--ink); }
.novos .chamada {
  flex: none; font-weight: 600; color: var(--ink); font-size: 12px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 7px; padding: 4px 10px;
}

.barra { display: flex; flex-direction: column; gap: 10px; }
.procura { display: flex; gap: 6px; }
.procura input[type="search"] { flex: 1; min-width: 0; }
.procura select { font-size: 12.5px; padding: 6px 4px; flex: none; }
input[type="search"], input[type="text"], input[type="password"], select, textarea {
  font: inherit; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
textarea { width: 100%; resize: vertical; min-height: 96px; line-height: 1.5; }
input[type="search"] { width: 100%; }

.peneira { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filtros { display: flex; gap: 4px; flex-wrap: wrap; }
.filtros a {
  text-decoration: none; color: var(--slate); font-size: 12.5px;
  padding: 5px 9px; border-radius: 20px; border: 1px solid transparent;
}
.filtros a:hover { background: var(--sunken); }
.filtros a[aria-current="true"] {
  background: var(--sunken); border-color: var(--line); color: var(--ink); font-weight: 550;
}

/* ── a lista de contatos ─────────────────────────────────────────── */

.lista { flex: 1; overflow-y: auto; min-height: 0; }

.linha {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.linha:hover { background: var(--private-bg); }
/* O contato aberto se anuncia só pelo fundo. Uma faixa colorida na borda era
   uma segunda coisa dizendo o mesmo, e brigava com o ícone de estado ao lado. */
.linha[aria-current="true"] { background: var(--sunken); }

/* O avatar: iniciais num círculo neutro, nunca a foto de perfil. Uma coluna de
   rostos vaza no ombro de quem passa atrás, e buscar a foto significaria pedir
   ao WhatsApp — escrita, num socket que promete só ler. Fundo igual para todos:
   cor por contato seria um arco-íris sem significado numa tela onde a cor já
   quer dizer uma coisa só. */
.avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sunken); color: var(--slate);
  font-size: 12.5px; font-weight: 620; letter-spacing: .02em;
}

.quem {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0 12px 14px; min-width: 0; text-decoration: none;
}
.quem .dados { min-width: 0; flex: 1; }
.quem-topo { display: flex; align-items: baseline; gap: 8px; }
/* O negrito da lista quer dizer UMA coisa: "ainda não decidi sobre este". Quem
   já teve uma decisão fica no peso normal — numa coluna de quarenta contatos, o
   que precisa saltar é o que sobrou por ler, e não o nome de todo mundo. */
.nome { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nome.nova { font-weight: 700; }
.quando { font-size: 11.5px; color: var(--quiet);
          white-space: nowrap; margin-left: auto; font-variant-numeric: tabular-nums; }
.previa { color: var(--quiet); font-size: 12.5px; margin-top: 2px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detalhe-linha { font-size: 11.5px; color: var(--quiet);
                 display: flex; gap: 9px; margin-top: 3px; flex-wrap: wrap; }
.etiqueta {
  font-family: var(--sans); font-size: 10.5px; padding: 0 6px; border-radius: 20px;
  background: var(--sunken); color: var(--slate); border: 1px solid var(--line);
}

/* O estado de cada linha: sinal, não controle. Cadeado fechado é o padrão de
   tudo que chega, e por isso ele é quieto — quem precisa se destacar é o que
   está aberto para o assistente.

   Os dois são uma CHAPA OPACA, e não um ícone solto. O cadeado não tinha fundo,
   e o resultado era ele boiando dentro da prévia: uma frase mais longa encosta
   nele e as duas coisas viram uma mancha só. O fundo é a superfície da própria
   linha, com um fio de borda — assim ele continua opaco quando a linha muda de
   cor (no hover e na conversa aberta), sem virar um botão. */
.selo-linha {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; margin-right: 12px; border-radius: 8px;
  color: var(--quiet);
  background: var(--surface); border: 1px solid var(--line);
}
.selo-linha svg { width: 16px; height: 16px; }

/* As faíscas são o que se procura ao correr o olho pela coluna — "o que a IA
   lê?" —, e por isso são maiores que o cadeado. É a única assimetria do par, e
   ela é de propósito: o padrão não precisa ser encontrado, a exceção sim. */
.selo-linha.compartilhado {
  color: var(--share); background: var(--share-bg); border-color: var(--share-line);
}
.selo-linha.compartilhado svg { width: 21px; height: 21px; }

/* Ignorado: borda tracejada, porque nao ha nada solido sendo guardado ali. E
   cinza, e nao vermelho — nao e erro nem perigo, e uma escolha do dono. */
.selo-linha.ignorado { border-style: dashed; color: var(--quiet); background: var(--ground); }

/* ── o interruptor de compartilhar ───────────────────────────────── */

/* É um botão de formulário de verdade, e não um checkbox com JS: sem script a
   página continua alternando o estado. O role/aria-checked é o que faz o leitor
   de tela ouvir "interruptor, ligado" em vez de "botão". */
.interruptor {
  /* Sem margem propria: a chave e o ULTIMO elemento do grupo e fica presa na
     borda direita — e o gap do .direita ja da o dobro de distancia ate o
     proximo botao. Com ela na frente do rotulo, os dois nomes de tamanhos
     diferentes ("Privado" e "Compartilhado com a IA") faziam a chave pular de
     lugar a cada clique, debaixo do dedo de quem acabou de acerta-la. */
  position: relative; flex: none; cursor: pointer; padding: 0; margin: 0;
  width: 38px; height: 22px; border-radius: 20px;
  background: var(--line); border: 1px solid var(--line);
  transition: background .14s, border-color .14s;
}
.interruptor .bolinha {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .14s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .35);
}
.interruptor[aria-checked="true"] { background: var(--share); border-color: var(--share); }
.interruptor[aria-checked="true"] .bolinha { left: 18px; }
.interruptor:hover { border-color: var(--quiet); }

/* O rótulo é o estado por escrito, e fica colado no interruptor. É ele que
   torna desnecessária qualquer pílula repetindo a mesma palavra ao lado. */
/* Interruptor e rótulo são uma coisa só: 10px entre eles, e o dobro até o
   próximo elemento. É o espaçamento que diz quem pertence a quem. */
.chaveiro { display: flex; align-items: center; gap: 10px; }
.rotulo-chave {
  font-size: 13px; font-weight: 550; color: var(--slate); cursor: pointer;
  white-space: nowrap; margin: 0;
}
.chaveiro:has(.interruptor[aria-checked="true"]) .rotulo-chave { color: var(--share); }
/* Ignorada nao tem interruptor: o estado por escrito ocupa o lugar dele. */
.rotulo-chave.apagado { color: var(--quiet); cursor: default; }

/* ── a conversa ──────────────────────────────────────────────────── */

.conversa { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.conversa-topo {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.conversa-topo .titulo { min-width: 0; }
.conversa-topo .titulo span { display: block; font-size: 12px; color: var(--quiet);
                              padding-left: 7px; }

/* O titulo e um campo, e ele finge nao ser ate alguem passar o mouse. Mesmo
   tamanho e peso do texto que ele substituiu — se a borda aparecesse sempre, o
   cabecalho de uma tela de LEITURA viraria um formulario. */
/* input.nome-editavel, e nao .nome-editavel: a regra global de input logo acima
   e input[type="text"], que tem especificidade MAIOR que uma classe sozinha —
   sem o elemento na frente, a borda cinza dela vencia e o titulo nascia com
   cara de formulario. */
input.nome-editavel {
  display: block; width: 100%; font: inherit; font-size: 16px; font-weight: 600;
  color: var(--ink); background: none; border: 1px solid transparent;
  border-radius: 7px; padding: 2px 6px; margin: 0 0 1px -7px;
  overflow: hidden; text-overflow: ellipsis;
}
input.nome-editavel:hover { border-color: var(--line); }
input.nome-editavel:focus { border-color: var(--quiet); background: var(--surface); outline: none; }
/* Conversa sem nome: o telefone aparece como placeholder, em cinza, para nao se
   passar por um nome que alguem escolheu. */
input.nome-editavel::placeholder { color: var(--quiet); font-weight: 500; }
.conversa-topo .direita { margin-left: auto; display: flex; align-items: center; gap: 22px; }

.voltar { display: none; }

/* O fio e as setas dividem a mesma caixa: as setas sao absolutas em relacao a
   ela, entao ficam paradas enquanto o fio rola por baixo. */
.fio-area { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fio { flex: 1; overflow-y: auto; padding: 20px 22px 40px; min-height: 0; }

/* Uma alinhada ao topo, outra ao pe — cada uma perto da borda para onde leva.
   Elas somem quando nao teriam para onde ir (ver o script do layout): a
   conversa curta nao ganha botao nenhum, e quem ja esta no fim nao ve a seta
   de descer. */
.rolar {
  position: absolute; right: 20px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--slate); background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
}
.rolar:hover { color: var(--ink); background: var(--sunken); }
.rolar svg { width: 17px; height: 17px; }
.rolar-topo { top: 14px; }
.rolar-fim { bottom: 14px; }
.rolar[hidden] { display: none; }

@media (prefers-color-scheme: dark) {
  .rolar { box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
}

/* Balões: alinhados à direita o que foi meu, à esquerda o resto. Verde não
   entra aqui — nesta tela ele significa "o assistente lê", e um balão verde
   diria isso de uma mensagem só. */
.dupla { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.dupla.minha { flex-direction: row-reverse; }

.bolha {
  max-width: min(560px, 78%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px; padding: 9px 13px 7px;
  overflow-wrap: anywhere;
}
.dupla.minha .bolha { background: var(--sunken); border-radius: 14px 14px 4px 14px; }

.bolha .quem-falou { display: block; font-size: 11.5px; font-weight: 640;
                     color: var(--slate); margin-bottom: 2px; }
/* pre-wrap só no que a pessoa escreveu: no container, a indentação do próprio
   template viraria linha em branco na tela. */
.bolha .dito { white-space: pre-wrap; }
.bolha .vazio { color: var(--quiet); font-style: italic; }
.bolha .hora { display: block; text-align: right; font-size: 10.5px;
               color: var(--quiet); margin-top: 3px; font-variant-numeric: tabular-nums; }

.bolha img {
  display: block; max-width: min(320px, 100%); border-radius: 8px;
  margin-top: 6px; border: 1px solid var(--line); cursor: zoom-in;
}
/* O tocador. O <audio> nativo continua aí embaixo: enquanto o script não
   roda, é ele que aparece — e é ele que some quando a versão desta casa entra. */
/* A bolha encolhe até o conteúdo, e o tocador pede 300px — sem um piso, uma
   mensagem que é só áudio espremia a barra de progresso a nada. */
.bolha:has(.tocador) { min-width: min(300px, 70vw); }
.tocador { margin-top: 6px; }
.tocador audio { display: block; width: min(300px, 100%); height: 34px; }
.tocador.pronto audio { display: none; }

.tocador-ui {
  display: flex; align-items: center; gap: 11px;
  width: min(300px, 100%); padding: 7px 12px 7px 7px;
  background: var(--private-bg); border: 1px solid var(--line); border-radius: 999px;
}
.tocador-ui .tocar {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: var(--ink); color: var(--ground); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.tocador-ui .tocar svg { width: 15px; height: 15px; }
.tocador-ui .parar { display: none; }
.tocador.tocando .tocar .ir { display: none; }
.tocador.tocando .tocar .parar { display: flex; }

.tocador-ui .trilha {
  flex: 1; height: 4px; border-radius: 4px; background: var(--line);
  cursor: pointer; min-width: 0;
}
.tocador-ui .progresso {
  height: 100%; width: 0; border-radius: 4px; background: var(--ink);
}
.tocador.quebrado .tocador-ui { opacity: .6; }
.tocador.quebrado .tocar { cursor: not-allowed; background: var(--quiet); }
.tocador-ui .tempo {
  font-size: 11.5px; color: var(--slate); font-variant-numeric: tabular-nums;
  flex: none; min-width: 34px; text-align: right; white-space: nowrap;
}

/* A transcrição é o que o assistente de fato lê — por isso ela é um cartão
   aberto embaixo do áudio, e não uma sanfona que a pessoa precisa lembrar de
   abrir para saber o que está compartilhando. */
.transcricao {
  display: block; margin-top: 8px; font-size: 13.5px;
  background: var(--private-bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px;
}
.etiqueta-transcricao {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--quiet); margin-bottom: 4px;
}
.transcricao .dito { display: block; color: var(--ink); }

.nota { font-size: 11.5px; color: var(--quiet); margin: 5px 0 0; }
.nao-suportado {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 12.5px; color: var(--slate);
  background: var(--private-bg); border: 1px dashed var(--line);
  border-radius: 8px; padding: 8px 11px;
}
.nao-suportado svg { width: 16px; height: 16px; flex: none; }

/* A lixeira de cada mensagem aparece no hover. Ela existe para tirar uma senha
   ou um dado bancário de dentro da conversa antes de o assistente ler. */
.lixeira { display: flex; align-self: center; }
.lixeira button {
  border: 0; background: none; padding: 5px; border-radius: 7px; cursor: pointer;
  color: var(--quiet); display: flex; opacity: 0; transition: opacity .12s, color .12s;
}
.dupla:hover .lixeira button, .lixeira button:focus-visible { opacity: 1; }
.lixeira button:hover { color: var(--danger); background: var(--danger-bg); }
.lixeira svg { width: 15px; height: 15px; }
/* Sem mouse não há hover: no celular a lixeira fica visível, mas apagada. */
@media (hover: none) {
  .lixeira button { opacity: .5; }
}

/* ── modais ──────────────────────────────────────────────────────── */

/* Os modais são conteúdo pré-renderado na própria página, e os botões que os
   abrem são links de verdade para /conectar e /ajustes. Sem JS, o link leva à
   página; com JS, ele abre aqui mesmo. As duas portas mostram a mesma view. */
dialog.modal {
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  color: var(--ink); padding: 0; max-width: 620px; width: calc(100vw - 32px);
  max-height: calc(100dvh - 64px); box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}
dialog.modal::backdrop { background: rgba(15, 23, 42, .45); }
.modal-topo {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
  background: var(--surface); border-radius: 14px 14px 0 0;
}
.modal-topo strong { font-size: 15px; }
.modal-topo .fechar { margin-left: auto; }
.modal-corpo { padding: 20px; overflow-y: auto; }
.modal-corpo .limite { font-size: 18px; }
.modal-corpo h2:first-child { margin-top: 0; }

dialog.lightbox { border: 0; background: none; padding: 0; max-width: 96vw; max-height: 92dvh; }
dialog.lightbox::backdrop { background: rgba(15, 23, 42, .8); }
dialog.lightbox img { display: block; max-width: 96vw; max-height: 92dvh; border-radius: 10px; }

/* ── cartões, formulários, botões ────────────────────────────────── */

.cartao { border: 1px solid var(--line); border-radius: var(--radius);
          background: var(--surface); padding: 22px; }
.cartao + .cartao { margin-top: 16px; }
.modal-corpo .cartao { padding: 16px; background: var(--private-bg); }
.cartao > h2:first-child { margin-top: 0; }

.lampada { display: flex; align-items: center; gap: 11px; font-weight: 550; margin: 0; }
.lampada::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--quiet); box-shadow: 0 0 0 4px var(--sunken); flex: none;
}
.lampada.no-ar::before { background: var(--share); box-shadow: 0 0 0 4px var(--share-bg); }
.lampada.ruim::before  { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-bg); }

.qr { display: block; margin: 22px auto 6px; width: 264px; height: 264px;
      image-rendering: pixelated; background: #fff; padding: 12px; border-radius: 8px;
      border: 1px solid var(--line); }

label { display: block; font-size: 13px; font-weight: 550; margin: 16px 0 5px; }
label .ajuda { display: block; font-weight: 400; color: var(--slate); font-size: 12.5px; margin-top: 2px; }
form.ajustes input[type="text"], form.ajustes input[type="password"],
form.ajustes select, form.ajustes textarea { width: 100%; max-width: 460px; }

button.acao, a.acao {
  font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; text-decoration: none;
  display: inline-block; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--ground);
}
button.acao.calma, a.acao.calma { background: var(--surface); color: var(--ink); border-color: var(--line); }
button.acao.perigo, a.acao.perigo { background: var(--surface); color: var(--danger); border-color: var(--danger); }
button.acao.miuda, a.acao.miuda { font-size: 12.5px; padding: 6px 12px; }
button.acao:hover, a.acao:hover { opacity: .9; }
.acoes { display: flex; gap: 10px; margin-top: 22px; align-items: center; flex-wrap: wrap; }

.chave:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--share); outline-offset: 2px;
}

code, .codigo {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 7px;
}
code { padding: 2px 6px; }
.codigo { display: block; padding: 13px 15px; white-space: pre-wrap;
          overflow-wrap: anywhere; margin: 10px 0 0; }

/* O recado é neutro de propósito. Verde nesta tela quer dizer "o assistente lê";
   pintar de verde um aviso que fala de outra coisa gasta a única cor que
   significa alguma coisa aqui. */
.aviso { border-left: 3px solid var(--quiet); background: var(--private-bg);
         padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: 14px; margin: 18px 0;
         color: var(--ink); }
.faixa-ignorado, .faixa-juntar { margin: 0; border-radius: 0; border-left: 0;
                                 border-bottom: 1px solid var(--line); font-size: 13px; }
.item-menu { text-decoration: none; }

.perigo-zona { border: 1px solid var(--danger); border-radius: var(--radius);
               background: var(--danger-bg); padding: 18px; margin-top: 16px; }
.perigo-zona h2 { color: var(--danger); margin-top: 0; }
.perigo-zona .sub { color: var(--slate); }

.vazio-de-tudo { text-align: center; padding: 52px 24px; color: var(--slate);
                 display: flex; flex-direction: column; align-items: center;
                 justify-content: center; height: 100%; }
.vazio-de-tudo strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; }
.vazio-de-tudo p { max-width: 46ch; margin: 0 0 6px; }

/* ── importar uma conversa antiga ────────────────────────────────── */

.arquivo { display: block; width: 100%; max-width: 460px; font: inherit; font-size: 13.5px; }
.arquivo::file-selector-button {
  font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; margin-right: 12px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.arquivo::file-selector-button:hover { background: var(--sunken); }

/* Os fatos do arquivo numa linha só. Eles se separam por espaco, e nao por
   pilulas: sao quatro dados neutros, e enfeitar um deles diria que ele importa
   mais que os outros. */
.resumo { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 14px;
          color: var(--slate); }
.resumo b { color: var(--ink); font-weight: 600; }
.pista { font-size: 12.5px; color: var(--quiet); margin: 8px 0 0; }
.pista b { color: var(--slate); font-weight: 600; }

.conferir select, .conferir input[type="text"] { width: 100%; max-width: 460px; }

.escolhas { list-style: none; margin: 6px 0 0; padding: 0;
            border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.escolhas li + li { border-top: 1px solid var(--line); }
.escolhas label { display: flex; align-items: center; gap: 11px; margin: 0;
                  padding: 11px 14px; font-size: 14px; font-weight: 450; cursor: pointer; }
.escolhas label:hover { background: var(--sunken); }
.escolhas input { flex: none; margin: 0; accent-color: var(--ink); }
/* Nome de contato do WhatsApp e texto de estranho: pode ser enorme, e nao pode
   empurrar a contagem para fora da caixa. */
.escolhas .quem-fala { min-width: 0; overflow: hidden;
                       text-overflow: ellipsis; white-space: nowrap; }
.escolhas .quanto { margin-left: auto; font-size: 12.5px; color: var(--quiet);
                    padding-left: 12px; text-align: right; }

/* As primeiras mensagens, para a pessoa reconhecer a conversa de relance. Nao e
   o fio: cada uma cabe numa linha e o resto se corta. */
.amostra { margin: 14px 0 0; padding: 13px 15px; border-radius: 8px;
           background: var(--private-bg); border: 1px solid var(--line); font-size: 13px; }
.amostra p { display: flex; gap: 10px; margin: 0 0 7px; }
.amostra p:last-child { margin-bottom: 0; }
.amostra .em { flex: none; color: var(--quiet); font-size: 12px; }
.amostra .dizente { flex: none; font-weight: 600; max-width: 12ch;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amostra .fala { color: var(--slate); overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }

/* ── o menu de mais acoes (details/summary, sem script) ──────────── */

details.menu { position: relative; }
details.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; color: var(--quiet);
}
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover { background: var(--sunken); color: var(--ink); }
details.menu[open] > summary { background: var(--sunken); color: var(--ink); }
details.menu > summary svg { width: 18px; height: 18px; }

.menu-corpo {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 274px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
}
@media (prefers-color-scheme: dark) {
  .menu-corpo { box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
}

/* Cada item diz numa linha o que faz. Era isso que faltava quando os dois
   botoes vermelhos ficavam soltos no cabecalho, parecidos demais. */
.item-menu {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; background: none; border: 0; border-radius: 7px; padding: 9px 11px;
}
.item-menu:hover { background: var(--sunken); }
.item-menu b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.item-menu span { display: block; font-size: 11.5px; color: var(--quiet); margin-top: 2px; }
.item-menu.perigo b { color: var(--danger); }
.item-menu.perigo:hover { background: var(--danger-bg); }

/* ── a triagem dos contatos novos ────────────────────────────────── */

.cartao.triagem { padding: 16px 18px; }
.cartao.triagem + .cartao.triagem { margin-top: 12px; }
.triagem-quem { display: flex; align-items: flex-start; gap: 12px; }
.triagem-quem .dados { min-width: 0; flex: 1; }
.triagem-quem .nome { display: block; font-weight: 600; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }
.triagem-quem .previa { display: block; }
.triagem-quem .detalhe-linha a { color: var(--slate); }

/* As tres posicoes lado a lado. E o unico lugar da interface onde elas se veem
   juntas, e e de proposito: e o momento em que dá para compara-las. */
.escada { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.degrau {
  display: flex; flex-direction: column; gap: 3px; margin: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  background: var(--surface); font-weight: 400;
}
.degrau:hover { background: var(--sunken); }
.degrau input { position: absolute; opacity: 0; pointer-events: none; }
.degrau-topo { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--slate); }
.degrau-topo svg { width: 16px; height: 16px; flex: none; }
.degrau-topo b { font-weight: 600; }
.degrau-ajuda { font-size: 11.5px; color: var(--quiet); line-height: 1.35; }

/* O escolhido se anuncia pela borda e pelo fundo — e so o compartilhar puxa o
   verde, porque so ele muda o que o assistente le. */
.degrau:has(input:checked) { border-color: var(--quiet); background: var(--private-bg); }
.degrau:has(input:checked) .degrau-topo { color: var(--ink); }
.degrau-exposta:has(input:checked) {
  border-color: var(--share-line); background: var(--share-bg);
}
.degrau-exposta:has(input:checked) .degrau-topo { color: var(--share); }
.degrau:has(input:focus-visible) { outline: 2px solid var(--share); outline-offset: 2px; }

@media (max-width: 560px) {
  .escada { grid-template-columns: 1fr; }
}

/* ── entrar e o primeiro acesso ──────────────────────────────────── */

.entrar { max-width: 380px; margin: 10vh auto; }
/* Com o indicador de etapas em cima, a coluna precisa caber as quatro. */
.entrar.primeiro-acesso { max-width: 480px; margin-top: 8vh; }
.entrar .marca { font-size: 13px; display: block; margin-bottom: 24px; }
.entrar input { width: 100%; }
.entrar button { width: 100%; margin-top: 14px; }
.erro { color: var(--danger); font-size: 13.5px; margin-top: 10px; }

/* O primeiro acesso é um assistente de quatro etapas: quem acabou de instalar
   isto não deveria ter que descobrir sozinho o que falta fazer. */
.passos { display: flex; align-items: center; gap: 0; margin: 0 0 26px; }
.passo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--quiet); }
.passo .bolota {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 640;
  border: 1px solid var(--line); background: var(--surface); color: var(--quiet);
}
.passo.feito .bolota { background: var(--share-bg); border-color: var(--share-line); color: var(--share); }
.passo.agora { color: var(--ink); font-weight: 600; }
.passo.agora .bolota { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.passo .risco { width: 26px; height: 1px; background: var(--line); margin: 0 8px; }
.passo:last-child .risco { display: none; }
.passo .nome-passo { white-space: nowrap; }

.wizard { max-width: 560px; margin: 7vh auto; padding: 0 20px 60px; }
.wizard .cartao { padding: 26px; }

/* ── telas estreitas ─────────────────────────────────────────────── */

/* Duas colunas não cabem num celular: mostra-se a lista, ou a conversa, e o
   servidor já sabe qual das duas porque a conversa aberta está na URL. */
@media (max-width: 900px) {
  .quadro { grid-template-columns: 1fr; }
  .coluna { border-right: 0; }
  body.painel.com-conversa .coluna { display: none; }
  body.painel:not(.com-conversa) .conversa { display: none; }
  .voltar { display: inline-flex; }
}

@media (max-width: 620px) {
  main { padding: 22px 14px 60px; }
  .limite { font-size: 21px; }
  .topo { gap: 8px; padding: 0 12px; }
  .marca { font-size: 14.5px; }
  /* Num celular sai o nome da conta e fica a etiqueta: quem está no celular
     sabe de quem é a conta, e o que ele precisa saber é se está no ar. */
  .estado { padding: 5px 6px; margin-right: 0; }
  .estado .quem-conectado { display: none; }
  .acoes-topo .rotulo-conectar { display: none; }
  .fio { padding: 14px 14px 30px; }
  .bolha { max-width: 86%; }
  .conversa-topo { padding: 10px 14px; }
  .passo .nome-passo { display: none; }
  .passo .risco { width: 18px; }
  .qr { width: min(264px, 78vw); height: auto; }
  .wizard { margin: 3vh auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}