/* Chat interno: painel lateral (apps/web/assets/js/chat-ui.js). Só variáveis do tema; o modo escuro vem de graça.
   Todas as classes têm prefixo chat-. */

.chat-drawer{
  position:fixed; top:0; right:0; width:var(--chat-largura,min(55vw,max(740px,40vw))); max-width:100vw;
  height:100vh; height:100dvh;
  background:var(--panel); color:var(--ink); border-left:1px solid var(--line);
  box-shadow:-18px 0 48px rgba(8,18,15,.18);
  transform:translateX(100%); visibility:hidden;
  transition:transform .26s cubic-bezier(.3,.7,.3,1), visibility 0s linear .26s;
  z-index:100001; display:flex; flex-direction:column; overflow:hidden;
  font-family:var(--font-body, inherit); font-size:13px; line-height:1.4;
  --chat-nome-l:40%;
}
.chat-drawer--aberto{ transform:translateX(0); visibility:visible; transition-delay:0s, 0s; }
:root[data-theme="dark"] .chat-drawer{ --chat-nome-l:62%; }
.chat-drawer *{ box-sizing:border-box; }
.chat-drawer button{ font-family:inherit; }
@media (max-width:640px){
  .chat-drawer{ width:100vw; max-width:100vw; border-left:0; }
  /* 16px evita o zoom automático do iOS ao focar o campo */
  .chat-texto, .chat-input, .chat-busca input{ font-size:16px; }
}
@media (prefers-reduced-motion:reduce){
  .chat-drawer, .chat-sheet, .chat-descer, .chat-msg-menu, .chat-msg--destaque .chat-balao, .chat-audio-prog, .chat-envio-barra{ transition:none !important; }
  .chat-grav-ponto{ animation:none !important; }
}
.chat-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.chat-tela{ display:flex; flex-direction:column; flex:1; min-height:0; position:relative; }
.chat-rolagem{ overflow-y:auto; min-height:0; }

/* faixa discreta (reconectando / aberto em outra aba), logo abaixo do cabeçalho */
.chat-faixa{ position:absolute; top:58px; left:0; right:0; z-index:4; display:flex; align-items:center; justify-content:center; gap:10px; padding:4px 12px; font-size:11.5px; color:var(--ink-2); background:var(--amber-soft, var(--chip)); border-bottom:1px solid var(--line-soft); }
.chat-faixa[hidden]{ display:none; }
.chat-faixa span{ display:inline-flex; align-items:center; gap:5px; }

/* cabeçalho */
.chat-cab{ display:flex; align-items:center; gap:10px; padding:10px 12px 10px 14px; border-bottom:1px solid var(--line); flex:0 0 auto; min-height:58px; }
.chat-cab-tit{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; padding:4px 6px; margin:0 -6px; border-radius:8px; }
.chat-cab-tit strong{ font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-cab-sub{ font-size:11.5px; color:var(--ink-3); min-height:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-cab-tit--link{ cursor:pointer; }
.chat-cab-tit--link:hover, .chat-cab-tit--link:focus-visible{ background:var(--hover); outline:none; }
.chat-cab-acoes{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }

/* botões */
.chat-ib{ background:none; border:0; color:var(--ink-2); cursor:pointer; width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0; }
.chat-ib:hover{ background:var(--hover); color:var(--ink); }
.chat-ib:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.chat-ib[hidden]{ display:none; }
.chat-ib--mini{ width:22px; height:22px; }
.chat-btn{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); cursor:pointer; white-space:nowrap; }
.chat-btn:hover{ background:var(--hover); color:var(--ink); }
.chat-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.chat-btn--prim{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.chat-btn--prim:hover{ background:var(--brand-strong, var(--accent)); color:var(--on-accent); }
.chat-btn--perigo{ color:var(--red); border-color:var(--red-line, var(--line)); }
.chat-btn--perigo:hover{ background:var(--red-soft); color:var(--red); }
.chat-btn--perigo-cheio{ background:var(--red); border-color:var(--red); color:#fff; }
.chat-btn--mini{ padding:4px 9px; font-size:11.5px; border-radius:8px; }
.chat-btn[disabled]{ opacity:.5; cursor:default; }
.chat-link{ background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:var(--accent-ink); cursor:pointer; text-decoration:underline; }

/* ferramentas, busca e abas */
.chat-ferramentas{ padding:10px 14px 0; border-bottom:1px solid var(--line-soft); display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }
.chat-busca{ display:flex; align-items:center; gap:8px; background:var(--search, var(--bg-2)); border:1px solid var(--line); border-radius:999px; padding:0 12px; height:34px; color:var(--ink-3); }
.chat-busca:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.chat-busca input{ flex:1; border:0; background:transparent; outline:none; font:inherit; font-size:13px; color:var(--ink); min-width:0; }
.chat-busca input::placeholder{ color:var(--ink-3); }
.chat-botoes{ display:flex; gap:8px; flex-wrap:wrap; }
.chat-abas{ display:flex; gap:2px; margin-top:2px; }
.chat-aba{ background:none; border:0; border-bottom:2px solid transparent; padding:7px 10px 8px; font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-3); cursor:pointer; border-radius:6px 6px 0 0; }
.chat-aba:hover{ color:var(--ink); background:var(--hover); }
.chat-aba:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.chat-aba--ativa{ color:var(--accent-ink); border-bottom-color:var(--accent); }
.chat-secao{ font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.3px; padding:12px 8px 4px; }

/* lista de conversas e pessoas */
.chat-lista{ flex:1; padding:6px 8px; }
.chat-linha{ display:flex; align-items:center; gap:10px; width:100%; padding:8px; border:0; background:none; border-radius:10px; cursor:pointer; text-align:left; font:inherit; color:var(--ink); }
.chat-linha:hover{ background:var(--hover); }
.chat-linha:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.chat-linha--ativa{ background:var(--accent-50); }
.chat-linha-corpo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.chat-linha-topo, .chat-linha-base{ display:flex; align-items:center; gap:8px; min-height:17px; }
.chat-linha-nome{ flex:1; min-width:0; font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-linha-hora{ font-size:11px; color:var(--ink-3); flex:0 0 auto; }
.chat-linha-previa{ flex:1; min-width:0; font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-linha-previa em{ font-style:italic; }
.chat-linha--nao-lida .chat-linha-hora{ color:var(--accent-ink); font-weight:700; }
.chat-linha--nao-lida .chat-linha-previa{ color:var(--ink-2); font-weight:600; }
.chat-badge{ background:var(--accent); color:var(--on-accent); font-size:10.5px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; flex:0 0 auto; }
.chat-mudo{ color:var(--ink-3); display:inline-flex; flex:0 0 auto; }
.chat-dig{ color:var(--accent-ink); font-style:normal; }
.chat-online-txt{ color:var(--good); }

/* avatar */
.chat-av-wrap{ position:relative; display:inline-flex; flex:0 0 auto; }
.chat-av{ position:relative; width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; letter-spacing:.3px; overflow:hidden; flex:0 0 auto; }
.chat-av--s{ width:28px; height:28px; font-size:11px; }
.chat-av--g{ width:88px; height:88px; font-size:30px; }
/* sem fundo: as iniciais ficam visíveis até a foto chegar; foto que falha é removida (onerror) */
.chat-av-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.chat-av-img:not([src]){ display:none; }
.chat-online{ position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:var(--good); border:2px solid var(--panel); }

/* mensagens */
/* Papel de parede estático: a imagem não cria camada sobre texto, cliques ou rolagem. */
.chat-msgs{
  flex:1; padding:10px 12px 8px; display:flex; flex-direction:column; position:relative;
  background-color:#f1f5ee;
  background-image:linear-gradient(rgba(246,248,241,.12),rgba(246,248,241,.12)),url("../../img/chat-oriente-portrait.jpg");
  background-repeat:no-repeat,no-repeat;
  background-size:auto,cover;
  background-position:center,center;
}
:root[data-theme="dark"] .chat-msgs{
  background-color:#101e1a;
  background-image:linear-gradient(rgba(10,27,21,.25),rgba(10,27,21,.25)),url("../../img/chat-oriente-portrait-dark.jpg");
  background-blend-mode:normal,normal;
}
.chat-dia{ display:flex; justify-content:center; margin:10px 0 6px; }
.chat-dia span{ font-size:11px; color:var(--ink-3); background:var(--chip); border-radius:999px; padding:3px 10px; }
.chat-nao-lidas{ display:flex; align-items:center; gap:10px; margin:10px 0 6px; color:var(--accent-ink); font-size:11px; font-weight:700; }
.chat-nao-lidas::before, .chat-nao-lidas::after{ content:""; flex:1; height:1px; background:var(--accent-line); }
.chat-nao-lidas span{ background:var(--accent-soft); border-radius:999px; padding:3px 10px; }
.chat-msg{ display:flex; flex-direction:column; max-width:86%; position:relative; align-self:flex-start; margin-top:2px; }
.chat-msg--ini{ margin-top:8px; }
.chat-dia + .chat-msg, .chat-nao-lidas + .chat-msg{ margin-top:0; }
.chat-msg--minha{ align-self:flex-end; align-items:flex-end; }
.chat-msg--sis{ align-self:center; max-width:92%; text-align:center; font-size:11.5px; color:var(--ink-3); padding:4px 10px; font-style:italic; margin-top:8px; }
.chat-msg--comav{ padding-left:34px; }
.chat-msg-av{ position:absolute; left:0; top:0; }
.chat-msg--comav.chat-msg--ini .chat-msg-av{ top:16px; }
.chat-balao{ background:var(--panel); border:1px solid var(--line-soft); border-radius:14px; padding:7px 10px 5px; font-size:13.5px; line-height:1.4; color:var(--ink); word-break:break-word; min-width:64px; box-shadow:var(--e1); transition:box-shadow .3s; }
.chat-msg--outra.chat-msg--fim .chat-balao{ border-bottom-left-radius:4px; }
.chat-msg--minha .chat-balao{ background:var(--chat-enviada-fundo); border-color:var(--chat-enviada-borda); }
.chat-msg--minha.chat-msg--fim .chat-balao{ border-bottom-right-radius:4px; }
.chat-msg--tmp .chat-balao{ opacity:1; }
.chat-msg--destaque .chat-balao{ box-shadow:0 0 0 3px var(--accent-line); }
.chat-msg-autor{ font-size:11.5px; font-weight:700; margin:0 0 2px 6px; color:hsl(var(--chat-h, 170) 42% var(--chat-nome-l)); }
.chat-msg-texto a{ color:var(--accent-ink); text-decoration:underline; }
.chat-msg-texto--apagada{ font-style:italic; color:var(--ink-3); }
.chat-msg-rodape{ display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:2px; font-size:10.5px; color:var(--ink-3); flex-wrap:wrap; }
.chat-msg-hora{ font-size:11px; color:var(--ink-2); }
.chat-msg-editada{ font-style:italic; }
.chat-msg-estado{ background:none; border:0; padding:0; color:var(--ink-3); display:inline-flex; cursor:pointer; }
.chat-msg-estado--lida{ color:var(--accent-ink); }
.chat-msg-falha-wrap{ display:inline-flex; align-items:center; gap:6px; }
.chat-msg-falha-txt{ color:var(--red); font-size:10.5px; }
.chat-msg-falha{ background:none; border:0; padding:0; color:var(--accent-ink); font:inherit; font-size:10.5px; font-weight:600; cursor:pointer; text-decoration:underline; }
.chat-msg-menu{ position:absolute; top:-2px; width:26px; height:26px; opacity:0; background:var(--panel); border:1px solid var(--line); box-shadow:var(--e1); transition:opacity .15s; }
.chat-msg--outra .chat-msg-menu{ right:-30px; }
.chat-msg--minha .chat-msg-menu{ left:-30px; }
.chat-msg:hover .chat-msg-menu, .chat-msg-menu:focus-visible, .chat-msg:focus-within .chat-msg-menu{ opacity:1; }
.chat-cit{ display:flex; flex-direction:column; width:100%; text-align:left; border:0; border-left:3px solid var(--accent); background:var(--bg-2); border-radius:6px; padding:4px 8px; margin:0 0 6px; font:inherit; cursor:pointer; color:var(--ink-2); }
.chat-cit:hover{ background:var(--hover); }
.chat-cit-autor{ font-size:11px; font-weight:700; color:var(--accent-ink); }
.chat-cit-texto{ font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }
.chat-anexos{ display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
.chat-img-btn{ background:none; border:0; padding:0; cursor:zoom-in; display:block; line-height:0; }
.chat-img-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:10px; }
.chat-img{ max-width:240px; max-height:240px; border-radius:10px; display:block; object-fit:cover; background:var(--chip); min-width:60px; min-height:40px; }
.chat-arq{ display:flex; align-items:center; gap:8px; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:10px; padding:6px 8px; color:var(--ink-2); min-width:200px; }
.chat-arq-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-arq-nome{ font-size:12.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-arq-tam{ font-size:11px; color:var(--ink-3); }
.chat-envio{ height:4px; border-radius:2px; background:var(--chip); overflow:hidden; margin:-2px 0 6px; }
.chat-envio-barra{ height:100%; width:0; background:var(--accent); transition:width .2s; }
.chat-carregando-antes{ text-align:center; font-size:11.5px; color:var(--ink-3); padding:6px; }
.chat-vazio{ padding:30px 20px; text-align:center; color:var(--ink-3); font-size:13px; }
.chat-descer{ position:absolute; right:16px; bottom:76px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:0 10px; height:32px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); box-shadow:var(--e2); cursor:pointer; font:inherit; font-size:11.5px; font-weight:700; transition:opacity .15s; }
.chat-descer:hover{ background:var(--hover); color:var(--ink); }
.chat-descer span:empty{ display:none; }
.chat-descer span{ color:var(--accent-ink); white-space:nowrap; }

/* player de mensagem de voz */
.chat-audio{ display:flex; align-items:center; gap:6px; min-width:220px; max-width:280px; padding:2px 0; }
.chat-audio-btn{ width:36px; height:36px; border-radius:50%; background:var(--accent); color:var(--on-accent); }
.chat-audio-btn:hover{ background:var(--brand-strong, var(--accent)); color:var(--on-accent); }
.chat-audio--carregando .chat-audio-btn{ opacity:.6; }
.chat-audio-meio{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.chat-audio-barra{ position:relative; height:16px; display:flex; align-items:center; cursor:pointer; border-radius:8px; }
.chat-audio-barra::before{ content:""; position:absolute; left:0; right:0; height:4px; border-radius:2px; background:var(--line-2, var(--line)); }
.chat-audio-barra:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.chat-audio-prog{ position:relative; height:4px; width:0; border-radius:2px; background:var(--accent); transition:width .15s linear; }
.chat-audio-prog::after{ content:""; position:absolute; right:-5px; top:-3px; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:var(--e1); }
.chat-audio-info{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.chat-audio-vel{ background:var(--chip); border:0; border-radius:999px; padding:1px 7px; font:inherit; font-size:10.5px; font-weight:700; color:var(--ink-2); cursor:pointer; }
.chat-audio-vel:hover{ background:var(--hover); color:var(--ink); }
.chat-audio-vel:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* compositor */
.chat-compositor{ border-top:1px solid var(--line); padding:8px 10px; background:var(--panel); flex:0 0 auto; }
.chat-comp-linha{ display:flex; align-items:flex-end; gap:6px; }
.chat-comp-linha[hidden]{ display:none; }
.chat-texto{ flex:1; resize:none; border:1px solid var(--line); border-radius:12px; padding:8px 12px; font:inherit; font-size:13.5px; line-height:20px; color:var(--ink); background:var(--input, var(--panel)); outline:none; max-height:136px; min-height:36px; overflow-y:hidden; }
.chat-texto::placeholder{ color:var(--ink-3); }
.chat-texto:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.chat-enviar{ color:var(--accent); }
.chat-enviar:hover{ background:var(--accent-50); color:var(--accent-ink); }
.chat-comp-barra{ display:flex; align-items:center; gap:8px; padding:6px 8px; margin-bottom:6px; border-left:3px solid var(--accent); background:var(--accent-50); border-radius:8px; font-size:12px; color:var(--ink-2); }
.chat-comp-barra b{ color:var(--accent-ink); white-space:nowrap; }
.chat-comp-barra span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-comp-barra .chat-ib{ width:24px; height:24px; }
.chat-pend{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.chat-pend:empty{ display:none; }
.chat-pend-item{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:8px; padding:4px 6px; background:var(--bg-2); font-size:11.5px; color:var(--ink-2); max-width:100%; }
.chat-pend-item img{ width:34px; height:34px; object-fit:cover; border-radius:6px; }
.chat-pend-nome{ max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.chat-drop{ display:none; position:absolute; inset:0; z-index:5; align-items:center; justify-content:center; background:var(--accent-50); border:2px dashed var(--accent); color:var(--accent-ink); font-weight:700; pointer-events:none; }
.chat-drawer--drop .chat-drop{ display:flex; }
/* gravação de voz (no lugar do campo de texto) */
.chat-grav{ display:flex; align-items:center; gap:8px; min-height:36px; padding:0 4px; }
.chat-grav[hidden]{ display:none; }
.chat-grav-ponto{ width:10px; height:10px; border-radius:50%; background:var(--red); flex:0 0 auto; animation:chat-pulso 1.2s ease-in-out infinite; }
@keyframes chat-pulso{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.8); } }
.chat-grav-tempo{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); min-width:42px; }
.chat-grav-dica{ flex:1; min-width:0; font-size:12px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* formulários (novo grupo) */
.chat-form{ flex:1; padding:12px 14px; display:flex; flex-direction:column; gap:12px; }
.chat-campo{ display:flex; flex-direction:column; gap:5px; }
.chat-campo > span{ font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.3px; }
.chat-input{ border:1px solid var(--line); border-radius:10px; padding:8px 11px; font:inherit; font-size:13.5px; color:var(--ink); background:var(--input, var(--panel)); outline:none; width:100%; }
.chat-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.chat-form .chat-lista{ padding:0; }
.chat-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chat-chips:empty{ display:none; }
.chat-chip{ display:inline-flex; align-items:center; gap:4px; background:var(--accent-soft); color:var(--accent-ink); border-radius:999px; padding:3px 6px 3px 10px; font-size:12px; font-weight:600; }
.chat-chip button{ background:none; border:0; color:inherit; cursor:pointer; display:inline-flex; padding:0; border-radius:50%; }
.chat-chip button:hover{ background:var(--accent-line); }
.chat-check{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line-2, var(--line)); display:inline-flex; align-items:center; justify-content:center; color:var(--on-accent); flex:0 0 auto; }
.chat-check--on{ background:var(--accent); border-color:var(--accent); }
.chat-rodape-acoes{ padding:10px 14px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; flex:0 0 auto; background:var(--panel); }

/* informações do grupo / contato */
.chat-info{ flex:1; padding:14px; }
.chat-info-topo{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.chat-info-topo h3{ margin:6px 0 0; font-size:17px; color:var(--ink); display:flex; align-items:center; gap:4px; max-width:100%; word-break:break-word; }
.chat-info-topo p{ margin:0; color:var(--ink-3); font-size:12.5px; display:flex; align-items:center; gap:4px; }
.chat-info-foto-acoes{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.chat-info-edit{ display:flex; gap:6px; width:100%; align-items:center; }
.chat-info-sec{ padding:12px 0; border-bottom:1px solid var(--line-soft); }
.chat-info-sec:last-child{ border-bottom:0; }
.chat-info-sec-tit{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px; }
.chat-info-sec-tit span{ flex:1; }
.chat-info-linha{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chat-info-linha strong{ color:var(--ink); font-size:13px; }
.chat-info-linha small{ display:block; color:var(--ink-3); font-size:11.5px; }
.chat-part{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.chat-part-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-part-nome{ font-weight:600; font-size:13px; color:var(--ink); display:flex; gap:6px; align-items:center; min-width:0; }
.chat-part-nome small{ color:var(--ink-3); font-weight:400; }
.chat-part-cargo{ font-size:11.5px; color:var(--ink-3); }
.chat-selo{ font-size:10px; font-weight:700; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border-radius:999px; padding:1px 7px; letter-spacing:.3px; }
.chat-part-acoes{ display:flex; gap:4px; align-items:center; flex:0 0 auto; }

/* menu da mensagem (no body) */
.chat-menu{ position:fixed; z-index:100003; display:none; min-width:170px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:4px; box-shadow:var(--e2); font-family:var(--font-body, inherit); }
.chat-menu-item{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 11px; background:none; border:0; border-radius:8px; cursor:pointer; font:inherit; font-size:12.5px; color:var(--ink); text-align:left; white-space:nowrap; }
.chat-menu-item:hover, .chat-menu-item:focus-visible{ background:var(--hover); outline:none; }
.chat-menu-item--perigo{ color:var(--red); }

/* sheet (quem leu, confirmações) dentro do painel */
.chat-sheet-fundo{ position:absolute; inset:0; z-index:6; background:rgba(8,18,15,.35); display:none; align-items:flex-end; }
.chat-sheet{ width:100%; max-height:75%; background:var(--panel); border-radius:16px 16px 0 0; display:flex; flex-direction:column; box-shadow:var(--e3); }
.chat-sheet-topo{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px 8px; border-bottom:1px solid var(--line-soft); }
.chat-sheet-topo strong{ font-size:14px; color:var(--ink); }
.chat-sheet-corpo{ padding:10px 14px; font-size:13px; color:var(--ink-2); }
.chat-sheet-texto{ margin:4px 0 8px; color:var(--ink); }
.chat-sheet-rodape{ display:flex; justify-content:flex-end; gap:8px; padding:10px 14px 14px; }

/* imagem em tela cheia */
.chat-lightbox{ position:fixed; inset:0; z-index:100004; background:rgba(0,0,0,.86); display:none; align-items:center; justify-content:center; cursor:zoom-out; }
.chat-lightbox img{ max-width:94vw; max-height:92vh; border-radius:8px; box-shadow:var(--e3); cursor:default; }
.chat-lightbox-acoes{ position:absolute; top:12px; right:12px; display:flex; gap:4px; }
.chat-lightbox .chat-ib{ color:#fff; width:40px; height:40px; }
.chat-lightbox .chat-ib:hover{ background:rgba(255,255,255,.15); color:#fff; }
.chat-lightbox .chat-ib:focus-visible{ outline:2px solid #fff; }

/* botão do topo: badge e estado ativo */
.chat-badge-topo{ position:absolute; top:-2px; right:-2px; background:var(--red); color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--panel); }
.topbar #chatBtn.chat-btn-ativo{ background:var(--accent-50) !important; border-color:var(--accent-line) !important; color:var(--accent-ink) !important; }

/* toque (celular, tablet): sem hover, o menu vem por toque longo; alvos de 40 px */
@media (hover:none){
  .chat-msg-menu{ display:none; }
  .chat-ib{ width:40px; height:40px; }
  .chat-ib--mini{ width:28px; height:28px; }
  .chat-comp-barra .chat-ib{ width:32px; height:32px; }
  .chat-linha{ min-height:56px; }
  .chat-menu-item{ padding:12px 14px; font-size:13.5px; }
  .chat-aba{ padding:10px 14px 11px; }
  .chat-audio-vel{ padding:5px 10px; }
  .chat-msg-estado, .chat-msg-falha{ min-height:28px; }
  .chat-balao{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
}

/* Texto e compositor mantêm seleção nativa, inclusive no toque. */
.chat-msg-texto, .chat-citacao, #chatTexto { -webkit-user-select: text; user-select: text; cursor: text; }

/* Painel adaptável: conversa única, trilho de fotos e lista completa. */
.chat-layout{display:flex;flex:1;min-height:0;min-width:0;overflow:hidden}
.chat-layout>.chat-tela{min-width:0;flex:1}
.chat-lateral{display:none;flex-direction:column;flex:none;width:248px;min-height:0;background:var(--panel);border-right:1px solid var(--line)}
.chat-drawer[data-layout="amplo"] .chat-lateral,.chat-drawer[data-layout="compacto"] .chat-lateral{display:flex}
.chat-lateral-topo{display:flex;align-items:center;gap:3px;min-height:58px;padding:10px;border-bottom:1px solid var(--line)}
.chat-lateral-topo strong{flex:1;padding-left:5px;font-size:15px}
.chat-busca-lateral{margin:10px 8px 4px;flex:none}.chat-busca-lateral input{width:100%}
.chat-lateral-lista{flex:1;padding:5px;min-height:0}.chat-lateral-lista .chat-linha{gap:8px;padding:9px 6px}
.chat-lateral-lista .chat-linha-hora{font-size:10px}.chat-lateral-lista .chat-linha-nome{font-size:12.5px}
.chat-lateral-vazia{padding:10px;color:var(--ink-3);font-size:12px}
.chat-drawer[data-layout="compacto"] .chat-lateral{width:74px}
.chat-drawer[data-layout="compacto"] .chat-lateral-topo{flex-direction:column;gap:5px;padding:10px 4px}
.chat-drawer[data-layout="compacto"] .chat-lateral-topo strong,.chat-drawer[data-layout="compacto"] .chat-busca-lateral,.chat-drawer[data-layout="compacto"] .chat-lateral .chat-linha-corpo,.chat-drawer[data-layout="compacto"] .chat-lateral-vazia{display:none}
.chat-drawer[data-layout="compacto"] .chat-lateral-lista .chat-linha{justify-content:center;position:relative;padding:10px 5px}
.chat-drawer[data-layout="amplo"] .chat-tela[data-tela="conversa"]>.chat-cab>[data-acao="voltar"]{display:none}
.chat-inicio{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:28px;text-align:center;background:var(--bg)}
.chat-inicio img{width:58px;height:58px;opacity:.7}.chat-inicio strong{font-size:20px}.chat-inicio p{max-width:250px;color:var(--ink-3);line-height:1.6}
.chat-resize{position:absolute;left:0;top:0;bottom:0;width:9px;cursor:ew-resize;touch-action:none;z-index:9;outline:none}
.chat-resize::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .15s}
.chat-resize:hover::after,.chat-resize:focus-visible::after,.chat-drawer--redimensionando .chat-resize::after{background:var(--accent)}
.chat-drawer--redimensionando{transition:none}
.chat-enviar{width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--on-accent,#fff);box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 20%,transparent);transition:transform .15s,background .15s;flex:none;margin-left:2px}
.chat-enviar:hover{background:var(--brand-strong,var(--accent));color:var(--on-accent,#fff);transform:translateY(-1px)}
.chat-enviar:active{transform:scale(.93)}.chat-enviar:disabled{opacity:.42;cursor:default;transform:none;box-shadow:none}
.chat-envio-voo{font-family:var(--font-body,inherit)}
@media(max-width:640px){.chat-resize{display:none}.chat-drawer{width:100vw;max-width:100vw}.chat-lateral{display:none!important}}

.chat-msg--voando .chat-balao{visibility:hidden}

.chat-drawer[data-layout="compacto"] .chat-lateral .chat-linha:not([data-nao-lidas="0"])::after{content:attr(data-nao-lidas);position:absolute;right:3px;top:4px;min-width:16px;height:16px;padding:0 3px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-size:9px;font-weight:700;display:grid;place-items:center;border:1px solid var(--panel)}

/* Verde sólido separa as mensagens enviadas do papel de parede nos dois temas.
   A mesma paleta acompanha o balão durante a animação de envio. */
:root{--chat-enviada-fundo:#14573e;--chat-enviada-borda:#0c422d;--chat-recebida-fundo:#355171;--chat-recebida-borda:#253e5c}
:root[data-theme="dark"]{--chat-enviada-fundo:#14573e;--chat-enviada-borda:#0c422d;--chat-recebida-fundo:#30435c;--chat-recebida-borda:#738fae}
.chat-balao,.chat-envio-voo{opacity:1;background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none;mix-blend-mode:normal}
.chat-msg--outra .chat-balao{
  --ink:#f4f7ff;--ink-2:#e1eaf8;--ink-3:#c5d4eb;--bg-2:#243b57;--hover:#1f334b;
  --accent:#b4deef;--accent-ink:#c9efff;--on-accent:#17324b;--brand-strong:#94c7df;
  --line:#6987aa;--line-soft:#5f7b9a;--line-2:#91a8c6;--chip:#243b57;
  color:var(--ink);background:var(--chat-recebida-fundo);border-color:var(--chat-recebida-borda);box-shadow:0 2px 6px rgb(17 36 60 / .18);
}
:root[data-theme="dark"] .chat-msg--outra .chat-balao{--ink:#f4f7ff;--ink-2:#e1eaf8;--ink-3:#c5d4eb;--bg-2:#22344d;--hover:#1b2c43}
.chat-msg--minha .chat-balao,.chat-envio-voo{
  --ink:#fff;--ink-2:#effbf5;--ink-3:#e0f3e9;
  --accent:#c2efd5;--accent-ink:#dbffeb;--accent-line:#78b99a;
  --bg-2:#124c37;--hover:#0e402e;--chip:#124c37;
  --line:#78b99a;--line-soft:#529777;--line-2:#78b99a;
  --on-accent:#123e2a;--brand-strong:#a3dfbd;
  color:var(--ink);background:var(--chat-enviada-fundo);border-color:var(--chat-enviada-borda);
  box-shadow:0 2px 6px rgb(6 34 21 / .22);
}
.chat-msg--minha .chat-msg-estado,.chat-envio-voo .chat-msg-estado{flex-shrink:0;opacity:1}
.chat-msg--minha .chat-msg-estado--lida,.chat-envio-voo .chat-msg-estado--lida{color:#9be7ff}

.chat-msg--sis{background:var(--panel);border:1px solid var(--line-soft);border-radius:10px}