/* NEXUS TRANSLATE — identidade Nexus. Cores do banco de marca (BRAND). */
:root{
  --nexus:#2f81f7; --nexus-claro:#5ac8ff; --nexus-fundo:#0b57c4;
  --bg:#0f1216; --bg2:#161b22; --bg3:#1c232c; --linha:#252d38;
  --txt:#e6edf3; --txt2:#8b97a6; --txt3:#5d6875;
  --eu:#1f4d8f; --eu2:#26588f;
  --ok:#3fb950; --alerta:#d29922; --erro:#f85149;
  --raio:14px;
}
html[data-tema="claro"]{
  --bg:#f6f8fa; --bg2:#ffffff; --bg3:#eef2f6; --linha:#d8dee4;
  --txt:#1f2328; --txt2:#5a6672; --txt3:#8c959f;
  --eu:#dbeafe; --eu2:#c7dcfb;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none}

/* ---------- a área segura do aparelho ----------
 *
 * Instalado como aplicativo no iPhone, com `viewport-fit=cover` e a barra de
 * status translúcida, a página desenha a TELA INTEIRA — inclusive por baixo do
 * relógio, do sinal e do entalhe. Isso é de propósito: é o que faz o app
 * parecer nativo em vez de uma página dentro de uma moldura.
 *
 * Só funciona se o topo reservar o espaço que o próprio sistema informa em
 * `env(safe-area-inset-top)`. Estava faltando, e o nome da conversa ficava
 * escrito por cima do relógio. Visto em 21/08/2026, no iPhone do Janser.
 *
 * A reserva mora AQUI, no body, e não em cada cabeçalho, por um motivo
 * prático: `.marca`, `.topo` e a barra de "sem conexão" podem estar visíveis
 * ao mesmo tempo, e cada uma reservando por conta própria daria três vezes o
 * mesmo espaço. Uma vez, no pai, resolve para todas.
 *
 * O fundo do body vira `--bg2`, que é a cor dos DOIS cabeçalhos: assim a faixa
 * do relógio continua parecendo parte do cabeçalho, e não uma tira solta.
 *
 * As laterais entram para o iPhone deitado, onde o entalhe come um dos lados.
 * O rodapé de escrever já reservava o inset de baixo desde a Fase 3.
 */
body{
  background:var(--bg2);
  padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
button,input,select,textarea{font-family:inherit}
.oculto{display:none !important}

.tel{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:320px 1fr;
  /* desconta o que o body reservou em cima, senao a tela fica mais alta que o
     aparelho e o campo de escrever some para fora da borda de baixo */
  height:calc(100dvh - env(safe-area-inset-top))}

/* ---------- coluna esquerda ---------- */
.lista{background:var(--bg2);border-right:1px solid var(--linha);display:flex;flex-direction:column;min-height:0}
.marca{padding:14px 16px;border-bottom:1px solid var(--linha);display:flex;align-items:center;gap:10px}
/* A marca agora é UMA imagem, `/icone.svg`, e não um `<path>` copiado em
   quatro lugares. Um arquivo, uma verdade: trocar a marca é trocar o arquivo.
   `object-fit:contain` porque o vetor oficial não é quadrado (5325x5125): sem
   ele a caixa quadrada esticaria o desenho 4% na vertical, que é pouco para
   alguém apontar e o bastante para ficar torto. */
.logo{width:32px;height:32px;flex:0 0 auto;object-fit:contain}
.marca h1{font-size:15px;margin:0;font-weight:650;letter-spacing:.2px}
.marca small{display:block;color:var(--txt2);font-size:11px;font-weight:400}
.chip-botao{margin-left:auto;background:var(--bg3);border:1px solid var(--linha);color:var(--txt2);
  border-radius:20px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer}
.busca{padding:10px 12px;border-bottom:1px solid var(--linha);display:flex;gap:8px}
.busca input{flex:1;background:var(--bg3);border:1px solid var(--linha);color:var(--txt);
  border-radius:10px;padding:9px 12px;font-size:13px;outline:none}
.convs{overflow-y:auto;flex:1;min-height:0}
.av.abrivel{cursor:zoom-in}
.conv{display:flex;gap:11px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--linha);align-items:center}
.conv:hover{background:var(--bg3)}
.conv.sel{background:var(--bg3);box-shadow:inset 3px 0 0 var(--nexus)}
.av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-weight:700;font-size:14px;color:#fff}
/* O mesmo circulo, agora com foto dentro. `object-fit:cover` e o que impede a
   foto retangular de sair achatada; sem ele o rosto fica esticado. */
img.av{object-fit:cover;display:block}
/* ---------- o convite de instalar ----------
   Flutua acima de tudo, no pe da tela, e respeita a area segura de baixo para
   nao ficar por cima do risquinho do iPhone. Some quando a pessoa instala ou
   diz "agora nao". */
.instalar-convite{position:fixed;left:12px;right:12px;z-index:60;
  bottom:calc(12px + env(safe-area-inset-bottom));
  max-width:520px;margin:0 auto;display:flex;align-items:center;gap:12px;
  background:var(--bg2);border:1px solid var(--linha);border-radius:14px;
  padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.instalar-convite .ic-logo{width:30px;height:30px;flex:0 0 auto;object-fit:contain}
.instalar-convite .ic-txt{flex:1;min-width:0;line-height:1.35}
.instalar-convite .ic-txt b{display:block;font-size:13.5px;font-weight:650}
.instalar-convite .ic-txt span{display:block;font-size:11px;color:var(--txt2)}
.instalar-convite .ic-bts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ic-sim{background:var(--nexus);border:0;color:#fff;border-radius:20px;
  padding:7px 14px;font-size:12.5px;font-weight:650;cursor:pointer}
@media(max-width:460px){
  .instalar-convite{flex-wrap:wrap}
  .instalar-convite .ic-bts{width:100%;justify-content:flex-end}
}
/* Enquanto o convite esta na tela, a conversa e a lista abrem espaco por
   baixo. Sem isso ele fica POR CIMA do campo de escrever, e o convite para
   instalar impede a pessoa de fazer a unica coisa que ela veio fazer. */
.tel.com-convite .escrever{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.tel.com-convite .msgs{padding-bottom:8px}
.tel.com-convite .convs{padding-bottom:100px}
@media(max-width:460px){
  .tel.com-convite .escrever{padding-bottom:calc(130px + env(safe-area-inset-bottom))}
  .tel.com-convite .convs{padding-bottom:140px}
}

/* A marca vira botao de menu. Sem cara de botao ate o mouse chegar perto:
   ela continua sendo a marca, e vira porta so quando a pessoa procura uma. */
.marca-menu{background:none;border:0;padding:0;margin:0;cursor:pointer;display:flex;
  align-items:center;border-radius:10px;flex:0 0 auto}
.marca-menu:hover{opacity:.75}

/* O balao de mensagens por ler. */
.balao{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:20px;
  background:var(--nexus);color:#fff;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* A barra do tom, logo acima do campo de escrever. Discreta: ela informa o
   que esta valendo, e nao disputa espaco com a conversa. */
.barra-tom{display:flex;align-items:center;gap:8px;padding:6px 14px 0;background:var(--bg2)}
.tom-chip{background:var(--bg3);border:1px solid var(--linha);color:var(--txt2);
  border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer}
.tom-chip.ligado{border-color:var(--nexus);color:var(--nexus)}
.tom-chip:hover{border-color:var(--nexus)}

/* Quem so acompanha ve isto no lugar do campo de escrever. */
.so-leitura{padding:14px;border-top:1px solid var(--linha);background:var(--bg2);
  text-align:center;font-size:12px;color:var(--txt2);line-height:1.5}

/* A foto grande. 350 no computador; no celular, o que couber com folga. */
.folha-foto{text-align:center}

/* O ✕ das folhas de imagem.
   MOTIVO DE EXISTIR: até a 0.20.0 a única saída era tocar no fundo escuro, e
   com a imagem ocupando quase a tela inteira esse fundo virava uma faixa fina.
   Quem está com a foto na cara procura um botão. */
.fechar-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--linha);background:var(--bg3);color:var(--txt);font-size:15px;
  line-height:1;cursor:pointer;z-index:2}
.fechar-x:hover{border-color:var(--nexus);color:var(--nexus)}
.folha-foto,.folha-visor{position:relative}

/* O VISOR DE IMAGEM DO ANEXO.
   Sobe por cima da conversa em vez de navegar para /api/arquivos/:id, que no
   aplicativo instalado (standalone, sem barra de endereço) prendia a pessoa. */
.folha-visor{padding-top:14px}
.visor-topo{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-right:46px}
.visor-nome{flex:1;min-width:0;font-size:12.5px;color:var(--txt2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.visor-baixar{width:34px;height:34px;border-radius:50%;border:1px solid var(--linha);
  background:var(--bg3);color:var(--txt);display:grid;place-items:center;font-size:15px;
  text-decoration:none;flex:0 0 auto}
.visor-baixar:hover{border-color:var(--nexus);color:var(--nexus)}
.painel.visor .folha{max-width:760px}
.imagem-grande{display:block;max-width:100%;max-height:72dvh;margin:0 auto;
  border-radius:12px;background:var(--bg3);object-fit:contain}
.foto-grande{width:350px;height:350px;max-width:min(88vw,350px);max-height:min(88vw,350px);
  object-fit:cover;border-radius:16px;display:block;margin:6px auto 0;background:var(--bg3)}
.foto-nome{margin-top:12px;font-size:14px;font-weight:650}

/* Etiqueta pequena ao lado do nome: admin, fora, voce. */
.etiq{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:20px;font-size:10px;
  font-weight:700;background:var(--bg3);border:1px solid var(--linha);color:var(--txt2);
  vertical-align:middle}
.conv-txt{min-width:0;flex:1}
.conv-nome{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.conv-prev{font-size:12px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.hora{font-size:10px;color:var(--txt3)}
.badge{background:var(--nexus);color:#fff;border-radius:20px;font-size:10px;font-weight:700;padding:1px 6px}
.chip-idi{font-size:9px;background:var(--bg);border:1px solid var(--linha);color:var(--txt2);
  border-radius:5px;padding:1px 5px;font-weight:700;letter-spacing:.3px}

/* ---------- conversa ---------- */
.conversa{display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.topo{padding:11px 16px;border-bottom:1px solid var(--linha);display:flex;align-items:center;gap:11px;background:var(--bg2)}
.voltar{display:none;background:none;border:0;color:var(--txt);font-size:20px;cursor:pointer;padding:0 4px}
@media(max-width:820px){.voltar{display:block}}
.topo-info{flex:1;min-width:0}
.topo-nome{font-size:15px;font-weight:650}
.topo-sub{font-size:11px;color:var(--txt2);margin-top:1px;display:flex;align-items:center;gap:5px}
/* Online e digitando dividem a MESMA linha, e nunca aparecem juntos: duas
   informações empilhadas em cima do nome da pessoa viram ruído. */
.topo-sub.online{color:var(--ok,#3fb950)}
.topo-sub.digitando{color:var(--nexus)}
.ponto{width:7px;height:7px;border-radius:50%;background:#3fb950;flex:0 0 auto}

/* O pontinho verde na lista, colado no canto da foto. Só em conversa de duas
   pessoas: num grupo ele responderia "alguém dos oito". */
.av-caixa{position:relative;flex:0 0 auto;display:flex}
.av-caixa.online::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
  border-radius:50%;background:#3fb950;border:2px solid var(--bg2)}
.icone{background:none;border:0;color:var(--txt2);font-size:17px;cursor:pointer;padding:6px}
.duplex{display:flex;align-items:center;gap:9px;background:var(--bg3);border:1px solid var(--linha);
  border-radius:11px;padding:5px 11px;cursor:pointer;color:var(--txt)}
.duplex:hover{border-color:var(--nexus)}
.duplex .lado{display:flex;flex-direction:column;line-height:1.15}
.duplex .lado b{font-size:12.5px;font-weight:700;letter-spacing:.4px}
.duplex .lado i{font-size:8.5px;color:var(--txt3);font-style:normal}
.duplex .seta{color:var(--nexus);font-size:14px}
@media(max-width:520px){.duplex .lado i{display:none}}

.msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px;min-height:0}
.dia,.marco{align-self:center;color:var(--txt3);font-size:10.5px}
.dia{background:var(--bg3);padding:3px 11px;border-radius:20px;border:1px solid var(--linha)}
.marco{display:flex;align-items:center;gap:9px;width:100%}
.marco::before,.marco::after{content:"";flex:1;height:1px;background:var(--linha)}
.m{max-width:78%;display:flex;flex-direction:column;gap:3px}
.m.meu{align-self:flex-end;align-items:flex-end}
.autor{font-size:11px;color:var(--txt2);font-weight:600;padding:0 3px}
.bolha{background:var(--bg2);border:1px solid var(--linha);padding:9px 13px;border-radius:var(--raio);
  border-bottom-left-radius:4px}
.m.meu .bolha{background:var(--eu);border-color:var(--eu2);
  border-bottom-left-radius:var(--raio);border-bottom-right-radius:4px}
html[data-tema="claro"] .m.meu .bolha{color:#0b2a5b}
.txt{font-size:14.5px;word-wrap:break-word;white-space:pre-wrap}
.orig{display:none;margin-top:8px;padding-top:8px;border-top:1px dashed var(--linha);
  font-size:13.5px;color:var(--txt2);font-style:italic;white-space:pre-wrap}
.m.abrir .orig{display:block}
.rodape{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:10.5px;color:var(--txt3);flex-wrap:wrap}
.trad{background:none;border:0;color:var(--nexus);font-size:10.5px;font-weight:600;cursor:pointer;padding:0}
.trad:hover{text-decoration:underline}
.pulsando{display:inline-flex;gap:3px;align-items:center}
.pulsando i{width:4px;height:4px;border-radius:50%;background:var(--txt3);animation:p 1.2s infinite}
.pulsando i:nth-child(2){animation-delay:.2s}.pulsando i:nth-child(3){animation-delay:.4s}
@keyframes p{0%,60%,100%{opacity:.25}30%{opacity:1}}
.bolha.falhou{border-color:var(--erro)}
.retry{background:var(--erro);border:0;color:#fff;border-radius:7px;padding:3px 9px;
  font-size:10.5px;font-weight:700;cursor:pointer}

/* ---------- citação (responder) ---------- */
/* O botão fica NO CANTO DE CIMA da bolha, e não numa barra separada: barra de
   ação por mensagem custaria uma linha em cada bolha da conversa inteira.
   No computador ele só aparece ao passar o mouse; no celular, onde não existe
   "passar o mouse", ele fica sempre visível e discreto. */
.bolha{position:relative}
.responder{position:absolute;top:2px;right:4px;background:none;border:0;color:var(--txt3);
  font-size:13px;line-height:1;cursor:pointer;padding:3px 5px;border-radius:6px;opacity:.55}
.responder:hover{opacity:1;color:var(--nexus);background:var(--bg3)}
/* O ↩ fica SEMPRE no mesmo canto, na minha bolha e na recebida. Espelhar
   para a esquerda na minha obrigava o olho a procurar o botão duas vezes. */
@media (hover:hover){.responder{opacity:0}.bolha:hover .responder{opacity:.8}}

/* A citação dentro da bolha. A faixa colorida à esquerda é o que faz o olho
   ler "isto é outra mensagem" antes de ler o texto. */
.citacao{display:block;width:100%;text-align:left;background:var(--bg3);border:0;
  border-left:3px solid var(--nexus);border-radius:8px;padding:6px 9px;margin-bottom:7px;
  cursor:pointer;font:inherit;color:var(--txt2)}
.citacao:hover{background:var(--linha)}
.citacao.sumiu{border-left-color:var(--txt3);font-size:11.5px;font-style:italic;cursor:default}
.citacao-quem{display:block;font-size:11px;font-weight:700;color:var(--nexus)}
.citacao-txt{display:-webkit-box;font-size:12.5px;margin-top:2px;overflow:hidden;
  -webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical}
html[data-tema="claro"] .m.meu .citacao{background:rgba(255,255,255,.65)}

/* Pisca uma vez ao chegar na mensagem citada. Sem isto, a tela rola e a pessoa
   fica procurando qual das bolhas era. */
.m.piscar .bolha{animation:piscar 1.5s ease-out}
@keyframes piscar{0%,40%{box-shadow:0 0 0 3px var(--nexus)}100%{box-shadow:0 0 0 0 transparent}}

/* A barra de "estou respondendo", em cima do campo de escrever. */
.barra-resposta{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--bg2);
  border-top:1px solid var(--linha);border-left:3px solid var(--nexus)}
.barra-resposta.oculto{display:none}
.br-txt{flex:1;min-width:0}
.br-quem{font-size:11px;font-weight:700;color:var(--nexus)}
.br-corpo{font-size:12.5px;color:var(--txt2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:1px}
.br-x{background:var(--bg3);border:1px solid var(--linha);color:var(--txt2);border-radius:50%;
  width:28px;height:28px;font-size:13px;cursor:pointer;flex:0 0 auto}
.br-x:hover{border-color:var(--nexus);color:var(--nexus)}

.escrever{padding:11px 14px;border-top:1px solid var(--linha);background:var(--bg2);
  display:flex;align-items:flex-end;gap:9px;padding-bottom:calc(11px + env(safe-area-inset-bottom))}
.escrever textarea{flex:1;background:var(--bg3);border:1px solid var(--linha);color:var(--txt);
  border-radius:20px;padding:10px 15px;font-size:14.5px;resize:none;outline:none;max-height:160px;line-height:1.45}
.acao{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg3);color:var(--txt2);
  font-size:17px;cursor:pointer;flex:0 0 auto}
.acao.enviar{background:var(--nexus);color:#fff}
/* `.dica` continua definida só para HTML de antes da 0.23.0, que ainda tem a
   faixa. No HTML novo ela não existe mais: o texto virou o `title` do PT ⇄ ZH. */
.dica{padding:0 14px 9px;background:var(--bg2);font-size:10.5px;color:var(--txt3)}
.vazio{margin:auto;text-align:center;color:var(--txt3);font-size:13px;padding:40px}

/* ---------- anexos ---------- */
.anexo{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--linha);
  border-radius:10px;padding:9px 11px;margin-bottom:7px;text-decoration:none;color:var(--txt)}
.anexo:hover{border-color:var(--nexus)}
.anexo .ic{width:32px;height:32px;border-radius:8px;background:var(--nexus);display:grid;
  place-items:center;font-size:15px;flex:0 0 auto}
.anexo-nome{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anexo-sub{font-size:10.5px;color:var(--txt2)}
.anexo-img{display:block;margin-bottom:7px;border-radius:10px;overflow:hidden;max-width:260px}
.anexo-img img{display:block;width:100%;height:auto;border-radius:10px}

/* ---------- folhas ---------- */
.painel{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:50;align-items:flex-end;justify-content:center}
.painel.on{display:flex}
.folha{background:var(--bg2);width:100%;max-width:460px;border-radius:18px 18px 0 0;
  padding:20px 20px calc(24px + env(safe-area-inset-bottom));border:1px solid var(--linha);border-bottom:0;
  max-height:86dvh;overflow-y:auto}
.puxador{width:38px;height:4px;background:var(--linha);border-radius:3px;margin:0 auto 16px}
.folha h3{margin:0 0 4px;font-size:16px}
.folha p.sub{margin:0 0 16px;font-size:12px;color:var(--txt2)}
.opc{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--linha)}
.opc:last-child{border-bottom:0}
.opc-t{font-size:13.5px;font-weight:600}.opc-s{font-size:11px;color:var(--txt2);margin-top:2px}
.sel-idi{background:var(--bg3);border:1px solid var(--linha);color:var(--txt);border-radius:9px;
  padding:7px 11px;font-size:12.5px;outline:none}
.aviso{background:rgba(210,153,34,.12);border:1px solid rgba(210,153,34,.35);color:var(--alerta);
  border-radius:10px;padding:10px 12px;font-size:11.5px;margin-top:14px;line-height:1.5}
.aviso.azul{background:rgba(47,129,247,.10);border-color:rgba(47,129,247,.32);color:var(--nexus)}
.pessoa{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--linha);cursor:pointer}
.pessoa:last-child{border-bottom:0}

/* ---------- entrar ---------- */
.entrar{min-height:100dvh;display:grid;place-items:center;padding:24px}
.cartao{width:100%;max-width:380px;background:var(--bg2);border:1px solid var(--linha);
  border-radius:18px;padding:28px 24px}
.cartao .logo{width:52px;height:52px;margin:0 auto 14px;display:block}
.cartao h1{font-size:19px;margin:0 0 4px;text-align:center}
.cartao p.sub{font-size:12.5px;color:var(--txt2);text-align:center;margin:0 0 22px}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:12px;color:var(--txt2);margin-bottom:5px;font-weight:600}
.campo input,.campo select{width:100%;background:var(--bg3);border:1px solid var(--linha);color:var(--txt);
  border-radius:10px;padding:11px 13px;font-size:14.5px;outline:none}
.campo input:focus{border-color:var(--nexus)}
.botao{width:100%;background:var(--nexus);border:0;color:#fff;border-radius:10px;
  padding:12px;font-size:14.5px;font-weight:650;cursor:pointer;margin-top:6px}
.botao:disabled{opacity:.55;cursor:default}
/* Botão de linha inteira, discreto: leva a outra folha, não confirma nada.
   O `.botao` azul cheio prometeria uma ação, e abrir a galeria não é ação. */
.botao-linha{width:100%;background:var(--bg3);border:1px solid var(--linha);color:var(--txt);
  border-radius:10px;padding:11px;font-size:13.5px;font-weight:600;cursor:pointer;
  margin:4px 0 10px;text-align:left}
.botao-linha:hover{border-color:var(--nexus);color:var(--nexus)}

/* ---------- instalar ---------- */
/* Linha já cumprida: continua na lista, apagada. Sumir com ela faria a pessoa
   procurar uma opção que desapareceu sem explicar por quê. */
.menu-item.feito{opacity:.55;cursor:default}
.menu-item.feito:hover{background:transparent}
.inst-h{margin:18px 0 6px;font-size:13px;color:var(--txt2)}
/* A receita DESTE aparelho, em destaque e em primeiro. Três receitas soltas
   fazem todo mundo ler as três para descobrir qual é a sua. */
.inst-daqui{border:1px solid var(--nexus);border-radius:12px;padding:2px 14px 12px;
  margin:14px 0 4px}
.inst-daqui .inst-h{margin-top:12px}
.inst-marca{display:inline-block;margin-top:-11px;background:var(--nexus);color:#fff;
  font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px}

/* ---------- galeria da conversa ---------- */
/* A folha precisa ser referência do ✕, que é posicionado por cima dela. */
.folha{position:relative}
.gal-titulo{margin:14px 0 8px;font-size:12px;color:var(--txt2);font-weight:600}
.gal-titulo:first-child{margin-top:0}
/* Grade que se acomoda sozinha: 3 colunas no celular, mais no computador, sem
   media query — a folha tem largura máxima e o `auto-fill` resolve o resto. */
.gal-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:7px;margin-bottom:6px}
.gal-item{padding:0;border:1px solid var(--linha);border-radius:10px;overflow:hidden;
  background:var(--bg3);cursor:pointer;aspect-ratio:1;display:block}
.gal-item:hover{border-color:var(--nexus)}
/* `cover` porque a grade é quadrada e o desenho técnico é retangular: encaixar
   inteiro deixaria tarja cinza em volta de quase tudo. O visor mostra inteiro. */
.gal-item img{width:100%;height:100%;object-fit:cover;display:block}
.recado{font-size:12.5px;border-radius:9px;padding:10px 12px;margin-bottom:14px}
.recado.erro{background:rgba(248,81,73,.12);border:1px solid rgba(248,81,73,.35);color:var(--erro)}
.recado.ok{background:rgba(63,185,80,.12);border:1px solid rgba(63,185,80,.35);color:var(--ok)}
.barra-off{background:var(--alerta);color:#1a1200;text-align:center;font-size:11.5px;
  font-weight:700;padding:5px}

/* ==========================================================================
   CELULAR — precisa ficar NO FIM do arquivo.
   Estava logo depois de .tel, e a regra `.lista{display:flex}` da secao
   "coluna esquerda", por vir DEPOIS e ter a mesma especificidade, ganhava.
   Resultado: no celular a lista e a conversa apareciam as duas, empilhadas.
   Nenhum dos 25 testes pegou isso, porque todos olhavam comportamento.
   Quem pegou foi a captura de tela.
   ========================================================================== */
@media(max-width:820px){
  .tel{grid-template-columns:1fr}
  .lista{display:none}
  .tel.ver-lista .lista{display:flex}
  .tel.ver-lista .conversa{display:none}
}

/* O meu proprio rosto abre a minha conta, em qualquer lugar da tela. */
.av-eu{cursor:pointer}

/* O Config: cada linha com o seu icone, e o caminho de volta em toda folha
   que nasce dentro dele. Sem o botao de voltar, quem entrava em "Ajustes"
   fechava tudo e tinha de abrir o Config de novo para ver a linha seguinte. */
.menu-ic{display:flex;width:32px;height:32px;flex:0 0 auto;align-items:center;justify-content:center;
  border-radius:9px;background:var(--bg3);border:1px solid var(--linha);color:var(--txt2)}
.menu-ic svg{width:17px;height:17px;fill:currentColor;display:block}
.voltar-cfg{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;padding:6px 11px;
  border:1px solid var(--linha);background:var(--bg3);color:var(--txt2);border-radius:9px;
  font-size:12.5px;font-weight:600;cursor:pointer}
.voltar-cfg:hover{color:var(--txt)}
.voltar-cfg.oculto{display:none}

/* Na lista de gente, o que importa embaixo do nome nao e o e-mail: e em QUE
   grupos aquela pessoa esta comigo. Sao todos, e nao os dois primeiros: quem
   tem muitos grupos e justamente quem precisa ver a lista inteira. */
.badges-grupo{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.badge-grupo{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:10.5px;line-height:1.6;padding:0 7px;border-radius:999px;
  background:var(--bg3);border:1px solid var(--linha);color:var(--txt2)}
.badge-grupo.vazio-grupo{background:none;border-style:dashed;opacity:.7}

/* ---------------------------------------------- menu da mensagem (0030)
   UM elemento so, dois formatos. No computador e um menuzinho no cursor; abaixo
   de 820px vira folha de baixo, porque menu flutuante no dedo e alvo pequeno
   demais e fica escondido embaixo da propria mao.
   O `z-index` fica acima do `.painel` (50) de proposito: o menu nasce por cima
   da conversa, e nao por baixo de qualquer folha que ja estivesse aberta. */
#menu-msg{position:fixed;inset:0;z-index:70}
#menu-msg .menu-fundo{position:absolute;inset:0;background:rgba(0,0,0,.35)}
#menu-msg .menu-caixa{position:absolute;background:var(--bg2);border:1px solid var(--linha);
  border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35);padding:6px;min-width:190px;
  display:flex;flex-direction:column;gap:2px}
#menu-msg .menu-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:none;color:var(--txt);font-size:14px;padding:10px 12px;
  border-radius:8px;cursor:pointer}
#menu-msg .menu-item:hover{background:var(--bg3)}
#menu-msg .menu-item.perigo{color:var(--erro)}
#menu-msg .menu-item.perigo:hover{background:rgba(248,81,73,.12)}
/* No computador "Cancelar" e ruido: clicar fora ja fecha, e Esc tambem. */
#menu-msg .menu-cancelar{display:none}

@media(max-width:820px){
  #menu-msg .menu-caixa{left:0;right:0;bottom:0;top:auto;min-width:0;
    border-radius:18px 18px 0 0;border-left:none;border-right:none;border-bottom:none;
    padding:8px 10px calc(10px + env(safe-area-inset-bottom));gap:4px}
  /* O puxador cinza que as outras folhas ja tem: diz "isto arrasta de baixo". */
  #menu-msg .menu-caixa::before{content:"";display:block;width:38px;height:4px;border-radius:2px;
    background:var(--linha);margin:2px auto 8px}
  #menu-msg .menu-item{padding:15px 14px;font-size:16px;border-radius:12px}
  #menu-msg .menu-cancelar{display:flex;justify-content:center;color:var(--txt2);
    background:var(--bg3);margin-top:4px}
}

/* ---- agentes (DECISIONS/0031) ----
   A folha reusa `.pessoa`, mas como BOTAO: assim o cartao inteiro e clicavel e o
   teclado alcanca, em vez de exigir mira num alvo pequeno. */
#agentes-corpo .pessoa{width:100%;background:none;border:none;border-bottom:1px solid var(--linha);
  color:var(--txt);font:inherit;text-align:left}
#agentes-corpo .pessoa:hover:not(:disabled){background:var(--bg3)}
#agentes-corpo .pessoa:disabled{opacity:.5;cursor:default}
.av-mini{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-size:15px;background:var(--bg3);border:1px solid var(--linha);color:var(--nexus-claro)}
/* As fontes que o agente citou, embaixo da bolha dele. */
.fontes-agente{margin-top:8px;padding-top:8px;border-top:1px solid var(--linha);
  font-size:11.5px;color:var(--txt2);display:flex;flex-direction:column;gap:3px}
.fontes-agente b{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}

/* Botao pequeno de linha de lista. A classe `.mini` era usada no app.js e nao existia
   aqui: os tres botoes do agente saiam com o tamanho de botao primario, empurrando o
   nome para fora da linha. */
.mini{font-size:12px;padding:5px 10px;border-radius:8px;background:var(--bg3);
  color:var(--txt2);border:1px solid var(--linha);cursor:pointer;white-space:nowrap}
.mini:hover{background:var(--linha);color:var(--txt)}

/* O apagar do agente e vermelho porque destroi: a cor faz parte do aviso, e nao
   da decoracao. Ao lado de dois botoes neutros, ele precisa parecer diferente. */
#agadm-corpo .mini.perigo{color:var(--erro);border-color:rgba(248,81,73,.4)}
#agadm-corpo .mini.perigo:hover{background:rgba(248,81,73,.12)}

/* ---- WhatsApp (DECISIONS/0034) ---- */
.wa-msgs{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto;padding:6px 0}
.wa-bolha{max-width:82%;padding:7px 10px;border-radius:12px;background:var(--bg3);
  border:1px solid var(--linha);font-size:14px;line-height:1.35;white-space:pre-wrap;word-wrap:break-word}
.wa-bolha.saida{align-self:flex-end;background:var(--nexus-fundo);color:#fff;border-color:transparent}
.wa-bolha.entrada{align-self:flex-start}
.wa-bolha .wa-sub{display:block;margin-top:4px;font-size:11px;opacity:.75}
.wa-bolha .wa-erro{color:var(--erro);opacity:1}
.wa-bolha.saida .wa-erro{color:#ffd0cc}
.wa-escrever{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.wa-escrever textarea{background:var(--bg3);border:1px solid var(--linha);color:var(--txt);
  border-radius:10px;padding:8px;min-height:60px;font:inherit;resize:vertical}
.wa-qr{display:block;width:260px;max-width:100%;margin:10px auto;background:#fff;padding:8px;border-radius:10px}
.wa-num{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--ok);
  color:#fff;font-size:11px;font-weight:700;text-align:center}

/* ---- WhatsApp na lista e na conversa principal (DECISIONS/0034) ----
   O verde e o do WhatsApp, e marca SO o que veio de la. */
:root{--wa:#25D366}
.conv.wa{box-shadow:inset 3px 0 0 var(--wa)}
.conv.wa.sel{box-shadow:inset 3px 0 0 var(--wa);background:color-mix(in srgb,var(--wa) 10%,var(--bg3))}
.av-caixa{position:relative}
.wa-pin{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;
  background:var(--wa);border:2px solid var(--bg2)}
.wa-selo{display:inline-block;margin-left:4px;padding:0 6px;border-radius:8px;font-size:10px;font-weight:700;
  line-height:16px;color:#fff;background:var(--wa);vertical-align:middle}
.balao.wa-balao{background:var(--wa)}
.m.wa:not(.meu) .bolha{background:color-mix(in srgb,var(--wa) 13%,var(--bg2));
  border-color:color-mix(in srgb,var(--wa) 55%,var(--linha))}
/* 0.39.0: citar no WhatsApp liberado; o botao de responder volta a aparecer. */

/* video que chegou pelo WhatsApp, tocando na propria bolha (0.39.0) */
.anexo-video{display:block;width:100%;max-width:300px;max-height:420px;border-radius:10px;background:#000;margin-bottom:4px}

/* ---- arrastar e segurar (0.40.0) ---- */
.conv{touch-action:pan-y}
.m{touch-action:pan-y}
.m.segurando .bolha{transform:scale(.97);box-shadow:0 0 0 2px var(--nexus);transition:transform .2s, box-shadow .2s}
#desfazer-aviso{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,20px);
  z-index:90;display:flex;gap:14px;align-items:center;max-width:calc(100% - 32px);padding:10px 14px;border-radius:12px;
  background:#1f2937;color:#fff;font-size:13.5px;box-shadow:0 6px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;
  transition:opacity .2s, transform .2s}
#desfazer-aviso.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#desfazer-aviso button{background:none;border:0;color:#7cc4ff;font-weight:700;font-size:13.5px;cursor:pointer;padding:4px}

/* ---- botoes do arrasto (0.40.0) ---- */
.conv{position:relative}
.conv-acoes{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:6px;z-index:3}
.conv-acoes button,.m-acoes button{border:0;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;
  cursor:pointer;background:var(--bg3);color:var(--txt);box-shadow:0 2px 10px rgba(0,0,0,.18);min-height:40px}
.m-acoes{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.m.meu .m-acoes{justify-content:flex-end}
.conv-acoes button[data-acao="esconder"],.m-acoes button[data-acao="esconder"]{background:var(--nexus);color:#fff}
.m-acoes button.perigo{background:var(--erro);color:#fff}