/* Boring Chat: visual minimalista (tema escuro padrão, claro pelo sistema).
   Tokens em :root; nada de cor solta no resto do arquivo. Um acento só, para
   não lida, lida e foco. Inter vem de /static/fonts (licença OFL ao lado). */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin-wght-normal.woff2?v=3100e775e861") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --fundo: #0d0d0f;
  --painel: #121215;
  --superficie: #1a1a1e;
  --superficie-2: #212126;
  --elevado: #1d1d22;
  --linha: #232329;
  --texto: #ececef;
  --suave: #a0a0a8;
  --fraco: #6c6c75;
  --acento: #4fbf88;
  --acento-fraco: rgba(79, 191, 136, .14);
  --sobre-acento: #06130c;
  --deles: #1b1b20;
  /* A bolha enviada é tingida do acento: da recebida ela se separa pelo
     matiz, não só pelo brilho (dois cinzas vizinhos não se distinguiam). Em
     cima dela o texto secundário clareia um ponto (.msg.minha), para o
     contraste não cair em relação ao da bolha recebida. */
  --minha: #17352a;
  --suave-minha: #a9b3ae;
  --fraco-minha: #788680;
  /* O acento dentro de cada bolha (link, menção, o check de lida). No escuro é
     o próprio acento; no claro escurece um ponto, para chegar a 4,5:1. */
  --acento-deles: var(--acento);
  --acento-minha: var(--acento);
  --citacao: rgba(255, 255, 255, .05);
  --alerta: #f08a7e;
  --alerta-fundo: #3a1c19;
  --marca: rgba(79, 191, 136, .28);
  /* O fundo do salto até a mensagem: mais claro que as duas bolhas. Em cima
     dele o --fraco (a hora) não se lê: enquanto o salto dura, vale o --suave. */
  --alvo: #27553f;
  --fraco-alvo: var(--suave);
  --sombra: 0 18px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
  /* O véu do visor de imagem: escuro nos dois temas, com o que vai por cima. */
  --veu: rgba(6, 6, 8, .93);
  --sobre-veu: #ececef;
  --veu-toque: rgba(255, 255, 255, .12);
  --raio: 12px;
  --cor-0: #8fa6c8; --cor-1: #c39bc0; --cor-2: #8dbf9d; --cor-3: #cdb184;
  --cor-4: #84b9c4; --cor-5: #d0989b; --cor-6: #a9bf86; --cor-7: #a99bd0;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --fundo: #f6f6f7;
    --painel: #ffffff;
    --superficie: #f0f0f2;
    --superficie-2: #e8e8eb;
    --elevado: #ffffff;
    --linha: #e6e6e9;
    --texto: #17171a;
    --suave: #5f5f68;
    --fraco: #9a9aa3;
    --acento: #23895a;
    --acento-fraco: rgba(35, 137, 90, .12);
    --sobre-acento: #ffffff;
    --deles: #ffffff;
    /* Como no escuro, a enviada é tingida do acento. Ela é tão clara quanto o
       cinza que era (a luminância não caiu), então nada do que vai em cima
       dela perdeu contraste: o texto secundário segue o do tema. */
    --minha: #d4f7e7;
    --suave-minha: var(--suave);
    --fraco-minha: var(--fraco);
    --acento-deles: #228658;
    --acento-minha: #1f7a50;
    --citacao: rgba(0, 0, 0, .045);
    --alerta: #b8382b;
    --alerta-fundo: #fbe9e7;
    --marca: rgba(35, 137, 90, .2);
    /* O salto: o mesmo verde, mais vivo que o da bolha enviada, para aparecer
       nas duas. É mais claro que o salto de antes: em cima dele nada perdeu
       contraste, e a hora segue no --fraco. */
    --alvo: #9df1ca;
    --fraco-alvo: var(--suave);
    --sombra: 0 18px 40px rgba(20, 20, 30, .14), 0 2px 8px rgba(20, 20, 30, .08);
    --veu: rgba(18, 18, 22, .9);
    --cor-0: #4d6a94; --cor-1: #8a5487; --cor-2: #3f7f54; --cor-3: #8c6a2c;
    --cor-4: #3a7682; --cor-5: #9a4b50; --cor-6: #5c7a30; --cor-7: #64558f;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Coluna: aviso de caixa fora (quando houver) em cima, #app ocupa o resto da tela. */
body {
  margin: 0; display: flex; flex-direction: column; height: 100dvh;
  font: 400 14px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  background: var(--fundo); color: var(--texto);
}
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

/* Scrollbars mínimas. */
* { scrollbar-width: thin; scrollbar-color: var(--superficie-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--superficie-2); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Ícones SVG em linha: herdam a cor do texto. */
.i { width: 18px; height: 18px; flex: none; stroke-width: 1.75; }

.botao-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--suave); cursor: pointer; text-decoration: none;
}
.botao-icone:hover, .botao-icone[aria-expanded="true"] { background: var(--superficie); color: var(--texto); }

/* Modo privacidade (o olho, privado.js): nomes e fotos de perfil borrados em
   tudo o que leva .privado. Sem revelar ao passar o mouse (é para compartilhar
   a tela): nada aqui tem :hover, e a dica com nomes (.privado-dica, o title
   das reações) não abre. Ligado, o olho riscado fica no acento. */
.olho .i + .i, html.privado .olho .i:first-child { display: none; }
html.privado .olho .i + .i { display: block; }
html.privado .olho { color: var(--acento); }
html.privado .privado { filter: blur(6px); user-select: none; }
html.privado .privado-dica { pointer-events: none; }

/* ---- Layout: lista ~360px + conversa ---- */
#app { display: grid; grid-template-columns: 360px minmax(0, 1fr); flex: 1; min-height: 0; }
#coluna-lista { display: flex; flex-direction: column; min-height: 0; background: var(--painel); border-right: 1px solid var(--linha); }
#lista { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 12px; }

.cabeca-lista { display: flex; align-items: center; gap: 6px; padding: 18px 14px 10px 20px; }
.cabeca-lista h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.02em; flex: 1; }
.cabeca-lista .botao-icone:first-child { margin-left: -8px; }
.acoes { display: flex; gap: 2px; }

.filtros { display: flex; gap: 6px; padding: 4px 20px 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500; text-decoration: none; color: var(--suave); background: var(--superficie);
}
.chip:hover { color: var(--texto); }
.chip[aria-pressed="true"] { background: var(--texto); color: var(--fundo); }
.chip-n { font-size: 11.5px; font-weight: 650; color: var(--acento); }
.chip[aria-pressed="true"] .chip-n { color: inherit; opacity: .7; }

/* ---- Busca do topo da lista ---- */
.busca-topo { padding: 2px 14px 8px; }
.campo-busca {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border-radius: 10px;
  background: var(--superficie); color: var(--fraco); cursor: text;
}
.campo-busca:focus-within { box-shadow: 0 0 0 1px var(--fraco); color: var(--suave); }
.campo-busca .i { width: 16px; height: 16px; }
.campo-busca input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; color: var(--texto); font-size: 13.5px; }
.campo-busca input:focus { outline: none; }
.campo-busca input::placeholder { color: var(--fraco); }
.campo-busca input::-webkit-search-cancel-button { display: none; }
.atalho { font: 600 10.5px/1 "Inter", system-ui, sans-serif; color: var(--fraco); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--linha); flex: none; }
.campo-busca:focus-within .atalho { display: none; }
/* Com termo, os resultados tomam o lugar da lista (e dos filtros). */
.resultados { flex: 1; overflow-y: auto; min-height: 0; padding: 0 8px 12px; }
.resultados[hidden] { display: none; }
#coluna-lista.buscando #lista { display: none; }
.busca-grupo h3 { margin: 10px 12px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fraco); }
.busca-lista { list-style: none; margin: 0; padding: 0; }
.busca-item {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: var(--raio);
  color: inherit; text-decoration: none; min-width: 0;
}
.busca-item:hover { background: var(--superficie); }
.busca-item.ativo { background: var(--superficie-2); }
.busca-contato { flex-direction: row; align-items: center; gap: 12px; }
.busca-contato .avatar { width: 40px; height: 40px; }
.busca-contato .avatar.iniciais { font-size: 13.5px; }
.busca-texto { display: flex; flex-direction: column; min-width: 0; }
.busca-item .nome { font-weight: 550; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.busca-texto .caixa { font-size: 12px; color: var(--fraco); }
.busca-linha { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.busca-linha .hora { margin-left: auto; font-size: 12px; color: var(--fraco); flex: none; font-variant-numeric: tabular-nums; }
.busca-trecho {
  font-size: 13px; color: var(--suave); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.busca-quem { color: var(--fraco); }
mark { background: var(--marca); color: var(--texto); border-radius: 3px; padding: 0 1px; }
.busca-nada { color: var(--fraco); padding: 20px 12px; margin: 0; }
.busca-mais-item { padding: 6px 4px 0; }
.busca-mais { width: 100%; padding: 9px; border: 0; border-radius: 10px; background: var(--superficie); color: var(--suave); cursor: pointer; font-size: 13px; }
.busca-mais:hover { color: var(--texto); }

/* ---- Cards da lista ---- */
.lista { list-style: none; margin: 0; padding: 0 8px; }
.card {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center;
  padding: 10px 12px; border-radius: var(--raio); color: inherit; text-decoration: none; position: relative;
}
.card:hover { background: var(--superficie); }
.card.aberta, .card.menu-aberto { background: var(--superficie-2); }
.card .avatar { grid-row: 1 / span 2; }
.linha1, .linha2 { display: flex; align-items: center; gap: 6px; min-width: 0; grid-column: 2; }
.linha1 .nome { font-weight: 550; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.linha1 .caixa { font-size: 11px; color: var(--fraco); flex: none; opacity: .8; }
.linha1 .caixa::before { content: "·"; margin-right: 6px; }
.linha1 .hora { margin-left: auto; font-size: 12px; color: var(--fraco); flex: none; font-variant-numeric: tabular-nums; }
.linha2 { color: var(--suave); font-size: 13.5px; }
.previa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.marcas { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--fraco); }
.marca-ic { display: inline-flex; }
.marca-ic .i { width: 15px; height: 15px; }
.card.nao-lida .nome { font-weight: 650; }
.card.nao-lida .previa { color: var(--texto); }
.card.nao-lida .hora { color: var(--acento); }
.contador, .mencao-marca {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--acento); color: var(--sobre-acento); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.contador.marca { min-width: 10px; width: 10px; height: 10px; padding: 0; }
/* O "@" de menção a mim ainda não lida (list.html), logo antes do contador: a
   mesma pílula dele, redonda. O fundo é o do acento, então lê-se igual com o
   card parado, em hover ou aberto. */
.mencao-marca { width: 20px; padding: 0; font-size: 12.5px; line-height: 1; }
.status { display: inline-flex; color: var(--fraco); flex: none; }
.status .i { width: 15px; height: 15px; }
.status-read { color: var(--acento); }
.status-failed { color: var(--alerta); }

.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: var(--superficie-2); }
.avatar.iniciais {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--suave); font-weight: 600; font-size: 15px; letter-spacing: .02em;
}
.vazio { color: var(--fraco); padding: 28px 20px; list-style: none; }

/* ---- Conversa ---- */
#conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.painel-vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.painel-vazio .i { width: 34px; height: 34px; stroke-width: 1.25; color: var(--fraco); }
.painel-vazio p { margin: 0; }
.conversa { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.topo { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--linha); background: var(--painel); position: relative; }
.topo .avatar { width: 40px; height: 40px; }
.topo .avatar.iniciais { font-size: 13.5px; }
.titulo { flex: 1; min-width: 0; }
.topo h1 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { margin: 1px 0 0; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--fraco); }
.etiqueta { display: inline-flex; align-items: center; gap: 4px; }
.etiqueta .i { width: 13px; height: 13px; }
.fechar { display: none; }
/* Busca dentro da conversa: faixa logo abaixo do cabeçalho. */
.busca-conversa { display: flex; align-items: center; gap: 6px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--linha); background: var(--painel); color: var(--fraco); }
.busca-conversa[hidden] { display: none; }
.busca-conversa > .i { width: 16px; height: 16px; flex: none; }
.busca-conversa input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--superficie); color: var(--texto); font-size: 13.5px; }
.busca-conversa input:focus { outline: none; box-shadow: 0 0 0 1px var(--fraco); }
.busca-conversa input::-webkit-search-cancel-button { display: none; }
.busca-contador { flex: none; min-width: 64px; text-align: right; font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.busca-conversa.sem-resultado .busca-contador { color: var(--alerta); }
.mais { position: relative; }

.mensagens { flex: 1; overflow-y: auto; overflow-anchor: none; padding: 20px max(24px, calc((100% - 820px) / 2)) 16px; display: flex; flex-direction: column; }
.anteriores { align-self: center; font-size: 12px; color: var(--fraco); padding: 4px 0 14px; }
/* Separador de dia no fluxo, centralizado entre os dias (como no WhatsApp Web). */
.dia { align-self: stretch; display: flex; justify-content: center; margin: 20px 0 8px; }
.dia span { font-size: 11.5px; font-weight: 550; color: var(--suave); background: var(--superficie); padding: 4px 12px; border-radius: 999px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }

.msg {
  position: relative; max-width: min(68%, 560px); width: fit-content; margin-top: 10px;
  padding: 7px 11px 6px; border-radius: 16px; background: var(--deles); overflow-wrap: anywhere;
}
.msg.deles { align-self: flex-start; border-top-left-radius: 6px; --acento: var(--acento-deles); }
.msg.minha { align-self: flex-end; background: var(--minha); border-top-right-radius: 6px; --suave: var(--suave-minha); --fraco: var(--fraco-minha); --acento: var(--acento-minha); }
.msg.seguida { margin-top: 2px; }
.msg.deles.seguida { border-top-left-radius: 16px; }
.msg.minha.seguida { border-top-right-radius: 16px; }
.msg.com-reacao { margin-bottom: 14px; }
.msg.sem-bolha { background: transparent; padding: 0; }
.msg.apagada .apagada-marca { display: flex; align-items: center; gap: 6px; font-size: 14px; font-style: italic; color: var(--fraco); }
.msg.apagada .apagada-marca .i { width: 15px; height: 15px; flex: none; }
/* Só o texto da mensagem guarda quebras e espaços; na bolha inteira, o recuo do template viraria espaço em branco. */
.msg .texto, .citacao .trecho { white-space: pre-wrap; }
.msg .texto { font-size: 14.5px; line-height: 1.5; }
.msg .autor { font-size: 12.5px; font-weight: 650; margin-bottom: 2px; }
.cor-0 { --cor: var(--cor-0); } .cor-1 { --cor: var(--cor-1); } .cor-2 { --cor: var(--cor-2); } .cor-3 { --cor: var(--cor-3); }
.cor-4 { --cor: var(--cor-4); } .cor-5 { --cor: var(--cor-5); } .cor-6 { --cor: var(--cor-6); } .cor-7 { --cor: var(--cor-7); }
.autor { color: var(--cor); }
.citacao {
  display: block; margin: 2px 0 6px; padding: 6px 10px; border-radius: 8px; text-decoration: none;
  background: var(--citacao); border-left: 3px solid var(--cor, var(--fraco));
}
a.citacao:hover { background: var(--superficie-2); }
.citacao .quem { display: block; font-size: 12.5px; font-weight: 650; color: var(--cor); }
.citacao .trecho { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--suave); }
.msg .meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 1px; font-size: 11px; color: var(--fraco); font-variant-numeric: tabular-nums; }
.msg .meta .i { width: 15px; height: 15px; }
/* Link no texto e cartão da prévia. O cartão tem altura fixa: o espaço
   reservado (.pendente) e o cartão ocupam o mesmo, e a rolagem não pula. */
/* Formatação do WhatsApp na bolha (wafmt). Os marcadores ficam no HTML,
   escondidos: o texto da bolha, lido inteiro, é o original, e o Copiar o leva. */
.fm { display: none; }
.msg .texto strong { font-weight: 650; }
.msg .texto code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: .92em; }
.msg .texto code:not(.fmt-mono) { padding: 1px 5px; border-radius: 5px; background: var(--citacao); }
.fmt-lista { margin: 0; padding: 0; list-style: none; }
ul.fmt-lista li { position: relative; padding-left: 1.2em; }
ul.fmt-lista li::before { content: "•"; position: absolute; left: .3em; }
ol.fmt-lista li { padding-left: 1.3em; }
ol.fmt-lista .fmt-n { display: inline-block; min-width: 1.3em; margin-left: -1.3em; font-variant-numeric: tabular-nums; }
.fmt-citacao { margin: 2px 0; padding: 1px 0 1px 9px; border-left: 3px solid var(--fraco); color: var(--suave); }
.msg .texto a, .msg .citacao .trecho a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
/* Menção ("@Nome", mentions.markup) no texto da bolha: no acento e no peso
   dos nomes, para se ver que é uma marcação. A que marca o dono da caixa
   ("@Você") vai em pílula, com o texto na cor cheia: é ela que salta ao olho.
   Na citação a marca não pinta: o trecho é um resumo de uma linha, e o que
   salta para a original nem a leva (é texto puro). */
.msg .texto .mencao { color: var(--acento); font-weight: 650; }
.msg .texto .mencao-eu { padding: 1px 6px; border-radius: 999px; background: var(--marca); color: var(--texto); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.previa-link { display: flex; height: 76px; margin-top: 6px; border-radius: 10px; overflow: hidden; background: var(--citacao); color: inherit; text-decoration: none; max-width: 380px; }
.previa-link.pendente { opacity: .5; }
.previa-img { width: 76px; height: 76px; object-fit: cover; flex: none; }
.previa-corpo { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 10px; min-width: 0; }
.previa-titulo { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.previa-descricao { font-size: 12px; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.previa-dominio { font-size: 11px; color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg .meta .editada { font-style: italic; }
.msg .meta .via-api { font-size: 9px; font-weight: 600; letter-spacing: .06em; padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; opacity: .75; cursor: help; }
.msg.sem-bolha .meta { padding: 2px 6px; }
.reacoes { position: absolute; bottom: -13px; display: flex; gap: 2px; padding: 2px 5px; border-radius: 999px; background: var(--elevado); border: 1px solid var(--fundo); font-size: 13px; line-height: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.msg.deles .reacoes { left: 10px; }
.msg.minha .reacoes { right: 10px; }
.reacao { display: inline-flex; align-items: center; gap: 2px; }
.reacao .n { font-size: 11px; font-weight: 600; color: var(--suave); }
.reacao.minha .n { color: var(--acento); }
.reacao-solta { align-self: center; margin: 10px 0 2px; font-size: 12px; color: var(--fraco); }
@keyframes destaque { from { box-shadow: 0 0 0 2px var(--acento); } to { box-shadow: 0 0 0 2px transparent; } }
.msg:target { animation: destaque 1.6s ease-out; }
/* Salto até a mensagem (citação, busca): o ui.js põe .alvo por 1,6 s. O
   destaque fica inteiro mais de metade do tempo e só então some. Enquanto
   dura, o texto fraco (a hora) usa o --fraco-alvo. */
@keyframes alvo-anel { 0%, 60% { box-shadow: 0 0 0 2px var(--acento); } 100% { box-shadow: 0 0 0 2px transparent; } }
@keyframes alvo-fundo { 0%, 60% { background: var(--alvo); } }
.msg.alvo { animation: alvo-anel 1.6s ease-in, alvo-fundo 1.6s ease-in; --fraco: var(--fraco-alvo); }
.reacao-solta.alvo { animation: alvo-fundo 1.6s ease-in; border-radius: 8px; }
.recentes { align-self: center; font-size: 12px; color: var(--fraco); padding: 14px 0 4px; }

/* Enquete: o cartão no lugar do texto. Cada opção é marca, nome e contagem
   numa linha e a barra embaixo (um <progress>: a fração de quem votou). */
.enquete { width: min(320px, 100%); min-width: min(240px, 100%); padding: 2px 0 2px; }
.enquete-topo { display: flex; align-items: flex-start; gap: 8px; }
.enquete-topo .i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--acento); }
.enquete-pergunta { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.enquete-tipo { margin: 2px 0 8px 26px; font-size: 12px; color: var(--fraco); }
.enquete-opcoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.enquete-opcao { display: grid; grid-template-columns: 18px 1fr auto; column-gap: 8px; row-gap: 5px; align-items: center; }
.enquete-marca { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--fraco); display: grid; place-items: center; }
.enquete-opcao.minha .enquete-marca { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.enquete-marca .i { width: 12px; height: 12px; stroke-width: 3; }
.enquete-nome { font-size: 14px; line-height: 1.35; }
.enquete-n { font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.enquete-barra {
  grid-column: 2 / 4; display: block; width: 100%; height: 5px; border: 0; border-radius: 999px;
  overflow: hidden; background: var(--linha); -webkit-appearance: none; appearance: none;
}
.enquete-barra::-webkit-progress-bar { background: var(--linha); border-radius: 999px; }
.enquete-barra::-webkit-progress-value { background: var(--acento); border-radius: 999px; }
.enquete-barra::-moz-progress-bar { background: var(--acento); border-radius: 999px; }
.enquete-total { margin: 10px 0 0 26px; font-size: 12px; color: var(--fraco); }

/* Mídia com tamanho limitado; figurinha pequena. */
.anexo img { display: block; max-width: min(320px, 100%); max-height: 320px; border-radius: 10px; margin: 2px 0 4px; }
.anexo img.figurinha { max-width: 120px; max-height: 120px; margin: 0; }
.anexo img.miniatura { filter: blur(2px); opacity: .7; max-width: 200px; }
/* Com largura e altura no HTML (o espaço fica reservado antes de a foto
   chegar), a altura segue a proporção quando a bolha é mais estreita que a foto. */
.anexo img[width] { height: auto; }
.anexo video { display: block; max-width: min(320px, 100%); max-height: 320px; border-radius: 10px; margin: 2px 0 4px; }
.anexo button, .documento {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 10px;
  background: var(--citacao); color: var(--texto); font-size: 13px; cursor: pointer; text-decoration: none; margin: 2px 0;
}
.anexo button:hover, .documento:hover { background: var(--superficie-2); }
.documento small { color: var(--fraco); }
.expirada, .erro-anexo { color: var(--fraco); font-size: 12.5px; margin: 4px 0 0; }
.falha { display: flex; gap: 8px; align-items: center; color: var(--alerta); font-size: 12.5px; margin-top: 4px; }
.falha button { border: 0; border-radius: 8px; padding: 4px 10px; background: var(--alerta-fundo); color: var(--alerta); cursor: pointer; font-weight: 600; }

/* ---- Caixa de resposta (como no WhatsApp Web) ---- */
/* .conversa é a referência da pré-visualização e do "Solte para enviar". */
.conversa { position: relative; }
.rodape { padding: 8px max(16px, calc((100% - 852px) / 2)) 12px; background: var(--fundo); }
.resposta { display: flex; gap: 4px; align-items: flex-end; padding: 5px 6px; border-radius: 22px; background: var(--superficie); }
.resposta .botao-icone { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.resposta .botao-icone .i { width: 20px; height: 20px; }
.resposta textarea {
  flex: 1; min-width: 0; resize: none; margin: 0; padding: 9px 6px; border: 0; background: transparent; color: var(--texto);
  line-height: 1.45; min-height: 40px; max-height: calc(6 * 1.45em + 18px); overflow-y: auto; field-sizing: content;
}
.resposta textarea:focus { outline: none; }
.resposta textarea::placeholder { color: var(--fraco); }
.resposta .enviar, .resposta .microfone, .previa-envio .enviar {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.resposta .enviar, .previa-envio .enviar { background: var(--acento); color: var(--sobre-acento); }
.resposta .microfone { background: transparent; color: var(--suave); }
.resposta .microfone:hover { background: var(--superficie-2); color: var(--texto); }
.resposta .enviar .i, .resposta .microfone .i, .previa-envio .enviar .i { width: 20px; height: 20px; }
/* Sem texto, o microfone; com texto, o enviar. */
.resposta:not(.tem-texto) > .enviar, .resposta.tem-texto > .microfone { display: none; }
/* Gravando: só a lixeira, o tempo e o enviar. */
.resposta.gravando > :not(.gravacao) { display: none; }
.gravacao { flex: 1; display: flex; align-items: center; gap: 10px; }
.gravacao[hidden] { display: none; }
.gravacao .enviar { margin-left: auto; }
.gravando-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--alerta); animation: pulsa 1.2s ease-in-out infinite; }
.gravando-tempo { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--texto); }
@keyframes pulsa { 50% { opacity: .25; } }
.resposta .flutuante.ancorado.acima { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; }

/* Citação da resposta, acima do campo. */
.editando { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 6px; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--superficie); font-size: 13px; color: var(--suave); }
.editando[hidden] { display: none; }
.editando-rotulo { display: flex; align-items: center; gap: 8px; }
.editando-rotulo .i { width: 15px; height: 15px; }
.citando { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 6px 6px 8px; border-radius: 14px; background: var(--superficie); }
.citando[hidden] { display: none; }
.citando .citacao { flex: 1; min-width: 0; margin: 0; }
.citando .citacao .trecho { -webkit-line-clamp: 2; }
.erro-envio { margin: 0 0 6px; padding: 6px 12px; border-radius: 10px; background: var(--alerta-fundo); color: var(--alerta); font-size: 13px; }
.erro-envio[hidden] { display: none; }
/* Cópia para a área de transferência sem a API do navegador: fora da tela. */
.copia { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* Seletor de emoji. */
.emojis { width: 344px; max-width: calc(100vw - 16px); padding: 8px; border-radius: 14px; background: var(--elevado); box-shadow: var(--sombra); border: 1px solid var(--linha); }
.emojis-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 248px; overflow-y: auto; }
.emojis-grade button { height: 38px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
.emojis-grade button:hover, .emojis-grade button:focus-visible { background: var(--superficie-2); }
.emojis-busca { width: 100%; margin-bottom: 6px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--superficie); color: var(--texto); }
.emojis-busca:focus { outline: none; box-shadow: 0 0 0 1px var(--fraco); }
.emojis-rotulo { padding: 2px 4px; font-size: 11.5px; font-weight: 550; color: var(--fraco); }
.emojis-recentes[hidden], .emojis-abas[hidden], .emojis-vazio[hidden] { display: none; }
.emojis-linha { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 80px; overflow: hidden; }
.emojis-linha button, .emojis-abas button { height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.emojis-linha button:hover, .emojis-abas button:hover { background: var(--superficie-2); }
.emojis-abas { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; margin: 6px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--linha); }
.emojis-abas button { height: 32px; font-size: 18px; opacity: .55; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; }
.emojis-abas button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--acento); }
.emojis-vazio { margin: 0; padding: 18px 8px; text-align: center; color: var(--fraco); font-size: 13px; }

/* Seta de opções da bolha: aparece no hover (sempre no toque). */
.msg-opcoes {
  position: absolute; top: 3px; right: 3px; z-index: 1; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--superficie-2); color: var(--suave); opacity: 0; transition: opacity .12s;
}
.msg-opcoes .i { width: 16px; height: 16px; }
.msg:hover > .msg-opcoes, .msg-opcoes:focus-visible, .msg-opcoes[aria-expanded="true"] { opacity: 1; }
/* No toque não há hover (e o iPhone não abre menu pelo toque longo): a seta
   fica sempre à vista, discreta, ao lado da bolha, sem cobrir o texto. */
@media (hover: none) {
  .msg-opcoes { opacity: .55; background: transparent; top: 4px; }
  .msg.deles > .msg-opcoes { right: -30px; }
  .msg.minha > .msg-opcoes { right: auto; left: -30px; }
}
.msg.menu-aberto { box-shadow: 0 0 0 1px var(--fraco); }

/* Balão de envio de arquivo (como o PendingAttachment do fork). */
.envio-pendente { min-width: 240px; padding: 10px 12px; }
.pendente { display: flex; align-items: center; gap: 10px; }
.pendente-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--citacao); color: var(--texto); }
.pendente-texto { min-width: 0; flex: 1; }
.pendente-nome { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pendente-linha { font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.envio-pendente .barra { height: 4px; margin-top: 10px; border-radius: 999px; overflow: hidden; background: var(--citacao); }
.envio-pendente .barra span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--suave); transition: width .2s; }
.envio-pendente.indeterminado .barra span { width: 33%; animation: vai-e-volta 1.1s ease-in-out infinite alternate; }
@keyframes vai-e-volta { from { margin-left: 0; } to { margin-left: 67%; } }
.envio-pendente.com-erro .barra { display: none; }
.envio-pendente.com-erro .pendente-linha { color: var(--alerta); }
.envio-pendente .texto { margin-top: 8px; }
.falha[hidden] { display: none; }

/* Pré-visualização dos arquivos, sobre a conversa. */
.previa-envio { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; background: var(--painel); }
.previa-envio[hidden] { display: none; }
.previa-topo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.previa-nome { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.previa-aviso { margin: 10px 16px 0; padding: 8px 12px; border-radius: 10px; background: var(--alerta-fundo); color: var(--alerta); font-size: 13px; }
.previa-aviso[hidden] { display: none; }
.previa-palco { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.previa-palco img, .previa-palco video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.previa-doc { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 40px; border-radius: 16px; background: var(--superficie); text-align: center; max-width: 100%; }
.previa-doc .i { width: 56px; height: 56px; stroke-width: 1.25; color: var(--suave); }
.previa-doc strong { font-weight: 550; overflow-wrap: anywhere; }
.previa-doc span { font-size: 12.5px; color: var(--fraco); }
.previa-legenda { padding: 0 max(16px, calc((100% - 640px) / 2)) 12px; }
.previa-legenda input { width: 100%; padding: 11px 16px; border: 0; border-radius: 22px; background: var(--superficie); color: var(--texto); }
.previa-legenda input:focus { outline: none; box-shadow: 0 0 0 1px var(--fraco); }
.previa-base { display: flex; align-items: center; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--linha); }
.previa-fila { flex: 1; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; min-width: 0; justify-content: center; }
.previa-item { position: relative; flex: none; }
.previa-mini {
  width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--superficie); color: var(--suave); display: inline-flex; align-items: center; justify-content: center;
}
.previa-mini[aria-current="true"] { border-color: var(--acento); }
.previa-mini img, .previa-mini video { width: 100%; height: 100%; object-fit: cover; }
.previa-tirar {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--texto); color: var(--fundo);
}
.previa-tirar .i { width: 12px; height: 12px; stroke-width: 2.5; }
/* Rabisco (rabisco.js): toma o lugar da imagem e da fila na prévia; a
   legenda continua. */
.previa-envio.rabiscando .previa-palco, .previa-envio.rabiscando .previa-base { display: none; }
.rabisco { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rabisco[hidden], .rabisco-acoes[hidden], .rabisco-botao[hidden] { display: none; }
.rabisco-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 10px 16px 0; }
.rabisco-cores, .rabisco-espessuras { display: flex; align-items: center; gap: 6px; }
.rabisco-cor { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--linha); background: var(--cor); cursor: pointer; }
.rabisco-cor[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--painel), 0 0 0 4px var(--texto); }
.rabisco-espessura { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rabisco-espessura::before { content: ""; width: var(--tam); height: var(--tam); border-radius: 50%; background: var(--texto); }
.rabisco-espessura[aria-pressed="true"] { background: var(--superficie-2); }
.rabisco-limpar, .rabisco-botao { padding: 7px 14px; border: 0; border-radius: 18px; background: var(--superficie); color: var(--texto); cursor: pointer; font: inherit; font-size: 13.5px; }
.rabisco-barra button:disabled { opacity: .4; cursor: default; }
.rabisco-palco { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; }
.rabisco-tela { display: block; border-radius: 6px; touch-action: none; cursor: crosshair; background: var(--superficie); }
.rabisco-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--linha); }
.previa-envio.rabisco-gerando .rabisco-acoes, .previa-envio.rabisco-gerando .rabisco-tela { pointer-events: none; opacity: .6; }
.previa-mais { width: 56px; height: 56px; flex: none; border: 1px dashed var(--fraco); border-radius: 10px; background: transparent; color: var(--suave); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* Visor de imagem (visor.js): por cima da página inteira, com o fundo
   escurecido. A imagem cabe inteira na janela; as setas ficam nas laterais. */
.visor { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--veu); color: var(--sobre-veu); }
.visor[hidden] { display: none; }
.visor-topo { display: flex; align-items: center; gap: 6px; padding: 10px 14px; }
.visor-info { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.visor-quem { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-quando, .visor-conta { font-size: 12.5px; opacity: .72; font-variant-numeric: tabular-nums; }
.visor-conta { margin-right: 8px; white-space: nowrap; }
.visor .botao-icone, .visor-seta { color: var(--sobre-veu); }
.visor .botao-icone:hover, .visor-seta:hover { background: var(--veu-toque); color: var(--sobre-veu); }
.visor-palco { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 64px 24px; }
.visor-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.visor-seta {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.visor-seta[hidden] { display: none; }
.visor-seta[data-visor-acao="anterior"] { left: 10px; }
.visor-seta[data-visor-acao="proxima"] { right: 10px; }
.visor-seta .i { width: 26px; height: 26px; }
@media (max-width: 767px) {
  .visor-palco { padding: 8px 8px 16px; }
  .visor-seta { background: var(--veu-toque); }
}
/* A imagem da bolha abre o visor: o cursor diz que ela amplia. */
.anexo a[data-visor] { display: block; width: fit-content; cursor: zoom-in; border-radius: 10px; }

/* Arrastando arquivo sobre a conversa. */
.soltar { position: absolute; inset: 0; z-index: 16; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--fundo) 82%, transparent); pointer-events: none; }
.soltar[hidden] { display: none; }
.soltar > div { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 48px; border: 2px dashed var(--acento); border-radius: 18px; color: var(--texto); }
.soltar .i { width: 32px; height: 32px; color: var(--acento); }
.soltar p { margin: 0; font-weight: 600; font-size: 16px; }


/* ---- Menus (contexto do card e três pontos do cabeçalho) ---- */
.flutuante { position: fixed; z-index: 20; }
.flutuante.ancorado { position: absolute; top: calc(100% + 6px); right: 0; }
.flutuante[hidden] { display: none; }
.menu {
  min-width: 232px; padding: 6px; border-radius: 12px; background: var(--elevado);
  box-shadow: var(--sombra); border: 1px solid var(--linha);
}
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--texto); text-align: left; cursor: pointer; font-size: 13.5px;
}
.menu-item .i { width: 16px; height: 16px; color: var(--suave); }
.menu-item:hover, .menu-item:focus-visible { background: var(--superficie-2); outline: none; }
.menu-rotulo { flex: 1; }
.menu-estado { font-size: 11.5px; color: var(--fraco); }
.menu-item[aria-checked="true"] .menu-estado { color: var(--acento); }

/* ---- Áudio: bolha como a do WhatsApp Web e a barra de áudio ---- */
/* .audio .x vence o .anexo button genérico (padding, fundo, hover). */
.msg.tipo-audio { min-width: min(300px, 100%); }
.audio { display: flex; align-items: center; gap: 10px; min-width: 248px; padding: 4px 0 0; }
.audio-quem { position: relative; flex: none; width: 44px; height: 44px; }
/* .anexo img (mídia) não vale para a foto: redonda, sem margem. */
.audio-quem .avatar { width: 44px; height: 44px; font-size: 14px; border-radius: 50%; margin: 0; max-width: none; max-height: none; }
/* No grupo, as iniciais na cor da pessoa (a do nome em cima da bolha). */
.audio-quem .avatar.iniciais[class*="cor-"] { background: color-mix(in srgb, var(--cor) 24%, var(--superficie-2)); color: var(--cor); }
.audio-quem.eu { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--acento-fraco); color: var(--acento); }
.audio-quem.eu .i { width: 20px; height: 20px; }
.audio-mic {
  position: absolute; right: -4px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--deles); color: var(--acento);
}
.audio-mic .i { width: 12px; height: 12px; stroke-width: 2.25; }
.audio .audio-tocar, .barra-audio .audio-tocar {
  position: relative; flex: none; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--texto); color: var(--fundo); cursor: pointer;
}
.audio .audio-tocar:hover, .barra-audio .audio-tocar:hover { background: var(--suave); }
.audio-tocar .i { width: 15px; height: 15px; fill: currentColor; stroke-width: 1; }
.audio-tocar .i:first-child { margin-left: 2px; }
.audio-tocar .i + .i, .tocando > .audio-tocar .i:first-child { display: none; }
.tocando > .audio-tocar .i + .i { display: block; }
/* Não baixado: baixar no lugar do play; girando enquanto baixa. */
.audio-baixar .audio-tocar { background: var(--superficie-2); color: var(--texto); }
.audio-baixar .audio-tocar .i { fill: none; stroke-width: 2; width: 18px; height: 18px; margin: 0; }
.audio-giro { display: none; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--acento); }
.audio-tocar.htmx-request .audio-giro { display: block; animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.audio-tamanho { flex: none; font-size: 11.5px; color: var(--fraco); font-variant-numeric: tabular-nums; }
.audio-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 16px; }
/* Posição: clicar ou arrastar; --pos vem do player.js. */
.audio-trilho { --pos: 0%; position: relative; height: 18px; cursor: pointer; touch-action: none; border-radius: 6px; }
.audio-trilho::before, .audio-feito { content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; }
.audio-trilho::before { right: 0; background: var(--superficie-2); }
.audio-feito { width: var(--pos); background: var(--suave); }
.audio-bolinha { position: absolute; top: 50%; left: var(--pos); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--suave); }
.atual .audio-feito, .atual .audio-bolinha { background: var(--acento); }
.audio-baixar .audio-trilho { cursor: default; }
.audio-tempo { font-size: 11.5px; color: var(--fraco); font-variant-numeric: tabular-nums; white-space: nowrap; }
.audio .audio-velocidade, .barra-audio .audio-velocidade {
  flex: none; min-width: 42px; height: 26px; margin: 0; padding: 0 8px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--superficie-2); color: var(--suave);
  font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer;
}
.audio .audio-velocidade:hover, .barra-audio .audio-velocidade:hover { color: var(--texto); }
/* X da bolha: só no áudio aberto (tocando ou pausado no meio). */
.audio .audio-fechar {
  display: none; flex: none; width: 26px; height: 26px; margin: 0 0 0 -4px; padding: 0; border: 0; border-radius: 50%;
  align-items: center; justify-content: center; background: transparent; color: var(--fraco); cursor: pointer;
}
.audio.atual .audio-fechar { display: inline-flex; }
.audio .audio-fechar:hover { background: var(--superficie-2); color: var(--texto); }
.audio-fechar .i { width: 15px; height: 15px; }
/* Sem duração conhecida, a posição não se escolhe. */
.audio-trilho.sem-duracao { cursor: default; }
.audio-trilho.sem-duracao .audio-bolinha { display: none; }

/* Barra de áudio: no pé da tela, tira a altura dela de #app (body é coluna). */
.barra-audio { position: relative; flex: none; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 12px 0 20px; background: var(--painel); border-top: 1px solid var(--linha); }
.barra-audio[hidden] { display: none; }
.barra-trilho { position: absolute; left: 0; right: 0; top: -9px; height: 18px; border-radius: 0; }
.barra-trilho::before, .barra-trilho .audio-feito { height: 3px; margin-top: -1px; border-radius: 0; }
.barra-trilho .audio-bolinha { opacity: 0; transition: opacity .12s; }
.barra-trilho:hover .audio-bolinha, .barra-trilho:focus-visible .audio-bolinha { opacity: 1; }
.barra-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--acento-fraco); color: var(--acento); }
.barra-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; border-radius: 6px; }
.barra-nome, .barra-conversa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-nome { font-weight: 600; font-size: 13.5px; }
.barra-conversa { font-size: 12px; color: var(--suave); }
.barra-conversa:empty { display: none; }
.barra-quem:hover .barra-nome { text-decoration: underline; }
.barra-tempo { flex: none; font-size: 12px; color: var(--suave); }

.aviso-caixa { background: var(--alerta-fundo); color: var(--alerta); padding: 9px 20px; font-weight: 550; font-size: 13px; border-bottom: 1px solid var(--linha); }

/* ---- Páginas avulsas: login e Configurações ---- */
body.pagina { display: block; overflow-y: auto; }
.login { max-width: 340px; margin: 18vh auto 0; display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
.login h1 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 8px; }
.login input, .login button { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto); }
.login button { background: var(--texto); color: var(--fundo); border: 0; font-weight: 600; cursor: pointer; }
.erro-login { color: var(--alerta); margin: 0; }

.configuracoes { max-width: 640px; margin: 0 auto; padding: 24px 20px 48px; }
.cabeca-pagina { display: flex; align-items: center; gap: 8px; margin: 0 0 28px -8px; }
.cabeca-pagina h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.configuracoes section { margin-bottom: 28px; }
.configuracoes h2 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fraco); margin: 0 0 8px; }
.ajuste { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--raio); background: var(--painel); margin: 0; }
@media (prefers-color-scheme: light) { .ajuste { border: 1px solid var(--linha); } }
.ajuste-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ajuste-nome { font-weight: 550; }
.ajuste-ajuda { font-size: 12.5px; color: var(--suave); }
.interruptor { display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; cursor: pointer; padding: 4px; color: var(--suave); font-size: 12.5px; }
.trilho { width: 38px; height: 22px; border-radius: 999px; background: var(--superficie-2); position: relative; transition: background .15s; }
.bolinha { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--texto); transition: transform .15s; }
.interruptor[aria-checked="true"] .trilho { background: var(--acento); }
.interruptor[aria-checked="true"] .bolinha { transform: translateX(16px); background: var(--sobre-acento); }
.botao { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 0; cursor: pointer; font-weight: 550; }
.botao.perigo { background: var(--alerta-fundo); color: var(--alerta); }
.configuracoes .token { margin-bottom: 8px; }
.configuracoes .token.revogado .ajuste-nome { text-decoration: line-through; color: var(--suave); }
.token-novo { padding: 14px 16px; border-radius: var(--raio); background: var(--painel); border: 1px solid var(--acento); margin-bottom: 8px; }
.token-novo p { margin: 0 0 8px; }
.token-novo code { display: block; padding: 10px 12px; border-radius: 8px; background: var(--superficie); overflow-wrap: anywhere; user-select: all; }
.token-form { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--raio); background: var(--painel); margin-top: 8px; }
.token-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--suave); }
.token-form input, .token-form select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto); font: inherit; }
.token-form .botao { align-self: flex-start; background: var(--texto); color: var(--fundo); }
/* Números: uma linha por caixa; o pareamento (QR code) abre embaixo, na
   largura toda. O QR fica sobre branco para o celular ler também no tema escuro. */
.configuracoes .numero { flex-wrap: wrap; margin-bottom: 8px; }
.numero .botao { background: var(--texto); color: var(--fundo); }
.numero-estado[data-estado="open"] { color: var(--acento); }
.numero-estado[data-estado="closed"], .numero-estado[data-estado="unreachable"] { color: var(--alerta); }
.numero-qr { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.numero-qr img { background: #fff; padding: 10px; border-radius: 10px; max-width: 100%; height: auto; }
.numero-qr p { margin: 0; }
/* O que deu errado na criação da caixa: embaixo, na largura toda. */
.numero-problema { flex-basis: 100%; font-size: 12.5px; }
p.numero-problema:not(.numero *) { padding: 14px 16px; border-radius: var(--raio); background: var(--painel); margin: 0 0 8px; }

/* ---- Mensagens agendadas ---- */
/* A faixa acima do campo de mensagem: discreta, uma linha por agendada. */
.agendadas { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px; }
.agendadas[hidden] { display: none; }
.agendada { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 14px; background: var(--superficie); color: var(--suave); font-size: 12.5px; flex-wrap: wrap; }
.agendada > .i { width: 14px; height: 14px; flex: none; color: var(--acento); }
.agendada-quando { flex: none; color: var(--texto); font-variant-numeric: tabular-nums; }
.agendada-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agendada-nota { flex: none; color: var(--alerta); }
.agendada .botao-icone { width: 28px; height: 28px; flex: none; }
.agendada .botao-icone .i { width: 15px; height: 15px; }
.agendada-editar summary { list-style: none; cursor: pointer; }
.agendada-editar summary::-webkit-details-marker { display: none; }
.agendada-editar[open] { flex-basis: 100%; order: 9; }
.agendada-editar form { display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 8px 0; }
.agendada-editar textarea, .agendada-editar input, .painel-agendar input {
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); font: inherit;
}
.agendada-editar .botao, .painel-agendar .botao { align-self: flex-start; background: var(--acento); color: var(--sobre-acento); }
/* O painel do relógio, acima do botão (como o menu de anexar). */
.painel-agendar {
  display: flex; flex-direction: column; gap: 8px; min-width: 248px; padding: 12px; border-radius: 12px;
  background: var(--elevado); box-shadow: var(--sombra); border: 1px solid var(--linha);
}
.painel-agendar[hidden] { display: none; }
.painel-agendar label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--suave); }
.painel-ajuda { margin: 0; font-size: 12px; color: var(--fraco); }
/* Na lista: a conversa tem mensagem agendada. */
.marca-ic.agendada { color: var(--acento); }
/* A página /agendadas. */
.agendada-linha { margin-bottom: 8px; align-items: flex-start; }
.agendada-linha .agendada-quando { margin-left: 6px; font-weight: 400; color: var(--suave); }
.agendada-conversa { color: var(--texto); }
.agendada-corpo { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texto); }

/* ---- Transcrição de áudio: embaixo do player ---- */
.transcricao-bloco { margin-top: 6px; max-width: 420px; font-size: 13.5px; }
.transcricao summary { cursor: pointer; font-size: 12px; color: var(--suave); user-select: none; }
.transcricao summary:hover { color: var(--texto); }
.transcricao-texto { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.transcricao-estado { margin: 0; font-size: 12.5px; color: var(--suave); }
.transcricao-estado.falhou { color: var(--alerta); }
.transcrever, .transcrever-de-novo {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--suave); font: inherit; font-size: 12px; cursor: pointer;
}
.transcrever:hover, .transcrever-de-novo:hover { background: var(--citacao); color: var(--texto); }
.transcrever .i { width: 14px; height: 14px; }
.transcrever-de-novo { text-decoration: underline; padding: 0 4px; }

/* ---- Celular: lista e conversa em telas separadas ---- */
@media (max-width: 767px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #coluna-lista { border-right: 0; }
  #app:has(#conversa .conversa) #coluna-lista { display: none; }
  #app:not(:has(#conversa .conversa)) #conversa { display: none; }
  .fechar { display: inline-flex; margin-left: -8px; }
  .topo { padding: 10px 12px; gap: 10px; }
  .mensagens { padding: 14px 12px 12px; }
  .msg { max-width: 84%; }
  .rodape { padding: 6px 8px 8px; }
  .resposta { gap: 0; }
  .previa-palco { padding: 12px; }
  .cabeca-lista { padding: 14px 10px 8px 16px; }
  .filtros { padding: 4px 16px 10px; }
  .lista { padding: 0 6px; }
  .barra-audio { gap: 8px; padding: 0 6px 0 12px; }
  .barra-ic { display: none; }
  .busca-topo { padding: 2px 10px 8px; }
  .busca-conversa { padding: 6px 6px 6px 12px; gap: 2px; }
  .busca-contador { min-width: 0; padding: 0 4px; }
  .atalho { display: none; }
}