/* Chat — compositor rico, menções, reações, citação (SP2a Tasks 8-9). */
/* envolve toolbar+editor+popover de menções dentro do .chat-compose (flex row
   existente em styles.css, com o botão de anexo e o de Enviar). Sem
   position/overflow próprios: o popover de menções (.chat-mention-pop) é
   absolute e conta com o .right-panel (position:fixed) como ancestor
   posicionado — um wrapper position:relative aqui tornava-o relativo a uma
   caixa de ~70px de altura e cortava-o no overflow:hidden do .rp-pane. */
.chat-compose-editor{ flex:1; min-width:0; background:var(--bg1,#fff);
  border:1px solid var(--line,#ececec); border-radius:14px; }
.chat-toolbar{ display:flex; gap:4px; padding:4px 6px; border-bottom:1px solid var(--line,#ececec); }
/* o `display:flex` de cima é uma CLASSE e vence o `[hidden]`, que é estilo do
   browser — sem esta linha a barra de formatação nasce escondida no HTML e
   aparece na mesma no ecrã. */
.chat-toolbar[hidden]{ display:none; }

/* ── compositor em duas filas (17/09) ───────────────────────────────────────
   Estava tudo na mesma linha — anexo, toolbar de cinco botões, editor e
   «Enviar» — num painel de 400px. O placeholder partia-se em três linhas e o
   Enviar, que é A ação do chat, era o elemento mais pequeno do ecrã.
   O texto passa a ter a fila toda; as ações descem para baixo. */
.chat-compose{ flex-direction:column; align-items:stretch; gap:6px; }
.chat-compose-acoes{ display:flex; align-items:center; gap:6px; }
.chat-compose-vao{ flex:1; }
.chat-ac-ico{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 7px; border:0; border-radius:8px;
  background:transparent; color:var(--text3,#75757c); cursor:pointer;
  font-size:13px; font-weight:600; line-height:1;
}
/* o mesmo caso da `.chat-toolbar` acima, e com o mesmo custo: o
   `display:inline-flex` é uma CLASSE e vence o `[hidden]`, que é estilo do
   browser. O `_pintarClipe` punha `b.hidden = true` a quem o servidor proíbe
   de enviar ficheiros (Grupos & Acessos, módulo `chat_ficheiros`) e o clipe
   ficava no ecrã na mesma: a pessoa carregava, o Windows abria o seletor,
   escolhia o documento — e só então levava com a recusa. Prometer e recusar
   depois é pior do que não oferecer. */
.chat-ac-ico[hidden]{ display:none; }
/* e a caixa de escrever inteira, pela mesma razão: nos grupos de anúncios o
   `_pintarBloqueioDeEscrita` esconde-a com `hidden`. */
.chat-compose[hidden]{ display:none; }
.chat-ac-ico:hover{ background:var(--bg2,#f6f6f7); color:var(--text,#1b1b1f); }
.chat-ac-ico.on{ background:var(--cyan-soft,#eef5fd); color:var(--cyan,#0071e3); }
/* «Enviar» é a ação principal — passa a ter o tamanho de uma ação principal */
.chat-enviar{
  border:0; border-radius:9px; padding:0 16px; height:30px; cursor:pointer;
  background:var(--cyan,#0071e3); color:var(--on-accent,#fff);
  font-size:13px; font-weight:600; letter-spacing:-.01em;
}
.chat-enviar:hover{ background:var(--cyan2,#0077ed); }
.chat-enviar:disabled{ opacity:.5; cursor:default; }
.chat-toolbar button{ min-width:26px; height:26px; border:0; background:transparent; cursor:pointer;
  border-radius:6px; color:var(--text,#1b1b1f); font-size:13px; }
.chat-toolbar button:hover{ background:var(--bg2,#f6f6f7); }
.chat-editor{ min-height:38px; max-height:140px; overflow-y:auto; padding:8px 10px; font-size:14px;
  outline:none; color:var(--text,#1b1b1f); }
.chat-editor:empty::before{ content:attr(data-ph); color:var(--text3,#9a9aa0); }
.chat-editor .cm-mencao{ color:var(--cyan,#0071e3); font-weight:600; }
.chat-mention-pop{ position:absolute; bottom:64px; left:12px; right:12px; z-index:40;
  background:var(--bg,#fff); border:1px solid var(--line,#ececec); border-radius:10px;
  box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.12)); max-height:200px; overflow-y:auto; }
/* As reacoes tinham aqui um estilo que competia com o de baixo (o .mine punha
   fundo azul e texto branco, e os chips assentam JA numa bolha azul). Uma
   definicao so, no bloco «reacoes: chips e picker» no fim do ficheiro. */
/* As .chat-msg-actions viviam DENTRO do .cm-corpo, no meio do texto — era
   a raiz do «ficou horrível». Passaram a .cm-ferram, uma pílula que flutua
   por cima da bolha; o estilo está no bloco do desenho A, no fim. */
.chat-reply-banner{ display:flex; justify-content:space-between; align-items:center;
  padding:5px 10px; background:var(--bg2,#f6f6f7); border-left:3px solid var(--cyan,#0071e3); font-size:12px; }
.cm-citacao{ border-left:2px solid var(--line,#cfcfd4); padding-left:8px; margin-bottom:3px;
  color:var(--text3,#75757c); font-size:12px; }

/* Mensagens da conversa (renderConversa, Task 6): .chat-message já tem a caixa
   base em styles.css — aqui só o que falta: a variante "minha" (.me, não
   .mine) e o autor/corpo (.cm-autor/.cm-corpo) que o render usa. */
/* O alinhamento e a cor das minhas mensagens passaram para o .cm-bloco
   (desenho A): a bolha já não se posiciona sozinha, vive dentro de um
   bloco que junta as mensagens seguidas da mesma pessoa. */
.cm-corpo{ font-size:12.5px; color:var(--text,#1b1b1f); line-height:1.45; word-wrap:break-word; }
.chat-message.me .cm-corpo{ color:var(--on-accent,#fff); }
.cm-corpo p{ margin:0 0 4px; }
.cm-corpo p:last-child{ margin-bottom:0; }
.cm-corpo ul,.cm-corpo ol{ margin:2px 0 4px; padding-left:20px; }
/* a MESMA lista na caixa de escrever (QA de 23/09): sem recuo, as marcas
   ficavam fora da caixa e o `overflow` cortava-as — escrevia-se uma lista sem
   a ver, e só a bolha a mostrava */
#chatEditor ul,#chatEditor ol{ margin:2px 0; padding-left:20px; }

/* ─── lista de conversas: scroll próprio + tamanho de fonte (ajuste UI) ─── */
/* os wrappers das vistas têm de ser flex-column para o #chatList (flex:1,
   overflow-y:auto) e o #chatMessages ganharem altura e fazerem scroll dentro
   do painel de altura fixa; sem isto a lista transborda o overflow:hidden do
   painel e não há scroll. */
#chatListView, #chatConvView{ display:flex; flex-direction:column; flex:1; min-height:0; }
#chatListView[hidden], #chatConvView[hidden]{ display:none; }
#chatList, #chatMessages{ min-height:0; }

/* fonte mais pequena e fina na lista (alinhada com o resto da página/agenda) */
#chatList .mui-item{ padding:7px 14px; }
#chatList .mui-item-title{ font-size:12.5px; font-weight:500; }
#chatList .mui-item-sub{ font-size:11px; }

/* contadores por separador: total de cada; vermelho se houver por ler, senão
   só a negrito. O número está dentro do chip, por isso clicar nele filtra. */
.chat-filter-chip{ display:inline-flex; align-items:center; gap:5px; }
.chip-count{ font-family:var(--font-mono,ui-monospace,monospace); font-size:9.5px;
  font-weight:700; color:var(--text2,#75757c); letter-spacing:.02em; }
.chip-count:empty{ display:none; }
.chip-count.has-unread{ color:var(--red,#d9363e); }

/* botão "Carregar mais" no fim da lista (paginação de 10 em 10) */
.chat-load-more{ display:block; width:calc(100% - 24px); margin:6px 12px 12px; padding:8px;
  border:1px solid var(--line,#ececec); border-radius:10px; background:var(--bg2,#f6f6f7);
  color:var(--text2,#75757c); font-size:12px; font-weight:600; cursor:pointer; transition:.15s; }
.chat-load-more:hover{ background:var(--bg3,#eee); color:var(--text,#1b1b1f); }

/* chats de grupo: caixa com linha azul fina à volta (tom subtil) */
#chatList .mui-item--grupo{ background:var(--bg2,#f6f6f7);
  border:1px solid var(--cyan,#0071e3); border-radius:8px; margin:3px 6px; }

/* ─── §6 · a tira dos PEDIDOS AO RH (só no canal do RH) ───────────────────────
   Vive IMEDIATAMENTE ANTES do `.chat-compose`, dentro do `#chatConvView` — «por
   cima da caixa de escrita» (§6.1).
   A 1.ª versão punha-a DENTRO do `.chat-compose` (a técnica do
   `.chat-reply-banner`) com `flex-basis:100%`. NÃO funciona: o `.chat-compose` é
   um flex ROW SEM `flex-wrap`, logo o `100%` não passa para outra linha —
   encolhe os irmãos. Medido em Chrome a 04/08: o `#chatEditor` ficava com 20px e
   a caixa de escrever inutilizável, com a tira bonita por cima. O
   `#chatConvView` é um flex COLUMN, e aqui a tira é uma linha inteira sem tocar
   em ninguém.
   Cor e medida por TOKEN, com fallback (REGRAS §6) — nada de hex à mão. */
.chat-pedidos{ flex:0 0 auto; }
.chat-pedidos-tira{ display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:5px 8px; border-bottom:1px solid var(--line,#ececec); }
.chat-pedidos-rot{ font-size:10.5px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text3,#9a9aa0); }
.chat-pedido-chip{ border:1px solid var(--line,#ececec); background:var(--bg2,#f6f6f7);
  color:var(--text,#1b1b1f); border-radius:999px; padding:3px 10px; font-size:11.5px;
  cursor:pointer; transition:.15s; }
.chat-pedido-chip:hover{ border-color:var(--cyan,#0071e3); color:var(--cyan,#0071e3); }
/* o gate: a lista dos tipos aparece sem o `.sql` ter corrido, mas GRAVAR não —
   e isso diz-se ANTES de a pessoa preencher, nunca num 503 no fim */
.chat-pedidos-gate{ padding:4px 8px; font-size:10.5px; line-height:1.35;
  color:var(--amber,#a86b00); background:var(--bg2,#f6f6f7);
  border-bottom:1px solid var(--line,#ececec); }

/* ── recibos de leitura: enviada · entregue · vista ─────────────────────────
   Os três degraus do WhatsApp. A bolha desta casa é AZUL SÓLIDA
   (.chat-message.me) e não verde-claro, e as cores que estavam inline —
   cinzento para enviada, azul para vista — desapareciam em cima dela: o azul
   sobre azul era literalmente invisível (visto no ecrã a 2026-09-16).

   Herda-se a cor da BOLHA (color:inherit) e varia-se só a opacidade:
   discreto → claro → cheio. Assim não há cor escrita à mão nenhuma (REGRAS §6),
   e funciona em qualquer bolha e em qualquer tema, claro ou escuro — se a bolha
   um dia mudar de cor, os recibos acompanham sem se tocar aqui.

   O ✓✓ da vista ainda ENGROSSA: quem distingue mal contrastes fica com uma
   segunda pista além da transparência. */
.cm-recibo{ color:inherit; font-size:11px; margin-left:6px;
  letter-spacing:-.5px; white-space:nowrap; }
.cm-recibo-enviada { opacity:.55; }
.cm-recibo-entregue{ opacity:.8; }
.cm-recibo-vista   { opacity:1; font-weight:700; }

/* O ESTADO POR EXTENSO, só debaixo da ÚLTIMA mensagem minha.
   Os ✓ dizem tudo a quem já sabe o código e nada a quem não sabe. A palavra
   resolve isso onde a pergunta se faz — e ensina o código para as de cima.
   Fica FORA da bolha: aqui já não há fundo azul, e por isso pode levar cor. */
.cm-recibo-pe{
  align-self:flex-end; font-size:10.5px; margin-top:2px; padding-right:2px;
  color:var(--text3,#75757c); letter-spacing:-.01em;
}
.cm-pe-vista{ color:var(--cyan,#0071e3); font-weight:600; }

/* ── reações: chips e picker ────────────────────────────────────────────────
   Os chips ficavam na bolha AZUL das minhas mensagens e no fundo claro das
   dos outros, com o mesmo estilo — na bolha azul quase não se liam. Herdam
   agora o fundo por transparência (rgba do branco/preto não serve nas duas),
   por isso usam-se as mesmas variáveis da casa, com o mesmo truque dos
   recibos: cor herdada, contraste por opacidade e por borda.

   O número separa-se do emoji (.cr-emoji / .cr-n) para o emoji poder crescer
   sem empurrar a contagem, e o chip não salta de largura quando passa de 9
   para 10. */
.chat-reactions{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; align-items:center; }
.chat-reaction{ display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  padding:2px 8px; border-radius:999px; font-size:12px; line-height:18px;
  border:1px solid currentColor; background:transparent; color:inherit;
  opacity:.75; transition:opacity .12s, transform .12s; }
.chat-reaction:hover{ opacity:1; transform:translateY(-1px); }
.chat-reaction .cr-emoji{ font-size:14px; }
.chat-reaction .cr-n{ font-variant-numeric:tabular-nums; min-width:8px; text-align:center; }
/* a minha reação: cheia, para se distinguir das outras num relance */
.chat-reaction.mine{ opacity:1; font-weight:600; border-width:2px; }

/* o picker: os seis do costume em cima, a grelha por baixo */
.cr-rapidos{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
  padding-bottom:10px; border-bottom:1px solid var(--line,#ececec); }
.cr-grelha{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; padding-top:10px; }
.cr-pick{ font-size:22px; line-height:1; padding:8px; cursor:pointer;
  border:1px solid transparent; border-radius:10px; background:transparent; }
.cr-pick:hover{ background:var(--bg2,#f6f6f7); transform:scale(1.15); }
.cr-pick.is-minha{ border-color:var(--cyan,#0071e3); background:var(--bg2,#f6f6f7); }


/* ── quem reagiu: uma linha por pessoa ──────────────────────────────────────
   O chip deixou de tirar a reacao e passou a ABRIR isto. Era ao contrario e
   estava mal: o gesto mais facil de acertar por engano -- o chip e pequeno e
   fica debaixo da mensagem -- fazia a coisa irreversivel, e para saber quem
   tinha reagido era preciso um ⋯ ao lado, que agora saiu. */
.cr-quem-linha{ display:flex; align-items:center; gap:10px; }
.cr-quem-emoji{ font-size:18px; line-height:1; }
.cr-quem-nome{ flex:1; min-width:0; }
/* a minha linha e a unica com accao: o «Remover» vive onde ja se esta a olhar */
.cr-quem-linha.is-eu .cr-quem-nome{ font-weight:600; }
.cr-tirar{ border:1px solid var(--line,#ececec); background:var(--bg,#fff);
  color:var(--red,#c0392b); border-radius:8px; padding:3px 10px; font-size:12px;
  cursor:pointer; white-space:nowrap; }
.cr-tirar:hover{ background:var(--bg2,#f6f6f7); border-color:var(--red,#c0392b); }


/* ── anexos ──────────────────────────────────────────────────────────────────
   Duas peças com propósitos opostos, e por isso com formas diferentes:

   A TIRA (.chat-anexos-tira) é o que está ESCOLHIDO e ainda não foi enviado.
   Vive por cima da caixa de escrita e cada item tem um × — é uma lista de
   trabalho, feita para se mexer nela. Fica FORA do `.chat-compose` pela mesma
   razão da tira dos pedidos: aquele é um flex row sem wrap e um filho a mais
   esmaga o editor (medido: 20px de largura).

   OS CARTÕES (.chat-anexos) são o que já foi ENVIADO, dentro da bolha da
   mensagem. Não têm ×: uma mensagem enviada não se reescreve. As fotos aparecem
   como miniatura (é a resposta à pergunta «o que é isto?» sem ter de abrir); o
   resto é uma linha com ícone, nome e «PDF · 842 KB».

   Cor: por token e por opacidade, nunca escrita à mão. Os cartões assentam numa
   bolha que pode ser branca (mensagem dos outros) ou AZUL (as minhas) — foi
   exactamente aqui que os chips das reações se tornaram invisíveis, com fundo
   azul em cima de azul. `currentColor` resolve as duas de uma vez. */
.chat-anexos-tira{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px 0; }
.chat-anexo-item{ display:flex; align-items:center; gap:8px; max-width:260px;
  padding:6px 8px; border:1px solid var(--line,#ececec); border-radius:10px;
  background:var(--bg1,#fff); font-size:12px; }
.chat-anexo-item.is-subir{ opacity:.65; }
.chat-anexo-item.is-erro{ border-color:var(--red,#c0392b); }
.chat-anexo-item .ca-ico{ font-size:16px; line-height:1; flex:none; }
.chat-anexo-item .ca-txt{ display:flex; flex-direction:column; min-width:0; flex:1; }
.chat-anexo-item .ca-nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--text,#1b1b1f); }
.chat-anexo-item .ca-sub{ font-size:11px; color:var(--text3,#75757c); }
.chat-anexo-item.is-erro .ca-sub{ color:var(--red,#c0392b); white-space:normal; }
.ca-tirar{ border:0; background:transparent; cursor:pointer; flex:none;
  color:var(--text3,#75757c); font-size:16px; line-height:1; padding:0 2px; }
.ca-tirar:hover{ color:var(--red,#c0392b); }

/* os que já foram enviados, dentro da bolha */
.chat-anexos{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chat-anexo-cartao{ display:flex; align-items:center; gap:8px; width:100%; max-width:280px;
  padding:6px 8px; border:1px solid currentColor; border-radius:10px;
  background:transparent; color:inherit; cursor:pointer; text-align:left;
  font-size:12px; opacity:.85; transition:opacity .12s; }
.chat-anexo-cartao:hover{ opacity:1; }
.chat-anexo-cartao .ca-ico{ font-size:16px; line-height:1; flex:none; }
/* NUMA LINHA, não em duas (17/09): o cartão ocupava duas alturas de texto para
   dizer «nome» e «PDF · 80 B». Numa linha diz o mesmo e a bolha encolhe com
   ele. O nome corta com reticências; o tipo e o tamanho nunca encolhem, que é
   a informação que decide se vale a pena abrir. */
.chat-anexo-cartao{ padding:5px 7px; }
.chat-anexo-cartao .ca-txt{ display:flex; align-items:baseline; gap:6px; min-width:0; flex:1; }
.chat-anexo-cartao .ca-nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.chat-anexo-cartao .ca-sub{ font-size:11px; opacity:.75; flex:none; white-space:nowrap; }
.ca-baixar{ border:0; background:transparent; color:inherit; cursor:pointer;
  flex:none; font-size:15px; line-height:1; padding:0 2px; opacity:.7; }
.ca-baixar:hover{ opacity:1; }

/* fotos: a miniatura nasce vazia e o montarMiniaturas() enche-a com os bytes */
.chat-anexo-foto{ width:140px; height:140px; border-radius:10px; overflow:hidden;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  border:1px solid currentColor; }
.chat-anexo-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.ca-foto-vazia{ font-size:24px; opacity:.4; }

/* o visor mudou de casa: ver o bloco «o visor dos anexos», no fim. */


/* ── urgentes ────────────────────────────────────────────────────────────────
   Três sítios para o mesmo estado, e cada um responde a uma pergunta:

     .chat-urg-row    na LISTA    — «o que precisa de mim?» (a secção «Precisa
                                    de ti», que atravessa todas as conversas)
     .cu-ir           na CONVERSA — a pastilha na barra: quantas precisam de
                                    mim aqui, e leva à seguinte
     .cm-urg-pe       na MENSAGEM — por baixo dela: o «Confirmar receção», ou
                                    de quem o autor está à espera

   Cor (23/09): o vermelho da casa (--red) quer dizer «alguém espera por ti e
   ainda não confirmaste», e mais nada; o que é do autor é --chat-tinta-2/-3 (a
   pele). Por token, nunca à mão (REGRAS §6).

   A mensagem urgente NÃO muda a bolha — nem fundo nem barra. A bolha já é azul
   quando é minha, e pintá-la de vermelho tornava o texto ilegível — foi
   exactamente o que aconteceu com os chips das reações. */

/* a marca dentro da bolha */
/* A marca da urgência DENTRO da bolha morreu com o desenho A. O que ficou
   é o .cm-urg-pe, uma linha POR BAIXO — ver o bloco do desenho A. */
/* dentro da bolha azul (as minhas), a cor herda-se: o vermelho em cima de
   azul nao se le, e escrever o branco a mao era o defeito dos chips das reacoes
   outra vez (REGRAS 6: cor por token, nunca a mao). */

.cm-urg-vi{ border:1px solid currentColor; background:transparent; color:inherit;
  border-radius:999px; padding:1px 10px; font-size:11px; font-weight:600;
  cursor:pointer; line-height:16px; }
.cm-urg-vi:hover{ background:var(--bg2,#f6f6f7); color:var(--red,#c0392b); }

/* saltar da zona para a mensagem: pisca uma vez e cala-se */
@keyframes cmUrgPisca{ 0%{ box-shadow:0 0 0 0 var(--ring,rgba(0,113,227,.25)); }
  30%{ box-shadow:0 0 0 6px var(--ring,rgba(0,113,227,.25)); }
  100%{ box-shadow:0 0 0 0 var(--ring,rgba(0,113,227,0)); } }
.chat-message.cm-urg-pisca{ animation:cmUrgPisca 1.1s ease-out 1; }
/* o ⚡ das ações da mensagem */
.cm-ferram .acao-urg.is-on{ color:var(--red,#c0392b); }

/* a faixa presa ao topo da conversa — UMA linha (desenho A) */
.chat-urg-faixa{ flex:none; display:flex; align-items:center; gap:9px;
  padding:7px 13px; background:var(--bg2,#f6f6f7);
  border-bottom:1px solid var(--line,#ececec); font-size:12px; }
.chat-urg-faixa .cu-pt{ flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--red,#c0392b); }
.chat-urg-faixa .cu-txt{ flex:1; min-width:0; color:var(--text2,#4a4a51);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-urg-faixa .cu-txt b{ color:var(--red,#c0392b); font-weight:650; }
.cu-ir{ flex:none; border:1px solid var(--line2,#d2d2d7); background:var(--bg,#fff);
  color:var(--text,#1b1b1f); border-radius:999px; padding:2px 11px; font-size:11px;
  font-weight:600; cursor:pointer; }
.cu-ir:hover{ border-color:var(--red,#c0392b); color:var(--red,#c0392b); }

/* a zona, no topo da lista de conversas */
.chat-urg-zona{ border-bottom:1px solid var(--line,#ececec);
  background:var(--bg2,#f6f6f7); padding:8px 12px 10px; }
.chat-urg-zona .cz-cab{ font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--text3,#75757c); margin-bottom:6px; }
.chat-urg-zona.tem-para-mim .cz-cab{ color:var(--red,#c0392b); }
.cz-bloco{ margin-top:4px; }
.cz-sub{ font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text3,#75757c); margin:4px 0 2px; }
.cz-linha{ display:flex; align-items:center; gap:8px; padding:4px 0;
  font-size:12px; cursor:pointer; }
.cz-linha:hover .cz-txt{ text-decoration:underline; }
.cz-quem{ font-weight:600; color:var(--text,#1b1b1f); flex:none; max-width:32%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cz-txt{ flex:1; min-width:0; color:var(--text2,#4a4a51);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cz-quando{ font-size:11px; color:var(--text3,#75757c); flex:none; }


/* ── desenho A · bolhas ──────────────────────────────────────────────────────
   Escolhido pelo Diogo a 2026-09-16, de entre três propostas.

   A queixa que o originou foi «toda a parte visual de mensagens urgentes ficou
   horrível», e a raiz era estrutural: tudo o que se acrescentava a uma mensagem
   — as ações (☺ ↩ ⚡), a marca de urgente, os recibos — ia PARA DENTRO da
   bolha, a lutar com o texto e com o fundo azul das minhas. Este bloco tira
   tudo isso de lá:

     · as ações são uma pílula que flutua POR CIMA da bolha (.cm-ferram);
     · a urgência é uma linha POR BAIXO (.cm-urg-pe) — sem risco desde 23/09;
     · as reações ficam a cavalo na borda de baixo, como no Messenger;
     · a hora e o recibo vivem numa linha discreta dentro da bolha.

   E arruma a conversa: blocos por pessoa, separador de dia que pega no topo,
   linha de novas, botão para saltar ao fim, ossos a carregar e ecrãs próprios
   quando não há nada.

   Cor por token, sempre. O que assenta em cima da bolha azul usa `inherit` e
   opacidade — foi assim que se salvaram os recibos e os chips das reações. */

/* ─── blocos ─── */
.cm-bloco{ display:flex; gap:8px; align-items:flex-end; margin-top:12px; }
.cm-bloco:not(.abre){ margin-top:2px; }
.cm-bloco.me{ flex-direction:row-reverse; }
.cm-av{ flex:none; }
.cm-av-vago{ flex:none; width:26px; }
.cm-av .mui-avatar{ width:26px; height:26px; font-size:10px; }
.cm-pilha{ position:relative; display:flex; flex-direction:column; gap:3px;
  max-width:80%; min-width:0; }
.cm-bloco.me .cm-pilha{ align-items:flex-end; }
.cm-quem{ font-size:10.5px; font-weight:600; color:var(--text3,#75757c); padding:0 4px 1px; }

/* ─── a bolha ─── */
/* A BOLHA NÃO ENCOSTA À PAREDE.
   Com `max-width:100%` uma frase comprida ia de margem a margem e as bolhas
   ficavam coladas ao limite do painel — queixa do Diogo (17/09). O vão do lado
   contrário faz duas coisas ao mesmo tempo: dá ar, e diz de quem é a mensagem
   antes de se ler a cor, que é como se lê um chat de relance. */
.cm-bloco .chat-message{
  max-width:100%; align-self:auto; border-radius:15px; padding:7px 11px 5px;
  background:var(--bg2,#f6f6f7); border:1px solid var(--line,#ececec);
  display:flex; flex-direction:column; gap:2px;
}
.cm-bloco.abre .chat-message{ border-top-left-radius:6px; }
.cm-bloco.me .chat-message{
  background:var(--cyan,#0071e3); border-color:var(--cyan,#0071e3); color:var(--on-accent,#fff);
  border-top-left-radius:15px;
}
.cm-bloco.me.abre .chat-message{ border-top-right-radius:6px; }
.cm-bloco.me .cm-corpo{ color:inherit; }
.cm-bloco .cm-corpo{ font-size:13px; line-height:1.45; }

/* a hora e o recibo, discretos, dentro da bolha */
/* A HORA A 9,5px era ilegível — «demasiado discreta», e numa mensagem urgente
   é precisamente o que se quer ler primeiro. Sobe para 11px, que é o degrau
   mínimo desta casa para texto que se lê mesmo. */
.cm-meta{ display:flex; align-items:center; justify-content:flex-end; gap:5px;
  font-size:11px; margin-top:2px; font-variant-numeric:tabular-nums; }
.cm-hora{ opacity:.72; }
.cm-bloco.me .cm-hora{ opacity:.85; }
.cm-meta .cm-recibo{ margin-left:0; font-size:10px; }

/* ─── as ações: fora do texto, por cima da bolha ─── */
.cm-ferram{
  position:absolute; top:-13px; right:6px; z-index:4; display:none; gap:1px;
  background:var(--bg,#fff); border:1px solid var(--line,#ececec); border-radius:999px;
  padding:2px 3px; box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.cm-bloco:not(.me) .cm-ferram{ right:auto; left:6px; }
.cm-pilha:hover .cm-ferram,
.cm-ferram:focus-within{ display:flex; }
.cm-ferram button{
  border:0; background:transparent; cursor:pointer; font-size:12px; line-height:1;
  padding:3px 6px; border-radius:999px; color:var(--text2,#4a4a51);
}
.cm-ferram button:hover{ background:var(--bg2,#f6f6f7); color:var(--text,#1b1b1f); }

/* ─── reações: a cavalo na borda de baixo ─── */
.cm-pilha .chat-reactions{ margin-top:-9px; padding-left:8px; position:relative; z-index:3; }
.cm-bloco.me .chat-reactions{ padding-left:0; padding-right:8px; justify-content:flex-end; }
.cm-pilha .chat-reaction{
  background:var(--bg,#fff); border:1px solid var(--line2,#d2d2d7); color:var(--text2,#4a4a51);
  opacity:1; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:1px 7px;
}
.cm-pilha .chat-reaction.mine{ border-color:var(--cyan,#0071e3); color:var(--cyan,#0071e3); border-width:1px; }

/* ─── urgência: uma linha POR BAIXO, a bolha fica igual às outras ───
   (23/09) O risco na borda saiu: era a quarta marca da mesma mensagem, e na
   pele passara a um traço solto fora da bolha que se lia como defeito. */
.cm-urg-pe{
  display:flex; align-items:center; gap:7px; padding:1px 5px 0;
  font-size:10.5px; font-weight:600; color:var(--red,#c0392b);
}
.cm-bloco.me .cm-urg-pe{ justify-content:flex-end; }
.cm-urg-pe.is-feita{ color:var(--text3,#75757c); font-weight:500; }
.cm-urg-vi{
  border:1px solid var(--red,#c0392b); background:transparent; color:var(--red,#c0392b);
  border-radius:999px; padding:0 9px; font-size:10.5px; font-weight:600; cursor:pointer;
  line-height:16px;
}
.cm-urg-vi:hover{ background:var(--red,#c0392b); color:var(--bg,#fff); }

/* ─── separadores ─── */
/* NÃO pega ao topo (23/09): sem a faixa em gradiente (que o Diogo mandou
   tirar) o rótulo preso carimbava-se por cima das bolhas, e como todos os
   dias são irmãos no #chatMessages nenhum se soltava — empilhavam-se. Fica
   SÓ a barra divisória, no sítio dela. */
.cm-dia{
  display:flex; justify-content:center;
  padding:8px 0 6px; pointer-events:none;
}
/* O separador de dia estava a 10,5px numa pastilha quase da cor do fundo — via-se
   se se procurasse por ele. É a âncora que diz onde se está na conversa (17/09). */
.cm-dia span{
  background:var(--bg2,#f6f6f7); border:1px solid var(--line2,#d2d2d7);
  color:var(--text2,#4a4a51); font-size:11.5px; font-weight:600;
  letter-spacing:.01em; padding:3px 13px; border-radius:999px;
}
.cm-novas{
  display:flex; align-items:center; gap:9px; margin:10px 2px 4px;
  color:var(--red,#c0392b); font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
}
.cm-novas::before,.cm-novas::after{ content:''; flex:1; height:1px; background:currentColor; opacity:.35; }

/* ─── saltar para a última ─── */
.chat-saltar{
  position:absolute; right:14px; bottom:76px; z-index:8;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg,#fff); border:1px solid var(--line2,#d2d2d7); color:var(--text,#1b1b1f);
  border-radius:999px; padding:5px 12px; font-size:11.5px; font-weight:600;
  box-shadow:var(--shadow-md,0 2px 10px rgba(0,0,0,.12)); cursor:pointer;
}
.chat-saltar b{
  background:var(--cyan,#0071e3); color:var(--on-accent,#fff); border-radius:999px;
  font-size:10px; padding:1px 6px; font-weight:700;
}
.chat-saltar:hover{ border-color:var(--line3,#aeaeb2); }
#chatConvView{ position:relative; }

/* ─── quando não há nada ─── */
.chat-vazio{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:11px; padding:40px 28px; text-align:center; min-height:200px;
}
.chat-vazio-fig{
  width:54px; height:54px; border-radius:50%; background:var(--bg2,#f6f6f7);
  display:grid; place-items:center; font-size:22px;
}
.chat-vazio-t{ font-size:14px; font-weight:650; color:var(--text,#1b1b1f); }
.chat-vazio-d{ font-size:12.5px; color:var(--text3,#75757c); line-height:1.5; max-width:27ch; }
.chat-vazio-b{
  margin-top:3px; border:0; background:var(--cyan,#0071e3); color:var(--on-accent,#fff);
  border-radius:999px; padding:7px 17px; font-size:12.5px; font-weight:600; cursor:pointer;
}

/* ─── ossos (a carregar) ─── */
@keyframes chatOsso{ to{ background-position:200% 0 } }
.chat-osso{
  background:linear-gradient(90deg, var(--bg2,#f6f6f7) 25%, var(--bg3,#ececed) 37%, var(--bg2,#f6f6f7) 63%);
  background-size:200% 100%; animation:chatOsso 1.4s linear infinite; border-radius:6px;
}
@media (prefers-reduced-motion:reduce){ .chat-osso{ animation:none } }
.chat-osso-av{ width:26px; height:26px; border-radius:50%; flex:none; }
.chat-osso-c{ height:13px; border-radius:7px; }
.chat-osso-l{ height:9px; margin-top:5px; width:62%; }
.chat-osso-msg{ display:flex; gap:8px; align-items:flex-end; margin-top:12px; padding:0 2px; }
.chat-osso-msg.me{ flex-direction:row-reverse; }
.chat-osso-msg.me .chat-osso-av{ visibility:hidden; }
.chat-osso-bal{ min-width:0; }
.chat-osso-conv{ display:flex; gap:11px; padding:10px 13px; align-items:center; }
.chat-osso-conv .chat-osso-bal{ flex:1; }


/* ── desenho B · caixa de entrada ────────────────────────────────────────────
   Escolhido pelo Diogo a 2026-09-16, de entre três propostas para a lista.

   A tese é de LÓGICA: a lista deixou de estar ordenada por HORA e passou a
   estar ordenada por ESTADO. Não há filtros — as secções fazem esse trabalho.
   Eram cinco filas de comandos antes da primeira conversa (três botões, a
   procura, dois níveis de chips); ficou uma fila de ícones.

   Cor por token, sempre. O vermelho é só da urgência: é a única coisa na lista
   que quer dizer «uma pessoa está à espera de ti». */

/* ─── a fila de cima ─── */
.chat-acoes{
  flex:none; display:flex; align-items:center; gap:4px; padding:9px 12px 8px;
  border-bottom:1px solid var(--line,#ececec);
}
.cl-titulo{ flex:1; font-size:14px; font-weight:700; letter-spacing:-.015em;
  color:var(--text,#1b1b1f); }
/* No caixa de entrada não há título nenhum — o shell já lá pôs «Chat» e
   repeti-lo era escrever a mesma palavra duas vezes, uma por baixo da outra.
   Fica o vão que empurra os ícones para a direita, e mais nada. */
.cl-titulo-vago{ flex:1; }
.cl-ico{
  border:0; background:transparent; color:var(--text3,#75757c); cursor:pointer;
  font-size:14px; line-height:1; padding:6px 8px; border-radius:8px;
}
.cl-ico:hover{ background:var(--bg2,#f6f6f7); color:var(--text,#1b1b1f); }
.cl-ico.on{ background:var(--bg2,#f6f6f7); color:var(--text,#1b1b1f); }
.cl-ico.forte{ background:var(--cyan,#0071e3); color:var(--on-accent,#fff); }
.cl-ico.forte:hover{ background:var(--cyan,#0071e3); }
.cl-sel-n{ flex:1; font-size:12.5px; font-weight:600; color:var(--text2,#4a4a51); }
.cl-ac{
  border:1px solid var(--line2,#d2d2d7); background:var(--bg,#fff); color:var(--text,#1b1b1f);
  border-radius:999px; padding:4px 12px; font-size:12px; font-weight:600; cursor:pointer;
}
.cl-ac.forte{ background:var(--cyan,#0071e3); border-color:var(--cyan,#0071e3);
  color:var(--on-accent,#fff); }
.cl-ac[disabled]{ opacity:.45; cursor:default; }

/* ─── cabeçalhos de secção ─── */
.chat-sec{
  display:flex; align-items:center; gap:8px; padding:13px 13px 5px;
  font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text3,#75757c); position:sticky; top:0; z-index:2;
  background:var(--bg,#fff);
}
.chat-sec.urg{ color:var(--red,#c0392b); }
.chat-sec .cs-n{ margin-left:auto; font-weight:600; letter-spacing:0;
  text-transform:none; font-size:10.5px; }

/* ─── uma conversa ─── */
.chat-list-row{
  display:flex; gap:11px; padding:9px 13px; cursor:pointer; align-items:center;
  position:relative;
}
.chat-list-row:hover{ background:var(--bg2,#f6f6f7); }
.cl-av{ flex:none; position:relative; }
.cl-av .mui-avatar{ width:34px; height:34px; font-size:12px; }
.cl-teams{
  position:absolute; right:-2px; bottom:-2px; width:15px; height:15px; border-radius:50%;
  background:var(--bg,#fff); border:1px solid var(--line,#ececec);
  color:var(--purple,#5059c9); font-size:8px; font-weight:700;
  display:grid; place-items:center;
}
.cl-fich{
  width:34px; height:34px; border-radius:9px; background:var(--bg2,#f6f6f7);
  display:grid; place-items:center; font-size:16px;
}
.cl-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cl-l1{ display:flex; align-items:baseline; gap:8px; }
.cl-nome{
  font-size:13px; font-weight:600; letter-spacing:-.01em; flex:1; min-width:0;
  color:var(--text,#1b1b1f); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cl-hora{ font-size:10px; color:var(--text3,#75757c); flex:none;
  font-variant-numeric:tabular-nums; }
.cl-l2{ display:flex; align-items:center; gap:7px; }
.cl-prev{
  flex:1; min-width:0; font-size:11.5px; color:var(--text3,#75757c);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-list-row.nao-lida .cl-nome{ font-weight:700; }
.chat-list-row.nao-lida .cl-prev{ color:var(--text2,#4a4a51); font-weight:500; }
/* Regra do Telmo (25/07), que esta parede guarda: numa linha por ler, COR DE
   DESTAQUE **ou** NEGRITO, nunca as duas. O negrito fica no NOME (que nao muda
   de cor); a hora muda de cor e NAO engrossa. Eu tinha posto as duas na hora —
   e era o defeito de 25/07 a voltar. */
.chat-list-row.nao-lida .cl-hora{ color:var(--cyan,#0071e3); }
.cl-n{
  flex:none; background:var(--cyan,#0071e3); color:var(--on-accent,#fff);
  /* estava a 9,5px — o contador que diz quantas mensagens faltam ler era o
     texto mais pequeno do painel (17/09) */
  font-size:11px; font-weight:700; border-radius:999px; min-width:19px; height:19px;
  padding:0 6px; display:grid; place-items:center; font-variant-numeric:tabular-nums;
}
.cl-arroba{ flex:none; color:var(--red,#c0392b); font-size:11px; font-weight:700; }
.cl-mudo{ flex:none; font-size:10px; opacity:.6; }
.cl-check{ flex:none; margin:0; }
/* o ⋮ estava sempre visível em TODAS as linhas — era ruído em todas elas */
.chat-list-row .cl-menu{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); display:none;
  border:0; background:var(--bg,#fff); color:var(--text3,#75757c); cursor:pointer;
  font-size:14px; padding:4px 6px; border-radius:7px; box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.chat-list-row:hover .cl-menu{ display:block; }
.chat-list-row .cl-menu:hover{ color:var(--text,#1b1b1f); }

/* ─── uma urgência, como mensagem ─── */
.chat-urg-row{
  display:flex; gap:11px; padding:9px 13px; cursor:pointer; align-items:flex-start;
  box-shadow:inset 2px 0 0 var(--red,#c0392b);
}
.chat-urg-row:hover{ background:var(--bg2,#f6f6f7); }
.chat-urg-row.is-minha{ box-shadow:none; opacity:.82; }
.cu-msg{ font-size:12px; color:var(--text2,#4a4a51); line-height:1.4; }
.cu-pe{ display:flex; align-items:center; gap:9px; margin-top:4px; }
.cu-onde{ font-size:10px; color:var(--text3,#75757c); }
.chat-urg-row .cu-vi{
  border:1px solid var(--red,#c0392b); background:transparent; color:var(--red,#c0392b);
  border-radius:999px; padding:1px 11px; font-size:10.5px; font-weight:600; cursor:pointer;
}
.chat-urg-row .cu-vi:hover{ background:var(--red,#c0392b); color:var(--bg,#fff); }

/* ─── está tudo tratado ─── */
.chat-tratado{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:20px 24px 16px; text-align:center;
}
.ct-fig{
  width:36px; height:36px; border-radius:50%; background:var(--bg2,#f6f6f7);
  color:var(--green,#1d8a45); display:grid; place-items:center; font-size:16px;
  margin-bottom:3px;
}
.ct-t{ font-size:13px; font-weight:650; color:var(--text,#1b1b1f); }
.ct-d{ font-size:11.5px; color:var(--text3,#75757c); }

/* ─── as minhas urgências, fechadas no fim ─── */
.chat-minhas{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:11px 13px; border:0; border-top:1px solid var(--line,#ececec);
  background:transparent; cursor:pointer; font:inherit; font-size:11.5px;
  color:var(--text3,#75757c);
}
.chat-minhas:hover{ background:var(--bg2,#f6f6f7); }
.chat-minhas .cm-rot{ flex:1; color:var(--text2,#4a4a51); font-weight:600; }
.chat-minhas .cm-seta{ color:var(--text3,#75757c); }

/* ─── a vista propria das urgentes (desenho C) ─── */
/* O atalho so existe quando ha alguma coisa: um botao permanente para uma
   vista quase sempre vazia ensina a nao carregar nele. */
/* neutro: vermelho só com alguém à minha espera e a secção fora da vista (23/09) */
.cl-ico.urg{ color:var(--text2,#4a4a51); }
.cl-ico.urg:hover{ background:var(--bg2,#f6f6f7); color:var(--text,#1d1d1f); }
.cl-ico.urg.is-alerta{ color:var(--red,#c0392b); }
.chat-urg-nota{
  padding:16px 14px 20px; font-size:11.5px; color:var(--text3,#75757c); line-height:1.5;
  border-top:1px solid var(--line,#ececec); margin-top:8px;
}
.chat-urg-nota b{ color:var(--text2,#4a4a51); font-weight:600; }

/* ─── a procura ─── */
.chat-procura{
  display:flex; align-items:center; gap:8px; margin:10px 12px;
  background:var(--bg2,#f6f6f7); border:1px solid var(--line,#ececec);
  border-radius:999px; padding:7px 13px;
}
.cp-lupa{ flex:none; color:var(--text3,#75757c); font-size:13px; }
.chat-procura input{
  flex:1; min-width:0; border:0; background:transparent; font:inherit;
  font-size:12.5px; color:var(--text,#1b1b1f); outline:none;
}
.cp-x{ flex:none; border:0; background:transparent; color:var(--text3,#75757c);
  cursor:pointer; font-size:12px; padding:0 2px; }
.cp-x:hover{ color:var(--text,#1b1b1f); }
.cp-excerto{ white-space:normal; line-height:1.4; }
.cp-onde{ font-size:10px; color:var(--text3,#75757c); margin-top:2px; }


/* ── o visor dos anexos ──────────────────────────────────────────────────────
   Era um `MUI.sheetOpen` — a folha do shell, feita para listas e formulários
   curtos. Um PDF não cabe lá: o visor do próprio browser traz barra de
   ferramentas, miniaturas e paginação, e a ~540 px a barra ficava cortada e
   aparecia uma barra de scroll horizontal por baixo. Um documento precisa do
   ecrã, por isso isto é um visor por cima de tudo e não uma caixinha.

   As velhas `.ca-visor-img` / `.ca-visor-pdf` saíram: duas definições para a
   mesma coisa a lutar foi o defeito das reações em Setembro. */
.chat-visor{
  position:fixed; inset:0; z-index:1400; display:flex; align-items:center;
  justify-content:center; padding:24px; background:rgba(0,0,0,.55);
  animation:cvEntra .12s ease-out;
}
@keyframes cvEntra{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .chat-visor{ animation:none } }
.cv-caixa{
  display:flex; flex-direction:column; width:min(1100px, 100%); height:min(860px, 100%);
  background:var(--bg,#fff); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-lg,0 24px 64px rgba(0,0,0,.35)); cursor:default;
}
.cv-cab{
  flex:none; display:flex; align-items:center; gap:11px; padding:11px 14px;
  border-bottom:1px solid var(--line,#ececec); background:var(--bg2,#f6f6f7);
}
.cv-ico{ flex:none; font-size:19px; line-height:1; }
.cv-tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cv-nome{
  font-size:13.5px; font-weight:650; color:var(--text,#1b1b1f); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cv-sub{ font-size:11px; color:var(--text3,#75757c); }
.cv-baixar{
  flex:none; border:1px solid var(--line2,#d2d2d7); background:var(--bg,#fff);
  color:var(--text,#1b1b1f); border-radius:999px; padding:5px 14px; font-size:12px;
  font-weight:600; cursor:pointer;
}
.cv-baixar:hover{ border-color:var(--cyan,#0071e3); color:var(--cyan,#0071e3); }
.cv-x{
  flex:none; border:0; background:transparent; color:var(--text3,#75757c);
  cursor:pointer; font-size:15px; line-height:1; padding:6px 8px; border-radius:8px;
}
.cv-x:hover{ background:var(--bg3,#ececed); color:var(--text,#1b1b1f); }
.cv-corpo{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  background:var(--bg3,#ececed); overflow:auto;
}
/* o PDF fica com a caixa toda: é o visor do browser que precisa dela */
.cv-pdf{ width:100%; height:100%; border:0; background:var(--bg3,#ececed); }
.cv-img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.cv-espera{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--text3,#75757c); font-size:12.5px;
}
.cv-osso{ width:160px; height:10px; border-radius:6px; }

/* num painel estreito (telemóvel) o visor toma o ecrã todo: 24 px de margem a
   toda a volta num ecrã de 400 px eram 48 px roubados à única coisa que
   interessa, que é o documento. */
@media (max-width:560px){
  .chat-visor{ padding:0; }
  .cv-caixa{ width:100%; height:100%; border-radius:0; }
}


/* ── presença ────────────────────────────────────────────────────────────────
   Pedido do Diogo (16/09): a bola do estado (Disponível / Ocupado / Ausente /
   Indisponível) junto ao avatar na lista, e «online» ou «visto há…» na barra
   da conversa.

   As BOLAS não se desenham aqui: são as `.status-dot` + `.status-available` e
   companhia do `assets/styles.css`, que já existiam para o menu do utilizador.
   Um segundo conjunto de classes para a mesma coisa divergia no primeiro
   acerto de cor — daqui só sai ONDE elas assentam.

   Um grupo não leva bola: não tem UM estado, e o servidor manda
   `presenca: null` precisamente para o dizer. */

/* a bola assenta no canto do avatar da lista */
.cl-av{ position:relative; }
.cl-av .status-dot{
  position:absolute; right:-1px; bottom:-1px; width:11px; height:11px;
  border:2px solid var(--bg,#fff); border-radius:50%; box-sizing:content-box;
}
/* a marca do Teams e a bola ocupam o mesmo canto — a bola é a que importa
   mais vezes, por isso a marca sobe para o canto de cima */
.cl-av .cl-teams{ right:-2px; bottom:auto; top:-2px; }

/* a barra da conversa: nome em cima, presença por baixo */
.chat-back-bar .cbb-tx{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.25;
}
.cbb-nome{
  display:flex; align-items:center; gap:7px; font-weight:600; font-size:13px;
  color:var(--text,#1b1b1f);
}
.cbb-nome .status-dot{
  position:static; width:8px; height:8px; border:0; border-radius:50%; flex:none;
}
.cbb-presenca{
  font-size:11px; color:var(--text3,#75757c); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

/* ── o rodapé do «Ligar conta Office» (17/09) ───────────────────────────────
   Era um `mui-item` com avatar redondo no meio das conversas recentes, e
   lia-se como se houvesse alguém chamado «Ligar conta Office». Não é uma
   conversa: é uma definição por fazer. Fica do outro lado de um traço, com a
   forma de um aviso — e com o ícone quadrado, que nesta casa nunca é gente. */
.chat-cta-office{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  margin-top:10px; padding:10px 12px; cursor:pointer;
  border:0; border-top:1px solid var(--line,#ececec);
  background:var(--bg2,#f6f6f7); color:var(--text2,#4a4a51);
}
.chat-cta-office:hover{ background:var(--bg1,#fff); }
.cta-of-ico{
  flex:none; display:grid; place-items:center; width:26px; height:26px;
  border-radius:7px; background:var(--cyan-soft,#eef5fd); color:var(--cyan,#0071e3);
  font-size:13px;
}
.cta-of-tx{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.cta-of-t{ font-size:12.5px; font-weight:600; color:var(--text,#1b1b1f); }
.cta-of-s{ font-size:11px; color:var(--text3,#75757c); }
.cta-of-seta{ flex:none; color:var(--text3,#75757c); font-size:15px; }

/* ── menções (17/09) ────────────────────────────────────────────────────────
   Até aqui o chip `<span class="cm-mencao">` era apagado pelo sanitizador do
   servidor e uma menção era texto igual a todo o outro. Agora sobrevive, e
   estas são as três coisas que ele tem de dizer:

     1. isto é um nome, não uma palavra (fundo suave + cor de acento);
     2. este nome é O MEU (mais forte, e a bolha ganha uma barra);
     3. e quando é meu, a conversa inteira acende na lista — o `@` da linha,
        que já existia.

   Nada de cor à mão: tudo por token, incluindo dentro da bolha azul, onde o
   acento não se vê e por isso se usa `currentColor` com fundo translúcido. */
.cm-mencao{
  display:inline; border-radius:5px; padding:0 3px; font-weight:600;
  background:var(--cyan-soft,#eef5fd); color:var(--cyan,#0071e3);
}
/* Dentro da MINHA bolha (azul sólido) o acento desaparece — herda-se a tinta
   da bolha e o realce faz-se com transparência, como nos recibos e nos chips.

   `.cm-bloco.me` e NÃO `.chat-message.me`: neste desenho quem leva a marca do
   autor é o BLOCO, não a bolha. Escrito na bolha, este seletor nunca chegava a
   aplicar-se — e o chip saía azul forte dentro de um fundo azul forte. */
.cm-bloco.me .cm-mencao{ background:rgba(255,255,255,.22); color:inherit; }

/* a MINHA menção pesa mais do que a de outra pessoa qualquer */
.cm-mencao.is-eu{ font-weight:700; }
.cm-bloco:not(.me) .cm-mencao.is-eu{
  background:var(--cyan,#0071e3); color:var(--on-accent,#fff);
}
.cm-bloco.me .cm-mencao.is-eu{ background:rgba(255,255,255,.34); }
/* A bolha em que me mencionaram: uma barra, como a das urgentes, para se
   encontrar a mensagem sem a ler — mas do lado do acento e não do vermelho,
   que o vermelho nesta casa quer dizer «alguém está à espera de ti».

   `box-shadow:inset` e NÃO `border-left`, pela mesma razão das urgentes: com
   borda a bolha muda de LARGURA quando a marca aparece, e o texto salta por
   dentro. Foi a lição do desenho A e voltou a morder aqui. */
.cm-bloco .chat-message.tem-mencao{ box-shadow:inset 3px 0 0 var(--cyan,#0071e3); }
.cm-bloco.me .chat-message.tem-mencao{ box-shadow:inset -3px 0 0 var(--on-accent,#fff); }

/* ── ORGANIZAR AS MENSAGENS (17/09) ─────────────────────────────────────────
   Editar no sítio, lápide, fixadas, guardadas e procura dentro da conversa.
   Cor por token, sempre — e o que assenta na bolha azul usa `inherit` com
   transparência, que foi como se salvaram os recibos, os chips e as menções. */

/* a marca «editada», antes da hora */
.cm-editada{ font-size:10px; opacity:.6; font-style:italic; }

/* a LÁPIDE: a mensagem ficou, o texto não. Itálico e apagada — lê-se como o
   que é, um lugar onde houve uma coisa. */
.cm-lapide{ font-style:italic; opacity:.6; }
.cm-bloco .chat-message.is-apagada{ background:var(--bg2,#f6f6f7); border-style:dashed; }
.cm-bloco.me .chat-message.is-apagada{ background:var(--bg2,#f6f6f7); border-color:var(--line2,#d2d2d7); }
.cm-bloco.me .chat-message.is-apagada .cm-corpo,
.cm-bloco.me .chat-message.is-apagada .cm-meta{ color:var(--text3,#75757c); }

/* EDITAR NO SÍTIO: a bolha vira caixa. Fundo próprio para se perceber que
   aquilo já não é uma mensagem — é um campo. */
.cm-bloco .chat-message.a-editar{ background:var(--bg1,#fff); border-color:var(--cyan,#0071e3); }
.cm-edit{ display:flex; flex-direction:column; gap:6px; min-width:200px; }
.cm-edit-cx{
  outline:none; font-size:12.5px; line-height:1.45; color:var(--text,#1b1b1f);
  background:var(--bg,#fff); border:1px solid var(--line,#ececec); border-radius:8px;
  padding:6px 8px; max-height:160px; overflow-y:auto;
}
.cm-edit-bt{ display:flex; gap:6px; justify-content:flex-end; }
.cm-edit-ok, .cm-edit-no{
  border:0; border-radius:7px; padding:4px 11px; font-size:11.5px; font-weight:600; cursor:pointer;
}
.cm-edit-ok{ background:var(--cyan,#0071e3); color:var(--on-accent,#fff); }
.cm-edit-no{ background:var(--bg2,#f6f6f7); color:var(--text2,#4a4a51); }

/* a estrela de GUARDADA, por baixo da bolha (privada — só eu a vejo) */
.cm-guardada{ align-self:flex-end; font-size:10.5px; color:var(--amber,#b26a00); margin-top:2px; }

/* ── a tira das FIXADAS, presa ao topo ── */
/* Fundo NEUTRO e não amarelo: a casa só tem `--red-bg` em par com o `--red`;
   um `--amber-bg` inventado ficava com o fallback claro em tema escuro e a
   tira saía uma banda amarela berrante. O sinal fica no 📌, que traz a cor
   consigo, e na linha de cima. */
.chat-fixadas{
  flex:none; display:flex; align-items:center; gap:4px;
  padding:6px 10px; border-bottom:1px solid var(--line,#ececec);
  background:var(--bg2,#f6f6f7);
}
.chat-fixadas[hidden]{ display:none; }
.cf-linha{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px; text-align:left;
  border:0; background:transparent; cursor:pointer; padding:0; color:inherit;
}
.cf-pin{ flex:none; font-size:13px; }
.cf-tx{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.cf-t{ font-size:12px; color:var(--text,#1b1b1f);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-s{ font-size:10.5px; color:var(--text3,#75757c); }
.cf-x{ flex:none; border:0; background:transparent; cursor:pointer;
  color:var(--text3,#75757c); font-size:13px; padding:2px 5px; border-radius:6px; }
.cf-x:hover{ background:var(--bg2,#f6f6f7); color:var(--text,#1b1b1f); }

/* ── procurar DENTRO da conversa ── */
.chat-busca-conversa{
  flex:none; display:flex; align-items:center; gap:6px;
  padding:7px 10px; border-bottom:1px solid var(--line,#ececec); background:var(--bg2,#f6f6f7);
}
.chat-busca-conversa[hidden]{ display:none; }
.chat-busca-conversa input{
  flex:1; min-width:0; border:1px solid var(--line,#ececec); border-radius:9px;
  padding:6px 10px; font-size:12.5px; background:var(--bg,#fff); color:var(--text,#1b1b1f);
  outline:none;
}
.chat-busca-conversa input:focus{ border-color:var(--cyan,#0071e3); }
.chat-busca-conversa button{
  flex:none; border:0; background:transparent; cursor:pointer;
  color:var(--text3,#75757c); font-size:13px; padding:4px 7px; border-radius:7px;
}
.chat-busca-conversa button:hover{ background:var(--bg,#fff); color:var(--text,#1b1b1f); }

/* um achado dentro da conversa */
.ca-linha{
  display:block; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line,#ececec);
  background:transparent; cursor:pointer; padding:9px 12px; color:inherit;
}
.ca-linha:hover{ background:var(--bg2,#f6f6f7); }
.ca-l1{ display:flex; align-items:baseline; gap:8px; }
.ca-quem{ font-size:12.5px; font-weight:600; color:var(--text,#1b1b1f); flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ca-quando{ font-size:10.5px; color:var(--text3,#75757c); flex:none; }
.ca-tx{ font-size:12px; color:var(--text2,#4a4a51); margin-top:2px; line-height:1.4; }

/* o ⌕ da barra da conversa */
.cbb-ico{
  flex:none; border:0; background:transparent; cursor:pointer;
  color:var(--text3,#75757c); font-size:15px; padding:4px 8px; border-radius:8px;
}
.cbb-ico:hover{ background:var(--bg2,#f6f6f7); color:var(--text,#1b1b1f); }

/* ═══ RONDA DE 17/09 (2.ª volta sobre as capturas do Diogo) ═════════════════ */

/* ── os TRÊS ESTADOS, com três pistas em vez de uma ────────────────────────
   «✓ ✓✓ ✓✓ com opacidades diferentes» não chega a quem não conhece o código.
   A forma já os separa; aqui junta-se o PESO e, na vista, uma PASTILHA — que
   é a única das três que se lê de relance sem se saber o código de antemão. */
.cm-recibo-enviada { opacity:.6; }
.cm-recibo-entregue{ opacity:1; }
.cm-recibo-vista   {
  opacity:1; font-weight:700; border-radius:999px; padding:0 4px;
  background:rgba(255,255,255,.26);          /* dentro da bolha azul */
}
.cm-bloco:not(.me) .cm-recibo-vista{ background:var(--cyan-soft,#eef5fd); color:var(--cyan,#0071e3); }

/* a hora, o «· editada» e a estrela — a meta lê-se como uma frase */
.cm-editada{ font-size:10px; opacity:.62; font-style:italic; }
.cm-estrela{ font-size:10px; opacity:.75; }

/* ── a LÁPIDE: sem recibo, sem anexos, sem ruído ───────────────────────────
   «Mensagem eliminada … Enviada» é uma frase que se contradiz a si própria. */
.cm-bloco.me .chat-message.is-apagada .cm-hora{ color:var(--text3,#75757c); opacity:1; }

/* ── AGRUPAR mensagens seguidas da mesma pessoa ────────────────────────────
   Queixa do Diogo: «o azul está demasiado dominante quando há muitas
   mensagens seguidas» e «não é necessário repetir tanta margem».

   O bloco já existia (`.abre`/`.fecha` vêm do `chat-vista-core`); o que
   faltava era a forma acompanhar. Dentro de um bloco as bolhas COLAM-SE — os
   cantos do lado do autor ficam direitos e o espaço entre elas cai para 2px.
   Lê-se como UMA coisa dita por uma pessoa, e não como seis. */
.cm-bloco:not(.abre){ margin-top:2px; }
.cm-bloco.abre{ margin-top:14px; }

/* os cantos: só a primeira do bloco arredonda em cima, só a última em baixo */
.cm-bloco.me:not(.abre) .chat-message{ border-top-right-radius:6px; }
.cm-bloco.me:not(.fecha) .chat-message{ border-bottom-right-radius:6px; }
.cm-bloco:not(.me):not(.abre) .chat-message{ border-top-left-radius:6px; }
.cm-bloco:not(.me):not(.fecha) .chat-message{ border-bottom-left-radius:6px; }

/* A HORA e o RECIBO só na ÚLTIMA do bloco: repetidos em cada bolha eram seis
   relógios a dizer quase o mesmo minuto, e é isso que faz a coluna parecer
   cheia de ruído.

   Escondidos do OLHO mas NÃO do leitor de ecrã (`clip-path`, não
   `display:none`): a hora de cada mensagem continua a ser lida em voz alta,
   que é precisamente quem mais precisa dela.

   O «· editada» e a ★ FICAM — essas são por mensagem e não se repetem. */
.cm-bloco:not(.fecha) .cm-hora,
.cm-bloco:not(.fecha) .cm-recibo{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
/* sem hora nem recibo, a meta de uma mensagem do meio só ocupa espaço se
   tiver mesmo alguma coisa para dizer */
.cm-bloco:not(.fecha) .cm-meta:not(:has(.cm-editada)):not(:has(.cm-estrela)){
  margin:0; height:0;
}

/* ── separadores de dia: separadores, não botões ───────────────────────────
   «Parecem quase botões por causa da borda.» Sem contorno e sem pastilha:
   uma linha de cada lado e a palavra ao meio, que é o que um separador é. */
.cm-dia span{
  background:transparent; border:0; border-radius:0; padding:0 10px;
  color:var(--text3,#75757c); font-size:11px; font-weight:600;
  letter-spacing:.02em; text-transform:none;
}
.cm-dia{ padding:10px 0 6px; pointer-events:none; }
.cm-dia::before, .cm-dia::after{
  content:''; flex:1; height:1px; align-self:center;
  background:var(--line,#ececec);
}

/* ── o CABEÇALHO: menos espaço morto, hierarquia clara ─────────────────────
   «Demasiado espaço morto entre o título e as ações» — o título saiu (o shell
   já o diz) e o que sobra são as ações, encostadas à direita e com o mesmo
   tamanho de alvo. 32px é o mínimo confortável para o dedo e para o rato. */
.chat-acoes{ padding:7px 10px 6px; gap:2px; }
.cl-ico{ min-width:32px; height:32px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 8px; }
/* o ✚ é a ação principal desta fila — destaca-se pela cor, não pelo tamanho */
.cl-ico.forte{ margin-left:2px; }

/* ── a LARGURA do painel ───────────────────────────────────────────────────
   Três degraus e não um arrastar contínuo: o arrastar dá mil larguras e 999
   delas são piores do que as três que alguém pensou.

   `min()` com `100vw - 48px` para a larga nunca comer o ecrã inteiro num
   portátil pequeno — e abaixo dos 900px o painel volta ao normal, porque aí
   já não há «ao lado» nenhum para trabalhar. */
/* A escolha de largura SÓ EXISTE acima dos 900px — e por `min-width` e não
   por uma regra que depois se tenta desfazer.

   Tentei primeiro `width:revert` num `max-width:900px`, e está errado: o
   `revert` volta ao estilo do BROWSER, não à regra do shell que estava por
   baixo. Resultado medido a 17/09: a «ampla» num ecrã de 820px dava 286px,
   quando o normal do shell dá 820. Uma regra que não se deve aplicar não se
   desfaz — não se escreve. */
@media (min-width: 901px){
  /* As larguras do MEIO saíram a 17/09: ficaram os dois estados que se usam
     — o painel ao lado do trabalho e o chat em ecrã inteiro. O `normal` vem do
     shell (é a largura de qualquer painel direito) e o `inteira` está mais
     abaixo; aqui não sobra regra nenhuma, e é isso que se quer ver. */
}

/* num painel largo a bolha não deve esticar-se até ao fim: uma linha de texto
   com 800px é ilegível. Trava-se pelo texto, não pelo painel. */
/* A LARGURA MÁXIMA DA BOLHA NÃO PODE SER UMA PERCENTAGEM.

   Tinha aqui `max-width:min(88%, 620px)` — e os 88% são da `.cm-pilha`, cuja
   largura é ela própria calculada a partir da bolha. Dependência circular: o
   browser resolve-a com um número pequeno e a bolha encolhe. Ficou invisível
   até eu esconder a hora nas mensagens do meio do bloco — aí a conta colapsou
   de vez e uma bolha com «teste» ficou a 48px, a partir a palavra em «test» e
   «e». Está na captura do Diogo de 17/09.

   Quem trava a largura é a PILHA, que já tem `max-width:80%` e não depende de
   ninguém. A bolha enche o que a pilha lhe der, com um travão ABSOLUTO para o
   painel largo — uma linha de texto com 800px é ilegível. */
.cm-bloco .chat-message{ max-width:min(100%, 620px); }
/* no painel largo é a PILHA que se trava, e em px — nunca em % */
@media (min-width: 901px){
  body.chat-w-inteira .cm-pilha{ max-width:min(80%, 660px); }
}

/* ── a BARRA da conversa ───────────────────────────────────────────────────
   A seta estava colada à margem e não havia cara nenhuma no cabeçalho. */
.chat-back-bar{ gap:8px; padding-left:6px; }
.chat-back-btn{
  border:0; background:transparent; cursor:pointer; font-size:17px;
  padding:0; width:30px; height:30px; border-radius:8px; flex:none;
  color:var(--text,#1b1b1f); display:inline-flex; align-items:center; justify-content:center;
}
.chat-back-btn:hover{ background:var(--bg2,#f6f6f7); }
.cbb-av{ position:relative; flex:none; display:inline-flex; }
.cbb-av .mui-avatar{ width:28px; height:28px; font-size:11px; }
.cbb-av .status-dot{
  position:absolute; right:-1px; bottom:-1px; width:10px; height:10px;
  border:2px solid var(--bg,#fff); border-radius:50%; box-sizing:content-box;
}
.cbb-ico.on{ background:var(--cyan-soft,#eef5fd); color:var(--cyan,#0071e3); }

/* ── a LISTA ───────────────────────────────────────────────────────────────
   Mais contraste na última mensagem, não lidas mais óbvias, e a linha vazia
   a dizer que está vazia em vez de ficar em branco. */
.cl-prev{ color:var(--text2,#4a4a51); }
.cl-prev.vazia{ font-style:italic; opacity:.6; }
/* uma conversa por ler distingue-se pela BARRA no bordo, além do negrito do
   nome: a barra lê-se de relance e não depende de comparar duas espessuras */
.chat-list-row.nao-lida{ box-shadow:inset 3px 0 0 var(--cyan,#0071e3); }

/* ── a tira das FIXADAS, compacta e navegável ──────────────────────────────
   «Ocupa bastante espaço vertical» — uma linha só, e a seta troca entre elas
   quando há mais do que uma. O ✕ passou a dizer o que faz. */
.chat-fixadas{ padding:4px 8px 4px 10px; gap:2px; }
.cf-tx{ gap:0; }
.cf-t{ font-size:11.5px; }
.cf-s{ font-size:10px; }
.cf-nav{
  flex:none; border:0; background:transparent; cursor:pointer;
  color:var(--text3,#75757c); font-size:11px; padding:3px 5px; border-radius:6px;
  font-variant-numeric:tabular-nums;
}
.cf-nav:hover{ background:var(--bg,#fff); color:var(--text,#1b1b1f); }

/* ── o SCROLL, visível ─────────────────────────────────────────────────────
   «Muito fino e quase invisível» — num chat é importante perceber que há
   conteúdo acima. Fica com 10px e um polegar que se vê, e aparece só quando
   o rato está lá dentro para não pesar no desenho. */
#chatMessages, #chatList{ scrollbar-width:thin; scrollbar-color:var(--line2,#d2d2d7) transparent; }
#chatMessages::-webkit-scrollbar, #chatList::-webkit-scrollbar{ width:10px; }
#chatMessages::-webkit-scrollbar-thumb, #chatList::-webkit-scrollbar-thumb{
  background:var(--line2,#d2d2d7); border-radius:999px;
  border:3px solid transparent; background-clip:content-box;
}
#chatMessages:hover::-webkit-scrollbar-thumb, #chatList:hover::-webkit-scrollbar-thumb{
  background:var(--text3,#75757c); background-clip:content-box;
}

/* ── ACESSIBILIDADE ────────────────────────────────────────────────────────
   Contraste dos cinzentos e alvos de clique com tamanho mínimo. O foco de
   teclado passa a ver-se: sem isto, quem navega por Tab não sabe onde está. */
.cl-hora, .cf-s, .ca-quando{ color:var(--text2,#4a4a51); }
.chat-acoes button:focus-visible,
.cm-ferram button:focus-visible,
.chat-list-row:focus-visible,
.chat-enviar:focus-visible,
.chat-ac-ico:focus-visible{
  outline:2px solid var(--cyan,#0071e3); outline-offset:2px;
}

/* ── as GUARDADAS (folha do menu) ──────────────────────────────────────── */
.cg-lista{ max-height:50vh; overflow-y:auto; }
.cg-linha{
  display:block; width:100%; text-align:left; border:0; cursor:pointer;
  border-bottom:1px solid var(--line,#ececec); background:transparent;
  padding:9px 2px; color:inherit;
}
.cg-linha:hover{ background:var(--bg2,#f6f6f7); }
.cg-l1{ display:flex; align-items:baseline; gap:8px; }
.cg-onde{ flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--text,#1b1b1f);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cg-quando{ flex:none; font-size:10.5px; color:var(--text2,#4a4a51); }
.cg-tx{ font-size:12px; color:var(--text2,#4a4a51); margin-top:2px; }

/* ── a MENSAGEM ENCONTRADA, destacada por uns segundos ─────────────────────
   Usava-se a animação das URGENTES — e uma mensagem achada numa procura não é
   urgente. Duas coisas diferentes a piscar da mesma maneira ensinam a ignorar
   as duas. Esta acende e apaga-se sozinha, no tempo de a pessoa a ler. */
@keyframes cmAchada {
  0%   { background:var(--cyan-soft,#eef5fd); }
  70%  { background:var(--cyan-soft,#eef5fd); }
  100% { background:transparent; }
}
.cm-bloco.cm-achada{ animation:cmAchada 2.6s ease-out 1; border-radius:12px; }
@media (prefers-reduced-motion: reduce){
  .cm-bloco.cm-achada{ animation:none; background:var(--cyan-soft,#eef5fd); border-radius:12px; }
}

/* ── os FILTROS da procura ─────────────────────────────────────────────── */
.cp-filtros{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  padding:7px 12px 8px; border-bottom:1px solid var(--line,#ececec);
}
.cp-chip{
  border:1px solid var(--line,#ececec); background:var(--bg,#fff);
  color:var(--text2,#4a4a51); border-radius:999px; padding:3px 11px;
  font-size:11.5px; cursor:pointer; line-height:1.6;
}
.cp-chip:hover{ background:var(--bg2,#f6f6f7); }
.cp-chip.on{ background:var(--cyan,#0071e3); border-color:var(--cyan,#0071e3);
  color:var(--on-accent,#fff); font-weight:600; }
.cp-vao{ flex:1; }
.cp-periodo{
  border:1px solid var(--line,#ececec); background:var(--bg,#fff);
  color:var(--text2,#4a4a51); border-radius:8px; padding:3px 6px;
  font-size:11.5px; cursor:pointer; max-width:150px;
}

/* ONDE bateu, e o termo realçado dentro do excerto */
.cp-onde-bateu{
  margin-left:6px; font-size:10px; color:var(--text3,#75757c);
  border:1px solid var(--line,#ececec); border-radius:999px; padding:0 6px;
  white-space:nowrap;
}
.cp-mark{ background:var(--cyan-soft,#eef5fd); color:var(--cyan,#0071e3);
  border-radius:3px; padding:0 2px; font-weight:600; }

/* quem é quem: o login é o único campo único, e é ele que separa dois nomes
   iguais — fica em tipo de largura fixa para se ler como identificador */
.cd-ident{ font-family:var(--font-mono,ui-monospace,monospace); font-size:10.5px; }

/* ── a PRÉ-VISUALIZAÇÃO do anexo, antes do envio ───────────────────────── */
.ca-previa{
  flex:none; width:34px; height:34px; border-radius:7px; overflow:hidden;
  background:var(--bg2,#f6f6f7); display:inline-flex;
}
.ca-previa img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── o ENVIAR alinhado com a caixa ─────────────────────────────────────────
   «Continua visualmente um pouco separado da caixa» — o compositor e a fila
   de ações passam a partilhar a mesma margem lateral, e o botão acaba na
   mesma vertical onde a caixa acaba. */
.chat-compose{ padding:8px 12px 10px; }
.chat-compose-acoes{ padding:0 1px; }

/* ── ECRÃ INTEIRO: o quarto degrau ─────────────────────────────────────────
   Uma página autónoma obrigava a um segundo hospedeiro para o mesmo chat.js,
   que depende do DOM do shell — duas casas para o mesmo código e a certeza de
   divergirem. É o painel a ocupar tudo: mesma aplicação, sem cópia. */
@media (min-width: 901px){
  body.chat-w-inteira .right-panel{
    width:100vw; max-width:100vw; border-left:0;
  }
  /* NO ECRÃ INTEIRO: a MOLDURA ocupa a coluna, só o CONTEÚDO é que se trava.

     Isto estava ao contrário e via-se (17/09): o cabeçalho, as mensagens e a
     caixa de escrever levavam `max-width:900px; margin:auto`, e num ecrã de
     1500 a conversa ficava um cartão a flutuar no meio de 1180px, com 180px
     mortos de cada lado — medido. Parecia uma janela dentro da janela.

     A regra certa é a do Telegram: a barra do topo, o chão das mensagens e a
     caixa de escrever ESTICAM de margem a margem (são moldura, e uma moldura
     que não chega às bordas lê-se como um cartão solto); o que se trava é a
     LINHA DE TEXTO, e trava-se por recuo interno em vez de largura máxima.
     Assim o fundo é contínuo e o texto continua a ler-se a 900px.

     `max(14px, …)` guarda o recuo mínimo: entre 901 e 928px de coluna a conta
     daria menos de 14 e o texto encostava à borda. */
  body.chat-w-inteira #chatMessages,
  body.chat-w-inteira .chat-compose,
  body.chat-w-inteira .chat-back-bar,
  body.chat-w-inteira .chat-fixadas,
  body.chat-w-inteira .chat-busca-conversa{
    max-width:none; width:auto; margin-left:0; margin-right:0;
    padding-inline:max(14px, calc((100% - 900px) / 2));
  }
  /* A caixa de escrever deixou de ser uma barra de margem a margem (23/09):
     é o MESMO cartão do painel, dentro da coluna de leitura — e um cartão
     tem cantos. A regra vive na pele (chat-arejado.css, secção 5). */
  /* O `#chatList` e as `.chat-acoes` levavam `max-width:760px` de quando o
     ecrã inteiro era UMA coluna e a lista ocupava o ecrã todo. Com duas
     colunas a lista tem 320px fixos e a regra não fazia nada — saiu, para não
     ficar a mentir a quem a ler. */
}

/* ── o PIN e o FECHAR do cabeçalho do painel ───────────────────────────────
   «Parecem visualmente desligados do resto» (17/09) — e estavam: 28×28 contra
   os 32×32 de todas as outras ações do chat, com um raio diferente e sem
   folga entre si. Não é preciso redesenhá-los; é preciso pô-los na MESMA
   grelha das outras.

   Fica no chat.css e não no styles.css de propósito: o `.rp-head` é do shell
   e serve também as Notificações e as Tarefas — mexer-lhe lá mudava três
   painéis para arrumar um. */
.rp-head .rp-actions{ display:flex; align-items:center; gap:2px; padding-right:4px; }
.rp-head .rp-action{
  min-width:32px; height:32px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
}
.rp-head .rp-action:focus-visible{ outline:2px solid var(--cyan,#0071e3); outline-offset:2px; }

/* ── o ⤓ do anexo deixa de estar colado ao tamanho ─────────────────────────
   Num painel estreito o nome corta e o «PDF · 122 KB» encosta ao ícone; com
   a folga, lê-se como duas coisas e não como uma palavra comprida. */
.chat-anexo-cartao{ gap:9px; }
.ca-baixar{ margin-left:6px; min-width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:7px; }
.ca-baixar:hover{ background:rgba(255,255,255,.18); }
.cm-bloco:not(.me) .ca-baixar:hover{ background:var(--bg2,#f6f6f7); }

/* ── o espaço VERTICAL dos estados vazios ──────────────────────────────────
   «Tens muito espaço vazio em vários estados» — os ecrãs vazios ocupavam a
   altura toda com uma figura enorme ao meio. Encolhem e sobem: a informação
   fica onde os olhos já estão, e o resto do painel fica livre para o que
   vier a seguir. */
.chat-vazio{ padding:28px 20px; justify-content:flex-start; }
.chat-vazio-fig{ font-size:26px; margin-bottom:8px; opacity:.5; }
.chat-vazio-t{ font-size:13px; }
.chat-vazio-d{ font-size:11.5px; max-width:34ch; }
.chat-tratado{ padding:14px 12px; }

/* ── UMA barra só no cabeçalho do painel (17/09) ───────────────────────────
   Eram duas: a do shell («Chat» + pin + fechar, 33px) e a do chat
   (⌕ ⇔ ✚ ⋮, 46px) — 79px antes da primeira conversa, com o título esticado
   sozinho a atravessar o painel. Agora as ações do módulo entram no
   cabeçalho, entre o título e os botões do painel.

   Hierarquia da esquerda para a direita: o que a coisa É (Chat) · o que se
   faz NELA (procurar, largura, nova, mais) · o que se faz AO PAINEL (fixar,
   fechar). Os dois últimos grupos separam-se por um traço fino, senão lê-se
   tudo como uma fila de seis ícones iguais. */
.rp-head{ align-items:center; min-height:40px; }
.rp-title{ flex:none; padding:0 10px 0 14px; }
.rp-head-mod{ flex:1; display:flex; align-items:center; justify-content:flex-end; gap:2px; }
.rp-head-mod:empty{ flex:1; }
.rp-actions{ position:relative; padding-left:8px; margin-left:6px; }
.rp-head-mod:not(:empty) + .rp-actions::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:var(--line2,#d2d2d7);
}
/* a fila antiga desaparece: fica vazia e sem altura */
.chat-acoes:empty{ display:none; }

/* ── a BOLA não pode ser só COR (17/09) ────────────────────────────────────
   «Não depender apenas de verde/cinzento/vermelho para transmitir estado.»
   Estava certo: as quatro bolas do shell distinguem-se SÓ pela cor, e quem
   não distingue vermelho de verde — 8% dos homens — vê quatro círculos iguais.

   Cada estado ganha uma FORMA, como no Teams e no Slack, sem lhe tocar na
   cor: disponível é cheia, ocupado leva um traço, ausente leva um quarto
   vazado (a ideia de relógio), indisponível é um anel oco. Lê-se em
   monocromático e lê-se a 11px.

   Só dentro do chat: o `styles.css` é do shell e serve o menu do utilizador,
   as listas de pessoas e mais três sítios — mudar a forma lá mudava tudo de
   uma vez, e isso é uma decisão do Telmo e não minha. */
/* NADA de `position:relative` aqui: a bola já é `position:absolute` (é assim
   que assenta no canto do avatar) e um elemento absoluto já serve de contexto
   ao seu próprio `::after`. Pôr-lhe `relative` anulava o `absolute` e a bola
   caía para FORA do avatar, esticando-o de 34×34 para 34×53 — foi o que o
   Diogo apanhou na captura de 17/09. */
.cl-av .status-dot::after, .cbb-av .status-dot::after{
  content:''; position:absolute; inset:0; border-radius:50%;
}
/* OCUPADO: um traço branco ao meio (o «não incomodar» de toda a gente) */
.cl-av .status-busy::after, .cbb-av .status-busy::after{
  background:linear-gradient(to bottom, transparent 42%, var(--bg,#fff) 42%,
             var(--bg,#fff) 58%, transparent 58%);
}
/* AUSENTE: um quarto vazado, a ideia do ponteiro do relógio */
.cl-av .status-away::after, .cbb-av .status-away::after{
  background:conic-gradient(var(--bg,#fff) 0deg 90deg, transparent 90deg 360deg);
}
/* INDISPONÍVEL: anel oco — não está lá ninguém */
#chatPane .cl-av .status-offline, #chatPane .cbb-av .status-offline{
  background:var(--chat-moldura, var(--bg1,#fff));
  box-shadow:inset 0 0 0 2.5px var(--text3,#98989d);
}

/* ═══ MODO EXPANDIDO: DUAS COLUNAS (17/09) ═════════════════════════════════
   «O modo expandido parece apenas esticar o mesmo chat» — e parecia porque
   era. A lista e a conversa alternavam como num telemóvel, e a 1400px isso
   deixa metade do ecrã em branco com a lista encolhida ao meio.

   A partir da «ampla»: 320px de lista à esquerda, a conversa a ocupar o resto.
   É o desenho do Teams e do WhatsApp Desktop, e é o que faz isto deixar de
   ser uma sidebar gorda. */
body.chat-2col .rp-pane[data-pane="chat"]{ flex-direction:row; }
body.chat-2col #chatListView{
  flex:0 0 320px; max-width:320px; min-width:0;
  border-right:1px solid var(--line,#ececec);
}
body.chat-2col #chatConvView{ flex:1; min-width:0; }
/* a seta «voltar» não faz sentido quando a lista está sempre à vista */
body.chat-2col .chat-back-btn{ display:none; }
/* A REGRA DA LARGURA DA CONVERSA VIVE NUM SÍTIO SÓ, e esse sítio é a regra do
   `chat-w-inteira` lá em cima. Aqui havia uma SEGUNDA, a fazer o mesmo com
   outro número (820 contra 900) — e como vinha depois, ganhava. Foi por isso
   que a correção de cima não se viu no ecrã: mudei uma das duas.

   É o mesmo defeito das ações da mensagem e do rótulo do botão da largura:
   duas cópias da mesma decisão, e a que se corrige nunca é a que manda. */
/* a barra da conversa entra na MESMA coluna: fora dela, o nome ficava 40px à
   esquerda das mensagens e o desalinho lê-se como descuido */
/* e a LISTA usa a largura que tem: nomes, excertos e datas com mais espaço */
body.chat-2col #chatList, body.chat-2col .chat-acoes{ max-width:none; }

/* o estado vazio da lista encolhe no expandido — é uma frase, não um ecrã */
body.chat-2col .chat-tratado{ padding:10px 12px; }
/* o «escolhe uma conversa» do lado direito fica ao meio, que é onde se olha */
.chat-vazio.is-escolher{ justify-content:center; min-height:60vh; }

/* ── a LISTA: hover, selecionada, por ler ──────────────────────────────────
   «Não se percebe qual conversa está selecionada.» Três estados distintos e
   que não se confundem entre si: o hover é um cinzento de passagem, a
   selecionada tem fundo de acento suave + barra, a por ler tem a barra azul e
   o negrito. Uma conversa pode estar selecionada E por ler — por isso a
   selecionada usa FUNDO e a por ler usa BARRA. */
.chat-list-row{ transition:background .12s; }
.chat-list-row:hover{ background:var(--bg2,#f6f6f7); }
.chat-list-row.is-aberta{
  background:var(--cyan-soft,#eef5fd);
  box-shadow:inset 3px 0 0 var(--cyan,#0071e3);
}
.chat-list-row.is-aberta .cl-nome{ color:var(--cyan,#0071e3); }
.chat-list-row.is-aberta.nao-lida{ box-shadow:inset 3px 0 0 var(--cyan,#0071e3); }

/* a PRÉ-VISUALIZAÇÃO é SEMPRE uma linha, corte com reticências — numa
   resolução grande o texto do Telmo enchia a linha toda e a conversa dele
   parecia maior do que as outras */
.cl-l2{ min-width:0; }
.cl-prev{
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* «Ainda sem mensagens» era tão apagado que parecia desativado */
.cl-prev.vazia{ opacity:1; color:var(--text3,#75757c); font-style:italic; }

/* ── o CABEÇALHO no modo grande ────────────────────────────────────────────
   «O título fica sozinho à esquerda e as ações do outro lado, muito disperso.»
   No expandido o conteúdo do cabeçalho trava numa largura e os dois grupos
   aproximam-se, em vez de fugirem para os cantos de um ecrã de 1400px. */
body.chat-2col .rp-head{ padding-right:8px; }
body.chat-2col .rp-head-mod{ justify-content:flex-start; padding-left:14px; }

/* o ✚ deixa de gritar quando já há uma conversa aberta: aí a ação principal
   é escrever, não começar outra coisa */
.cl-ico.forte{ background:var(--cyan-soft,#eef5fd); color:var(--cyan,#0071e3); }

/* ── o SCROLL mais percetível ──────────────────────────────────────────── */
#chatMessages::-webkit-scrollbar, #chatList::-webkit-scrollbar{ width:12px; }
#chatMessages::-webkit-scrollbar-thumb, #chatList::-webkit-scrollbar-thumb{
  background:var(--text3,#98989d); border-radius:999px;
  border:3px solid transparent; background-clip:content-box; min-height:40px;
}
#chatMessages::-webkit-scrollbar-track, #chatList::-webkit-scrollbar-track{
  background:var(--bg2,#f6f6f7);
}

/* ── o ANEXO dentro da bolha, mais compacto ───────────────────────────────
   «A mensagem "pdf a serio" fica com um cartão enorme» — e com dois ou três
   ficheiros a bolha passava a ser uma lista de cartões. */
.chat-anexo-cartao{ padding:4px 6px; max-width:100%; }
.chat-anexo-cartao .ca-ico{ font-size:14px; }
.chat-anexo-cartao .ca-nome{ font-size:11.5px; }
.chat-anexo-cartao .ca-sub{ font-size:10.5px; }
.chat-anexos{ gap:4px; }

/* ── o COMPOSITOR como UM bloco ───────────────────────────────────────────
   «O Enviar está demasiado separado dos restantes controlos.» A caixa e as
   ações passam a partilhar a mesma moldura: lê-se como uma zona de escrita,
   e não como um campo mais uns botões soltos por baixo. */
.chat-compose{
  background:var(--bg1,#fff); border:1px solid var(--line,#ececec);
  border-radius:14px; margin:8px 12px 10px; padding:2px 6px 6px; gap:2px;
}
.chat-compose-editor{ border:0; background:transparent; }
.chat-compose-acoes{ padding:0 2px 0 4px; }

/* ── duas colunas SEM conversa escolhida ───────────────────────────────────
   O lado direito não é uma conversa vazia: é um convite. O compositor e a
   barra da conversa não têm ali nada a fazer — escrever para ninguém não é
   um estado que se ofereça. */
body.chat-sem-aberta .chat-compose,
body.chat-sem-aberta .chat-back-bar,
body.chat-sem-aberta .chat-fixadas,
body.chat-sem-aberta .chat-busca-conversa{ display:none; }
body.chat-sem-aberta #chatMessages{ display:flex; align-items:center; justify-content:center; }

/* o convite: centrado e sóbrio — é um estado de espera, não um erro */
.chat-vazio.is-escolher{
  min-height:auto; justify-content:center; align-items:center; text-align:center;
  padding:40px 24px;
}
.chat-vazio.is-escolher .chat-vazio-fig{ font-size:34px; opacity:.35; margin-bottom:10px; }

/* ── o CABEÇALHO em duas colunas ───────────────────────────────────────────
   «O título Chat fica sozinho à esquerda e todas as ações do outro lado» —
   num ecrã de 1900px isso são dois grupos a 1700px de distância. Em duas
   colunas o título e as ações do módulo vivem sobre a COLUNA DA LISTA, que é
   a que eles comandam; o pin e o fechar ficam no canto, que é o painel todo. */
body.chat-2col .rp-title{ width:auto; }
body.chat-2col .rp-head-mod{
  flex:0 0 auto; justify-content:flex-start; padding-left:8px; margin-right:auto;
}

/* ═══ A CONVERSA, refeita (17/09, 3.ª volta) ═══════════════════════════════
   «Parece que nem alteraste nada» — e a razão é que eu andava a acertar
   detalhes enquanto a forma de base estava errada. O que as capturas mostram:
   bolhas com CONTORNO (leem-se como campos de formulário, não como fala), o
   nome repetido quatro vezes numa conversa a dois, avatares soltos por baixo
   das bolhas, e a hora numa linha só dela a empurrar tudo para baixo.

   As convenções que faltavam, e que o Telegram e o WhatsApp Desktop usam há
   anos — não por moda, por funcionarem:

     1. a bolha recebida é FUNDO, não contorno;
     2. numa conversa a dois não há nome nem avatar (está no cabeçalho);
     3. a hora vive DENTRO da bolha, na mesma linha do fim do texto;
     4. um grupo de mensagens é UM objeto: a cauda só na última;
     5. o espaço entre mensagens é apertado; entre grupos é que respira. */

/* ── a bolha ──────────────────────────────────────────────────────────── */
.cm-bloco .chat-message{
  border:0;                                  /* fundo, nunca contorno */
  /* BRANCA sobre o cinzento da conversa, e não `--bg2` (fbfbfd), que sobre o
     `--bg` (f5f5f7) é praticamente a mesma cor — a bolha desaparecia. Chão
     cinzento, bolha branca: é o contraste que o Telegram e o WhatsApp usam, e
     funciona igual no tema escuro (`--bg1` é mais claro que `--bg`). */
  background:var(--chat-bolha);
  border-radius:16px;
  padding:6px 10px 5px;
  box-shadow:0 1px 1.5px rgba(0,0,0,.07);
}
.cm-bloco.me .chat-message{
  background:var(--cyan,#0071e3); border:0;
}
/* a CAUDA só na última do grupo — é o que faz seis bolhas lerem-se como uma
   coisa dita por uma pessoa, e não como seis interrupções */
.cm-bloco:not(.me) .chat-message{ border-bottom-left-radius:16px; }
.cm-bloco:not(.me).fecha .chat-message{ border-bottom-left-radius:5px; }
.cm-bloco.me .chat-message{ border-bottom-right-radius:16px; }
.cm-bloco.me.fecha .chat-message{ border-bottom-right-radius:5px; }
/* e os cantos de dentro do grupo encostam-se */
.cm-bloco:not(.me):not(.abre) .chat-message{ border-top-left-radius:5px; }
.cm-bloco.me:not(.abre) .chat-message{ border-top-right-radius:5px; }

/* ── a HORA dentro da bolha, na linha do texto ────────────────────────────
   Estava numa linha própria e cada mensagem ficava com mais 16px de altura.
   Dentro da bolha, encostada à direita, o texto flui à volta dela. */
.cm-bloco .chat-message{ display:block; }     /* deixa de ser flex-column */
.cm-corpo{ display:inline; }
.cm-meta{
  display:inline-flex; align-items:center; gap:4px; float:right;
  margin:6px 0 0 8px; line-height:1; white-space:nowrap;
  font-size:10.5px;
}
.cm-bloco .chat-message::after{ content:''; display:block; clear:both; }
/* a bolha de uma mensagem do meio do grupo não tem meta nenhuma a ocupar */
.cm-bloco:not(.fecha) .cm-meta{ margin-top:2px; }

/* ── o ritmo vertical ─────────────────────────────────────────────────── */
.cm-bloco{ margin-top:2px; align-items:flex-end; }
.cm-bloco.abre{ margin-top:10px; }
.cm-pilha{ gap:2px; }
/* o chão é pintado mais abaixo, pelo par `--chat-chao` (que troca com o tema);
   aqui fica só o espaçamento */
#chatMessages{ gap:0; padding:10px 14px 14px; }

/* ── o avatar, quando existe (só em grupo), encostado à última ─────────── */
.cm-bloco.em-grupo .cm-av .mui-avatar{ width:26px; height:26px; }
.cm-bloco.em-grupo:not(.fecha) .cm-av{ visibility:hidden; }
.cm-quem{ font-size:11.5px; font-weight:600; color:var(--cyan,#0071e3);
  margin:0 0 1px 2px; }

/* ── as reações: pastilhas pequenas coladas à bolha ───────────────────── */
.chat-reactions{ margin-top:-4px; gap:3px; position:relative; z-index:1; }
.chat-reaction{
  font-size:11px; padding:1px 7px; border-radius:999px; line-height:1.5;
  border:1px solid var(--line,#ececec); background:var(--bg,#fff);
}

/* ── o convite do modo expandido não é uma caixa a flutuar ────────────────
   Na captura via-se um retângulo de outro tom, com costuras, no meio de uma
   área enorme. O FUNDO é da coluna inteira; o que trava a 820px é só o
   conteúdo. */
/* o tom vem do par `--chat-chao`, mais abaixo — esta regra fica só a dizer que
   o fundo é da COLUNA inteira e não do bloco de conteúdo */
body.chat-2col #chatConvView{ background:var(--chat-chao); }
body.chat-sem-aberta #chatMessages{ background:transparent; max-width:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ESCALA DE LEITURA — medida no Telegram Web, 17/09.

   «parece que nem alteraste nada.» Tinha razão, e a razão é esta: eu andava a
   mexer em raios e sombras, e o que estava errado era o TAMANHO. Fui medir o
   Telegram a correr:

     texto da mensagem   16px / 21px     aqui estava a 13 / 18,85
     hora                12px            aqui estava a 10,5
     bolha               5px 8px 6px     (com texto a 16)
     raio                15px, cauda 6   (--border-radius-messages)
     largura da bolha    464–480px FIXO  aqui estava min(100%, 620px)
     linha da lista      72px de alto    aqui estava a 52
     avatar da lista     54px            aqui estava a 34
     título da lista     16px / 500      aqui estava a 13

   Não copio os 16px: o Telegram vive numa janela inteira e isto vive num
   painel de 320–560px, onde 16 come a linha toda. Fico um degrau abaixo, na
   escala do Slack — 15px de texto, 11px de hora — que é o mínimo em que um
   chat se lê como conversa e não como tabela de administração. A lista sobe
   para 40/60, proporção do Telegram encolhida para a largura que temos.

   A largura da bolha passa a FIXA e não a percentagem: a percentagem faz a
   mesma frase mudar de forma conforme o painel, e o que se quer é uma medida
   de leitura constante. 480px é ~60 caracteres a 15px — a medida de sempre. */

/* ── a mensagem ───────────────────────────────────────────────────────────*/
.cm-bloco .cm-corpo{ font-size:15px; line-height:21px; }
.cm-bloco .chat-message{
  padding:7px 11px 8px;
  max-width:min(100%, 480px);
}
.cm-meta{ font-size:11px; }
.cm-meta .cm-recibo{ font-size:11px; }
/* o nome de quem fala, em grupo, cresce com o resto */
.cm-quem{ font-size:12.5px; }
.cm-bloco.em-grupo .cm-av .mui-avatar{ width:30px; height:30px; font-size:11px; }


/* ── a lista ──────────────────────────────────────────────────────────────*/
.chat-list-row{ padding:10px 13px; gap:12px; }
.cl-av .mui-avatar{ width:40px; height:40px; font-size:14px; }
.cl-fich{ width:40px; height:40px; }
.cl-nome{ font-size:14px; }
.cl-prev{ font-size:12.5px; }
.cl-hora{ font-size:11px; }

/* ── a caixa de escrever, na mesma escala do que se lê ────────────────────*/
.chat-editor{ font-size:15px; line-height:21px; }

/* ═══ três coisas que o Telegram faz e eu não fazia ═══════════════════════ */

/* 1 · AS MENSAGENS ASSENTAM NO FUNDO.
   Numa conversa com cinco mensagens elas estavam coladas ao topo e por baixo
   ficava meio ecrã vazio — lê-se como um painel que não carregou. Numa app de
   conversa o conteúdo empilha DE BAIXO PARA CIMA: a última mensagem está
   sempre à altura dos olhos, junto à caixa de escrever.
   `margin-top:auto` no primeiro filho e não `justify-content:flex-end` no
   contentor: com `flex-end` o princípio da lista fica inalcançável quando há
   scroll; com a margem automática, ela resolve-se a zero assim que o conteúdo
   passa a altura da caixa, e o scroll funciona como deve. */
/* ...mas NÃO no estado vazio. Uma margem automática ganha ao
   `justify-content:center` do `.chat-sem-aberta`, e o «Escolhe uma conversa»
   ia parar ao fundo da coluna: medido 641px de folga em cima contra 14 em
   baixo. Empilhar de baixo para cima é para MENSAGENS; um estado vazio
   continua a viver no meio. */
body:not(.chat-sem-aberta) #chatMessages > :first-child{ margin-top:auto; }

/* 2 · O CHÃO TEM DE SER MAIS ESCURO QUE A BOLHA.
   Estava `--bg` (f5f5f7) com a bolha a branco: 2% de diferença, e no ecrã as
   bolhas recebidas simplesmente não existiam. O Telegram resolve isto com
   papel de parede; sem papel de parede, resolve-se com um degrau real de
   cinzento. `--bg3` dá 6%, que é o mínimo em que a bolha se vê sem que o
   painel pareça sujo. */
#chatMessages{ background:var(--chat-chao); }
body.chat-2col #chatConvView{ background:var(--chat-chao); }

/* 3 · A HORA EM TODAS AS MENSAGENS.
   Eu escondia-a nas mensagens do meio do grupo para não repetir relógios. No
   ecrã isso lia-se ao contrário do que eu queria: uma bolha com hora a seguir
   a outra sem hora parece um defeito, não parece calma. O Telegram mostra-a
   sempre — e o que a faz recuar não é escondê-la, é o contraste. Fica em
   todas, apagada. */
.cm-bloco:not(.fecha) .cm-hora,
.cm-bloco:not(.fecha) .cm-recibo{
  position:static; width:auto; height:auto; overflow:visible; clip-path:none;
}
.cm-bloco:not(.fecha) .cm-meta:not(:has(.cm-editada)):not(:has(.cm-estrela)){
  margin:6px 0 0 8px; height:auto;
}
.cm-hora{ opacity:.55; }
.cm-bloco.me .cm-hora{ opacity:.8; }

/* as linhas de cada lado, a `--line` sobre o cinzento do chão, não se viam
   (o gradiente que aqui vivia saiu com o sticky, 23/09) */
.cm-dia::before, .cm-dia::after{ background:var(--line2,#d2d2d7); }


/* ═══ o CHÃO e a BOLHA são um PAR, e o par troca de tokens com o tema ══

   A bolha recebida tem de ser mais clara do que o chão em que assenta — é
   isso, e só isso, que a faz existir. Mas «mais clara» não cai sempre nos
   mesmos tokens: nas peles CLARAS a ordem do mais escuro para o mais claro é
   `--bg3 < --bg < --bg2 < --bg1`, e nas ESCURAS é `--bg < --bg1 < --bg2 <
   --bg3` — invertida. Eu tinha fixado chão `--bg3` e bolha `--bg1`: no claro
   dava 6% de degrau, no escuro dava a bolha MAIS ESCURA que o chão, que é ao
   contrário do que se quer e de como o Telegram o faz.

   Por isso o par declara-se aqui, uma vez, e é ele que troca — não as regras
   que o usam. Verificado nas quatro peles (mono, fluent, citron, clean), que
   seguem todas a mesma inversão. */
body{
  --chat-chao:  var(--bg3, #f0f0f3);   /* claro: cinzento */
  --chat-bolha: var(--bg1, #ffffff);   /* claro: branco   */
}
:root[data-theme="dark"] body{
  --chat-chao:  var(--bg,  #141416);   /* escuro: o mais fundo */
  --chat-bolha: var(--bg2, #212124);   /* escuro: um degrau acima */
}

/* ═══ OS GESTOS DO TELEGRAM (17/09) ═════════════════════════════════════════

   A identidade no cabeçalho, o painel de informação e a foto em grande. O
   menu do botão direito não tem CSS nenhum aqui de propósito: usa o do shell
   (`assets/ctxmenu.css`), porque um menu de contexto com o aspeto só do chat
   ensinaria que este é outro produto. */

/* ── o cabeçalho: a identidade é um alvo ────────────────────────────────── */
.cbb-id{
  display:flex; align-items:center; gap:9px; flex:1; min-width:0;
  background:transparent; border:0; padding:3px 6px; margin:0 -6px;
  border-radius:10px; cursor:pointer; text-align:left; color:inherit;
  transition:background .12s;
}
.cbb-id:hover{ background:var(--bg3,#f0f0f3); }
.cbb-id:focus-visible{ outline:2px solid var(--cyan,#0071e3); outline-offset:1px; }

.chat-visor .cv-sem-foto{
  padding:40px 24px; text-align:center; color:var(--text3,#75757c); font-size:14px;
}

/* ═══ SEGUNDA VOLTA — com o Telegram MEDIDO, não recordado ══════════════════

   À primeira fui buscar a lógica e deixei a forma, e via-se. Voltei ao
   Telegram Web e medi:

     menu de contexto   raio 16 · item 32px de alto · letra 14 · ícone 20
     fila de reações    pastilha 264×40, raio 20, blur(25px), 7 emojis de 32
                        com 4px entre eles, 8px ACIMA do menu
     painel             coluna 464 · avatar 120 redondo · nome 20/500
                        linha: ícone 24 · VALOR 16 branco · RÓTULO 14 cinzento
                        POR BAIXO · interruptor 30×14 à direita
     visor de foto      ecrã inteiro, foto quadrada, barra em cima com quem +
                        descarregar/afastar/aproximar/fechar

   O painel do SysCom tem 400px no passo estreito (o do Telegram tem 464 numa
   janela inteira), por isso a coluna encolhe; as proporções de dentro é que
   se mantêm, porque são elas que fazem a coisa parecer-se. */

/* ── a FILA DE REAÇÕES ─────────────────────────────────────────────────── */
.cm-fila-reacoes{
  position:fixed; z-index:1000; display:flex; align-items:center; gap:4px;
  height:40px; padding:0 8px; border-radius:20px;
  background:var(--bg1,#fff); border:1px solid var(--line,#e8e8ed);
  box-shadow:var(--shadow-md,0 4px 14px rgba(0,0,0,.16));
  /* o Telegram tem `blur(25px)` por trás da pastilha; aqui o fundo é claro e
     opaco, e o desfoque só se notaria onde houvesse padrão por baixo — fica o
     mesmo efeito de «flutua por cima» com a sombra, que é o que a casa usa. */
  animation:cfrEntra .12s ease-out;
}
@keyframes cfrEntra{ from{ transform:translateY(4px); opacity:0 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){ .cm-fila-reacoes{ animation:none } }

.cm-fila-reacoes .cfr-e,
.cm-fila-reacoes .cfr-mais{
  width:32px; height:32px; flex:none; border:0; background:transparent;
  border-radius:50%; cursor:pointer; font-size:22px; line-height:1;
  display:grid; place-items:center; padding:0;
  transition:transform .1s, background .1s;
}
.cm-fila-reacoes .cfr-e:hover{ transform:scale(1.25); }
.cm-fila-reacoes .cfr-e.is-minha{ background:var(--cyan-soft,#e6f0fb); }
.cm-fila-reacoes .cfr-mais{
  font-size:19px; color:var(--text3,#75757c); font-weight:600;
}
.cm-fila-reacoes .cfr-mais:hover{ background:var(--bg3,#f0f0f3); color:var(--text,#1b1b1f); }

/* ── o PAINEL DE INFORMAÇÃO ────────────────────────────────────────────── */
.chat-info{
  position:absolute; inset:0 0 0 auto; width:min(340px, 100%);
  background:var(--bg1,#fff); border-left:1px solid var(--line,#e8e8ed);
  box-shadow:-8px 0 24px rgba(0,0,0,.08);
  display:flex; flex-direction:column; z-index:30;
  animation:ciEntra .16s ease-out;
}
@keyframes ciEntra{ from{ transform:translateX(12px); opacity:0 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){ .chat-info{ animation:none } }

.chat-info .ci-cab{
  display:flex; align-items:center; gap:10px; padding:0 8px 0 12px; height:48px;
  border-bottom:1px solid var(--line,#e8e8ed); flex:none;
}
.chat-info .ci-t{ flex:1; font-size:15px; font-weight:600; color:var(--text,#1b1b1f); }
.chat-info .ci-x{
  flex:none; width:36px; height:36px; border:0; border-radius:50%;
  background:transparent; color:var(--text2,#4a4a51); cursor:pointer; font-size:14px;
}
.chat-info .ci-x:hover{ background:var(--bg3,#f0f0f3); color:var(--text,#1b1b1f); }

.chat-info .ci-corpo{ flex:1; min-height:0; overflow-y:auto; padding:0 0 20px; }

/* o retrato: avatar 120 redondo, nome 20/500, como o medido */
.chat-info .ci-retrato{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 16px 18px;
}
.chat-info .ci-foto{
  border:0; background:transparent; padding:0; cursor:pointer; border-radius:50%;
  transition:transform .12s;
}
.chat-info .ci-foto:hover:not(:disabled){ transform:scale(1.03); }
.chat-info .ci-foto:disabled{ cursor:default; }
.chat-info .ci-foto .mui-avatar{ width:120px; height:120px; font-size:42px; }
.chat-info .ci-nome{
  font-size:20px; font-weight:500; color:var(--text,#1b1b1f);
  text-align:center; line-height:1.25; margin-top:6px;
}

/* o CARTÃO das linhas — é ele que separa «a ficha» do «o retrato» */
.chat-info .ci-cartao{
  margin:0 12px; padding:4px 0;
  border-top:1px solid var(--line,#e8e8ed);
  border-bottom:1px solid var(--line,#e8e8ed);
}
.chat-info .ci-linha{
  display:flex; align-items:center; gap:14px; padding:10px 6px; min-height:48px;
}
.chat-info .ci-ico{
  flex:none; width:24px; height:24px; color:var(--text3,#75757c);
  display:grid; place-items:center;
}
.chat-info .ci-tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
/* VALOR em cima, RÓTULO por baixo — é a ordem de uma ficha, não de uma tabela */
.chat-info .ci-val{
  font-size:16px; color:var(--text,#1b1b1f); line-height:1.3; word-break:break-word;
}
.chat-info .ci-rot{ font-size:14px; color:var(--text3,#75757c); line-height:1.3; }

/* o interruptor: 38×22, com a bola de 18 a correr 16px */
.chat-info .ci-sw{
  flex:none; width:38px; height:22px; border-radius:999px; border:0; padding:0;
  background:var(--line2,#d2d2d7); cursor:pointer; position:relative;
  transition:background .15s;
}
.chat-info .ci-sw.on{ background:var(--cyan,#0071e3); }
.chat-info .ci-sw-bola{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--bg1,#fff); box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .15s;
}
.chat-info .ci-sw.on .ci-sw-bola{ transform:translateX(16px); }
.chat-info .ci-sw:focus-visible{ outline:2px solid var(--cyan,#0071e3); outline-offset:2px; }

.chat-info .ci-acoes{ margin:14px 12px 0; display:flex; flex-direction:column; gap:2px; }
.chat-info .ci-bt{
  text-align:left; border:0; background:transparent;
  color:var(--text,#1b1b1f); border-radius:10px; padding:11px 12px;
  font-size:15px; cursor:pointer; transition:background .12s;
}
.chat-info .ci-bt:hover{ background:var(--bg3,#f0f0f3); }
/* Sair e apagar não são «mais uma opção da lista»: uma tira-me daqui, a outra
   tira toda a gente. A cor de aviso é a que a casa já tem para isso — nunca um
   hex à mão (REGRAS §6). Só a que APAGA é vermelha; sair é uma decisão normal
   e pintá-la de perigo ensinava a ignorar o vermelho da que é mesmo. */
.chat-info .ci-bt.is-saida{ color:var(--text2,#4a4a52); }
.chat-info .ci-bt.is-perigo{ color:var(--red,#d93025); }
.chat-info .ci-bt.is-perigo:hover{ background:var(--red-bg,rgba(217,48,37,.10)); }

/* ── QUEM ESTÁ NO GRUPO ─────────────────────────────────────────────────────
   O painel dizia «3 pessoas» e mais nada — não dizia quem, e não havia um
   único botão para acrescentar, tirar ou passar o galão, apesar de todas as
   rotas existirem e responderem. Esta é a lista que faltava. */
.chat-info .ci-membros{
  margin:14px 12px 0; padding-top:12px;
  border-top:1px solid var(--line,#e8e8ed);
  display:flex; flex-direction:column; gap:2px;
}
.chat-info .ci-membros-t{
  font-size:13px; font-weight:600; color:var(--text3,#75757c);
  padding:0 12px 6px; text-transform:none;
}
.chat-info .ci-membro{
  display:flex; align-items:center; gap:10px;
  padding:7px 12px; border-radius:10px;
}
.chat-info .ci-membro:hover{ background:var(--bg3,#f0f0f3); }
.chat-info .ci-membro .mui-avatar{ width:36px; height:36px; font-size:15px; flex:none; }
.chat-info .ci-membro-txt{ flex:1; min-width:0; }
.chat-info .ci-membro-nome{
  font-size:15px; color:var(--text,#1b1b1f);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-info .ci-eu{ font-size:12px; color:var(--text3,#75757c); }
.chat-info .ci-membro-sub{
  font-size:13px; color:var(--text3,#75757c);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* O ⋮ só existe onde faz alguma coisa (ver `_blocoDosMembros`), por isso não
   se esconde por opacidade: ou está lá, ou não está. */
.chat-info .ci-membro-menu{
  flex:none; width:30px; height:30px; border:0; background:transparent;
  border-radius:50%; cursor:pointer; font-size:17px; line-height:1;
  color:var(--text3,#75757c);
}
.chat-info .ci-membro-menu:hover{ background:var(--bg2,#f6f6f8); color:var(--text,#1b1b1f); }
.chat-info .ci-membro-espera{
  padding:9px 12px; font-size:14px; color:var(--text3,#75757c);
}
.chat-info .ci-membro-add{
  display:flex; align-items:center; gap:10px; margin-top:4px;
  padding:7px 12px; border:0; background:transparent; cursor:pointer;
  border-radius:10px; font-size:15px; color:var(--cyan,#0071e3); text-align:left;
}
.chat-info .ci-membro-add:hover{ background:var(--bg3,#f0f0f3); }
.chat-info .ci-mais{
  width:36px; height:36px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--cyan,#0071e3); color:var(--on-accent,#fff); font-size:20px; line-height:1;
}

/* ── o VISOR DE FOTO em ecrã inteiro ───────────────────────────────────── */
.chat-visor.is-foto{
  /* O CHÃO deste visor NÃO segue o tema, e é de propósito. Um visor de fotos
     escurece a sala em todo o lado (Telegram, Fotos do Windows, Lightroom),
     porque o que se quer ver é a imagem e qualquer luz à volta rouba-lhe
     contraste. Como o chão é fixo, a tinta por cima dele também tem de ser —
     usar `--text` aqui dava tinta escura sobre preto no tema claro.
     Por isso o par declara-se aqui, com nome próprio, em vez de se escrever a
     cor à mão em cada regra: a decisão fica num sítio e vê-se que é decisão. */
  --cv-chao:  rgba(0,0,0,.92);
  --cv-tinta: rgb(255,255,255);
  position:fixed; inset:0; z-index:900;
  background:var(--cv-chao);
  display:flex; flex-direction:column;
}
.chat-visor.is-foto .cvf-barra{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:10px 14px; color:var(--cv-tinta);
}
.chat-visor.is-foto .cvf-quem{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; }
.chat-visor.is-foto .cvf-quem .mui-avatar{ width:38px; height:38px; font-size:15px; }
.chat-visor.is-foto .cvf-tx{ display:flex; flex-direction:column; min-width:0; }
.chat-visor.is-foto .cvf-nome{ font-size:15px; font-weight:600; }
.chat-visor.is-foto .cvf-sub{ font-size:12.5px; opacity:.65; }
.chat-visor.is-foto .cvf-bts{ flex:none; display:flex; align-items:center; gap:4px; }
.chat-visor.is-foto .cvf-bt{
  width:40px; height:40px; border:0; border-radius:50%; background:transparent;
  color:var(--cv-tinta); cursor:pointer; font-size:17px; line-height:1;
  display:grid; place-items:center; text-decoration:none; transition:background .12s;
}
.chat-visor.is-foto .cvf-bt:hover{ background:rgba(255,255,255,.14); }  /* véu sobre o chão fixo */
.chat-visor.is-foto .cvf-palco{
  flex:1; min-height:0; display:grid; place-items:center; padding:0 24px 28px; overflow:auto;
}
/* QUADRADA e não redonda: redonda é a miniatura, onde a forma serve para
   distinguir pessoas de ficheiros. Aqui já se sabe o que se está a ver, e
   cortar em círculo só esconde parte da imagem. */
.chat-visor.is-foto .cvf-img{
  max-width:min(560px, 86vw); max-height:78vh; width:auto; height:auto;
  border-radius:12px; display:block; transition:transform .15s;
  transform-origin:center;
}
.chat-visor.is-foto .cvf-img.is-perto{ cursor:grab; }

/* ═══ CRIAR UM GRUPO ════════════════════════════════════════════════════════

   Dois passos, com a ordem do Telegram: primeiro as PESSOAS, depois o NOME.
   Quem cria um grupo está a pensar «eu, o Telmo e o Francisco», não está a
   pensar num título — pedir o nome primeiro é pedir a parte difícil antes da
   fácil, e é onde se desiste. */

/* ── a porta: um botão inteiro, não mais um chip ──────────────────────────
   Os chips filtram QUEM se procura; criar um grupo é outra coisa e não podia
   ficar a parecer o quarto filtro — foi assim que o «Grupo» (que abria um
   departamento) passou dias a fazer-se passar pelo que não era. */
.chat-novo-grupo{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 12px; margin-bottom:12px; cursor:pointer;
  border:1px solid var(--line2,#d2d2d7); border-radius:12px;
  background:var(--bg1,#fff); color:var(--text,#1b1b1f); transition:.12s;
}
.chat-novo-grupo:hover{ background:var(--bg3,#f0f0f3); border-color:var(--cyan,#0071e3); }
.chat-novo-grupo .cng-ico{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--cyan,#0071e3); color:var(--on-accent,#fff); font-size:21px; line-height:1;
}
.chat-novo-grupo .cng-tx{ display:flex; flex-direction:column; min-width:0; }
.chat-novo-grupo .cng-t{ font-size:15px; font-weight:600; }
.chat-novo-grupo .cng-d{ font-size:12.5px; color:var(--text3,#75757c); }

/* ── passo 1: quem já foi escolhido ───────────────────────────────────────
   Pastilhas por cima do campo, como no Telegram: respondem a «quem é que eu
   já pus?» sem obrigar a rolar a lista à procura de vistos. */
.cg-escolhidos{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.cg-escolhidos:empty{ display:none; }
.cg-pastilha{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px 4px 11px; border-radius:999px; cursor:pointer;
  border:0; background:var(--cyan-soft,#e6f0fb); color:var(--cyan,#0071e3);
  font-size:13px; font-weight:600; transition:.12s;
}
.cg-pastilha:hover{ background:var(--cyan,#0071e3); color:var(--on-accent,#fff); }
.cg-pastilha .cg-x{ font-size:10px; opacity:.7; }

/* ── passo 2: a cara e o nome ─────────────────────────────────────────────
   A foto fica PREPARADA e vazia. Sem imagem, o avatar cai na inicial — que é
   o que todos os avatares desta casa já fazem. Não se inventa um carregamento
   de ficheiros para um v1 que ninguém pediu ainda; a coluna está na base para
   quando for pedido. */
.cg-retrato{ display:flex; justify-content:center; margin:4px 0 16px; }
.cg-retrato .cg-foto{
  width:84px; height:84px; font-size:32px;
  background:var(--cyan,#0071e3); color:var(--on-accent,#fff);
}
.cg-rot{
  display:block; font-size:12px; color:var(--text3,#75757c); margin:0 2px 4px;
}
.cg-nome{
  width:100%; box-sizing:border-box; padding:10px 12px; font-size:16px;
  border:1px solid var(--line2,#d2d2d7); border-radius:10px;
  background:var(--bg1,#fff); color:var(--text,#1b1b1f);
}
.cg-nome:focus{ outline:2px solid var(--cyan,#0071e3); outline-offset:-1px; border-color:transparent; }

/* ── o rodapé dos dois passos ─────────────────────────────────────────── */
.cg-rodape{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.cg-seguir, .cg-criar, .cg-voltar{
  border:0; border-radius:999px; padding:9px 20px; font-size:14px; font-weight:600;
  cursor:pointer; transition:.12s;
}
.cg-seguir, .cg-criar{ background:var(--cyan,#0071e3); color:var(--on-accent,#fff); }
.cg-seguir:disabled{ background:var(--line2,#d2d2d7); color:var(--text3,#75757c); cursor:default; }
.cg-seguir:not(:disabled):hover, .cg-criar:hover{ filter:brightness(1.08); }
.cg-voltar{ background:transparent; color:var(--text2,#4a4a51); }
.cg-voltar:hover{ background:var(--bg3,#f0f0f3); }

/* ── «João está a escrever…» ───────────────────────────────────────────────
   Entre as mensagens e a caixa de escrever — onde o olho já está quando se
   espera resposta. Sem ninguém a escrever NÃO OCUPA ALTURA: uma linha sempre
   presente empurrava a conversa para cima à toa, e o salto de 18px a cada
   tecla de quem está do outro lado era pior do que não haver indicador. */
.chat-a-escrever{
  height:0; overflow:hidden; opacity:0;
  padding:0 16px; font-size:12.5px; color:var(--text3,#75757c);
  font-style:italic; line-height:18px; white-space:nowrap; text-overflow:ellipsis;
  transition:height .12s ease-out, opacity .12s ease-out;
}
.chat-a-escrever.on{ height:18px; opacity:1; }
@media (prefers-reduced-motion:reduce){ .chat-a-escrever{ transition:none } }

/* ═══ QUEM LEU ══════════════════════════════════════════════════════════════
   «✓✓ 3» diz quantos. Isto diz QUAIS — e separa «recebeu e não abriu» de «nem
   sequer recebeu», que são duas situações com respostas diferentes: à primeira
   espera-se, à segunda liga-se. */

/* o recibo passou a ser um alvo: tem de o parecer, sem virar botão gordo */
.cm-recibo{
  border:0; background:transparent; padding:0; font:inherit; color:inherit;
  cursor:pointer; border-radius:4px;
}
.cm-recibo:hover{ background:rgba(255,255,255,.18); }
.cm-recibo:focus-visible{ outline:2px solid currentColor; outline-offset:1px; }

.ql-msg{
  margin:0 0 2px; font-size:13px; color:var(--text2,#4a4a51);
  font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ql-resumo{ margin:0 0 14px; font-size:13px; color:var(--text3,#75757c); }

.ql-bloco{ margin-bottom:14px; }
.ql-cab{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text3,#75757c); padding:0 2px 6px;
}
.ql-cab .ql-n{
  display:inline-block; min-width:18px; padding:0 5px; margin-left:4px;
  border-radius:999px; background:var(--bg3,#f0f0f3); color:var(--text2,#4a4a51);
  font-size:11px; font-weight:700; text-align:center; letter-spacing:0;
}
.ql-vazio{ margin:0 2px; font-size:13px; color:var(--text3,#75757c); font-style:italic; }

.ql-linha{ display:flex; align-items:center; gap:10px; padding:7px 2px; }
.ql-linha .mui-avatar{ width:32px; height:32px; font-size:12px; flex:none; }
.ql-tx{ flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; }
.ql-nome{ flex:1; min-width:0; font-size:14px; color:var(--text,#1b1b1f);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ql-em{ flex:none; font-size:12px; color:var(--text3,#75757c);
  font-variant-numeric:tabular-nums; }

/* ── a vista das ARQUIVADAS ───────────────────────────────────────────────
   Arquivar era um caminho sem volta (17/09): a conversa saía da lista e o
   item «Arquivadas» do menu não fazia nada. Esta vista é a porta de regresso,
   e cada linha traz o ↑ de desarquivar — vê-las sem as poder tirar de lá era
   metade do problema. */
.chat-arq-topo{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-bottom:1px solid var(--line,#e8e8ed);
}
.chat-arq-voltar{
  border:0; background:transparent; color:var(--cyan,#0071e3);
  font-size:13.5px; font-weight:600; cursor:pointer; padding:4px 6px;
  border-radius:8px;
}
.chat-arq-voltar:hover{ background:var(--bg3,#f0f0f3); }
.chat-arq-t{ font-size:13.5px; font-weight:650; color:var(--text,#1b1b1f); }
.cl-desarquivar{
  flex:none; width:28px; height:28px; border:0; border-radius:8px;
  background:transparent; color:var(--text3,#75757c); cursor:pointer; font-size:14px;
}
.chat-list-row:hover .cl-desarquivar{ background:var(--bg3,#f0f0f3); color:var(--cyan,#0071e3); }

/* ── O DEGRAU DE BAIXO: «Não enviada» (Fase 1, 18/09) ─────────────────────
   Não é um estado do servidor — é desta janela. Por isso tem as suas acções
   ao lado, e não num menu: a única coisa que há para fazer com uma mensagem
   que não saiu é tentar outra vez ou descartá-la. A cor de aviso é a da
   casa (token); e não é a cor sozinha a dizer — há o «!», a palavra no
   title/aria e os dois botões. */
.chat-message .cm-recibo-pendente{ opacity:.7; }
.chat-message .cm-recibo-falhou{
  color:var(--red,#d93025); font-weight:700; opacity:1;
  background:var(--red-bg,rgba(217,48,37,.12)); border-radius:8px; padding:0 5px;
}
.cm-falhou-acoes{ display:inline-flex; gap:6px; margin-left:8px; vertical-align:middle; }
.cm-falhou-acoes button{
  border:1px solid var(--red,#d93025); background:transparent; color:var(--red,#d93025);
  border-radius:8px; padding:2px 8px; font-size:12px; line-height:1.4; cursor:pointer;
}
.cm-falhou-acoes button:hover{ background:var(--red-bg,rgba(217,48,37,.12)); }
.cm-falhou-acoes button.is-descartar{ border-color:var(--line,#e8e8ed); color:var(--text3,#75757c); }
.cm-falhou-acoes button.is-descartar:hover{ background:var(--bg3,#f0f0f3); }
.cm-falhou-acoes button:focus-visible{ outline:2px solid var(--cyan,#0071e3); outline-offset:2px; }
/* a bolha falhada apaga-se um pouco: é a pista de forma, para quem não vê a cor */
.cm-bloco .chat-message.is-falhou{ opacity:.75; border-style:dashed; }


/* ── COERÊNCIA (revisão de 18/09) ─────────────────────────────────────────── */
/* a urgência seleccionada na zona é a conversa aberta ao centro — tem de se ver */
.chat-urg-row.is-aberta{ background:var(--cyan-soft,#eef5fd); box-shadow:inset 3px 0 0 var(--cyan,#0071e3); }
/* o botão de confirmar era pequeno de mais para a acção mais importante do cartão */
.cu-vi{ min-height:32px; padding:6px 12px; font-size:13px; }
.cm-urg-vi{ min-height:30px; padding:5px 12px; }
/* com a informação aberta em DUAS colunas, a conversa realinha-se no que sobra */
/* a coluna da informação ocupa 340px do lado direito (absolute); o que sobra
   é a conversa, e é NESSE resto que a pilha se centra (tecto de 900px, como
   no `chat-w-inteira`). Sem isto, num ecrã largo a pilha ficava a meio do
   ecrã inteiro — e portanto encostada, ou por baixo, da informação. */
body.chat-2col.chat-tem-info #chatConvView > :not(.chat-info){
  --ci-w:min(340px, 45%);
  --ci-margem:max(14px, calc((100% - var(--ci-w) - 900px) / 2));
  padding-left:var(--ci-margem); padding-right:calc(var(--ci-w) + var(--ci-margem)); box-sizing:border-box;
}
/* no compacto, a informação é uma vista inteira com «voltar»; em duas colunas é uma coluna e o × basta */
.chat-info .ci-voltar{
  border:0; background:transparent; color:var(--cyan,#0071e3); font-size:14px; cursor:pointer; padding:6px 8px; border-radius:8px;
}
.chat-info .ci-voltar:hover{ background:var(--bg3,#f0f0f3); }
body.chat-2col .chat-info .ci-voltar{ display:none; }
/* o cartão do anexo: o nome pode ocupar duas linhas em vez de ser cortado */
.chat-anexo-cartao .ca-nome{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25; }

/* ── ANEXOS, PESQUISA, INFORMAÇÃO, COMPOSITOR (revisão de 18/09, pontos 10–15) ── */
/* o cartão do anexo em DUAS linhas: o nome (até duas linhas) e, por baixo,
   «PDF · 122 KB · Abrir · Descarregar». Reverte a decisão de 17/09 de o pôr
   numa linha só: medido, o nome cortava e a única ação era um ⤓ sem nome.
   Abrir (pré-visualizar) e Descarregar são gestos diferentes e chamam-se
   pelo nome. */
.chat-anexo-cartao{ align-items:flex-start; padding:7px 9px; max-width:320px; }
.chat-anexo-cartao .ca-ico{ font-size:18px; margin-top:2px; }
.chat-anexo-cartao .ca-txt{ flex-direction:column; align-items:stretch; gap:3px; }
.chat-anexo-cartao .ca-nome{ font-size:12.5px; font-weight:600; }
.chat-anexo-cartao .ca-l2{ display:flex; align-items:center; flex-wrap:wrap; gap:0 2px; font-size:11.5px; line-height:18px; }
.chat-anexo-cartao .ca-sub{ font-size:inherit; opacity:.8; white-space:normal; }
.chat-anexo-cartao .ca-acao{
  border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; font-weight:600;
  padding:0 4px; margin:0; min-width:0; height:auto; line-height:inherit; border-radius:6px; opacity:.92;
  text-decoration:underline; text-underline-offset:2px;
}
.chat-anexo-cartao .ca-acao::before{ content:'·'; margin-right:5px; opacity:.6; display:inline-block; text-decoration:none; }
.chat-anexo-cartao .ca-acao:hover{ opacity:1; background:rgba(127,127,127,.18); }

/* a pesquisa: «Autor · Conversa · Data» numa linha, e o excerto com o termo aceso */
.cp-contexto{ flex-wrap:wrap; align-items:baseline; }
.cp-sep{ color:var(--text3,#75757c); }
.cp-conv{ color:var(--text2,#4a4a51); font-size:12.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-contexto .cl-hora{ margin-left:auto; }
.cp-onde{ font-size:11.5px; }

/* saltar para uma mensagem (procura, fixada) deixa-lhe ar por cima; os 44px
   de antes eram para não ficar debaixo do separador de dia, que já não pega
   ao topo (23/09) */
.cm-bloco, .cm-pilha{ scroll-margin-top:12px; scroll-margin-bottom:12px; }

/* a informação: retrato mais pequeno, e por baixo o que a conversa TEM */
.chat-info .ci-retrato{ padding:16px 16px 12px; }
.chat-info .ci-foto .mui-avatar{ width:72px; height:72px; font-size:26px; }
.chat-info .ci-nome{ font-size:18px; }
.chat-info .ci-bloco{
  margin:14px 12px 0; padding-top:12px; border-top:1px solid var(--line,#e8e8ed);
  display:flex; flex-direction:column; gap:2px;
}
.chat-info .ci-bloco-t{ font-size:13px; font-weight:600; color:var(--text3,#75757c); padding:0 12px 6px; }
.chat-info .ci-item{
  display:flex; align-items:flex-start; gap:10px; padding:7px 12px; border-radius:10px;
  border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; text-decoration:none; font:inherit;
}
.chat-info .ci-item:hover{ background:var(--bg3,#f0f0f3); }
.chat-info .ci-item-ico{ flex:none; width:24px; text-align:center; font-size:16px; line-height:20px; }
.chat-info .ci-item-tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-info .ci-item-t{
  font-size:14px; color:var(--text,#1b1b1f); line-height:1.3; word-break:break-word;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.chat-info .ci-item-s{ font-size:12.5px; color:var(--text3,#75757c); }
.chat-info .ci-nota{ padding:2px 12px 0; }

/* o compositor em ecrã inteiro (ponto 15) é, desde 23/09, o mesmo cartão do
   painel dentro da coluna — ver chat-arejado.css, secção 5 */

/* a tira «A responder a» diz também O QUE se responde */
.chat-reply-banner{ padding:7px 10px; gap:8px; }
.chat-reply-banner .crb-tx{ display:flex; flex-direction:column; min-width:0; gap:1px; }
.chat-reply-banner .crb-quem{ font-weight:600; }
.chat-reply-banner .crb-trecho{ color:var(--text2,#4a4a51); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* metadados legíveis: horas, pé da urgência e o botão de confirmar (ponto 15) */
.cm-meta{ font-size:11.5px; }
.cm-hora{ opacity:.85; }
.cm-urg-pe{ font-size:11.5px; padding-top:3px; }
.cm-urg-vi{ font-size:11.5px; line-height:22px; padding:0 11px; }

/* ══ RONDA 2 (18/09) — TEMA ESCURO POR TOKENS, ESTADOS QUE DIZEM A VERDADE ══
   Regra: cor nenhuma nasce aqui — vem de `assets/tokens.css` (claro/escuro e
   as cinco peles) com o fallback do tema claro. O que se acerta neste bloco
   são os sítios onde uma cor do tema claro ainda espreitava no escuro. */
/* a hora de uma mensagem RECEBIDA é texto secundário, não o texto principal
   esbatido — no escuro «f5f5f7 a 85%» era quase tão forte como o corpo */
.cm-bloco:not(.me) .cm-hora{ color:var(--text3,#86868b); opacity:1; }
/* desligado é desligado, em qualquer botão do chat */
.chat-compose button:disabled, .chat-info button:disabled, .chat-vazio-b:disabled{ opacity:.45; cursor:default; }
/* foco visível igual em todo o lado */
.chat-list-row:focus-visible, .cl-menu:focus-visible, .cbb-ico:focus-visible, .ca-acao:focus-visible,
.ci-item:focus-visible, .cu-vi:focus-visible, .cm-urg-vi:focus-visible{ outline:2px solid var(--cyan,#0071e3); outline-offset:1px; }

/* ── a informação: no compacto o «Voltar» chega; em duas colunas chega o × ── */
body:not(.chat-2col) .chat-info .ci-x{ display:none; }

/* ── a fixada vê-se na lista ── */
.cl-pin{ flex:none; font-size:10px; opacity:.75; }

/* ── estados: erro, cópia antiga, a procurar ── */
.chat-vazio.is-erro .chat-vazio-fig{
  color:var(--red,#d70015); background:var(--red-bg,#fdf1f1); border-radius:50%;
  width:44px; height:44px; display:inline-grid; place-items:center; font-weight:700; font-size:22px; opacity:1;
}
.chat-aviso-cache{
  margin:6px 10px 2px; padding:7px 10px; border-radius:10px; font-size:12px; line-height:1.35;
  background:var(--gold-bg,#fdf6ec); color:var(--gold,#b25a00); border:1px solid var(--gold-bd,#efd3a3);
}
.chat-aviso-cache button{
  border:0; background:transparent; color:inherit; font:inherit; font-weight:600; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; padding:0 2px;
}
.cd-estado{ padding:10px 4px; }
.cd-estado.is-erro{ color:var(--red,#d70015); }
.cd-retry{
  border:0; background:transparent; color:var(--cyan,#0071e3); font:inherit; font-weight:600;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:0 2px;
}

/* ── a LÁPIDE (ronda 2, ponto 11): no lugar cronológico, legível, secundária ──
   O «border:0» da bolha (17/09) apagava o tracejado que distinguia uma
   apagada de uma bolha normal — ficava um retângulo cinzento com «Mensagem
   apagada» a direito. Volta o tracejado (a pista de FORMA para quem não vê a
   cor), o texto em itálico e sem fundo de bolha: uma lápide não é uma fala. */
.cm-bloco .chat-message.is-apagada,
.cm-bloco.me .chat-message.is-apagada{
  background:transparent; border:1px dashed var(--line2,#d2d2d7); box-shadow:none;
  color:var(--text3,#86868b);
}
.cm-bloco .chat-message.is-apagada .cm-lapide{ font-style:italic; color:var(--text3,#86868b); }
.cm-bloco .chat-message.is-apagada .cm-hora,
.cm-bloco.me .chat-message.is-apagada .cm-hora{ color:var(--text3,#86868b); opacity:1; }

/* ── o anexo que falhou a subir tem «Tentar outra vez» ao lado do × ── */
.chat-anexo-item .ca-repetir{
  flex:none; border:1px solid var(--red,#d70015); color:var(--red,#d70015); background:transparent;
  border-radius:999px; padding:0 9px; font:inherit; font-size:11px; font-weight:600; line-height:20px; cursor:pointer;
}
.chat-anexo-item .ca-repetir:hover{ background:var(--red-bg,#fdf1f1); }

/* ── o histórico por páginas: a linha do topo ── */
.cm-antigas{ display:flex; justify-content:center; padding:8px 0 10px; font-size:12px; color:var(--text3,#86868b); }
.cm-antigas button{
  border:1px solid var(--line2,#d2d2d7); background:var(--bg1,#fff); color:var(--text2,#515154);
  border-radius:999px; padding:4px 12px; font:inherit; font-size:12px; cursor:pointer;
}
.cm-antigas button:hover{ background:var(--bg3,#f0f0f3); }
.chat-info .ci-ver-todos{ font-size:13px; color:var(--cyan,#0071e3); padding:8px 12px; }

/* ── «a escrever…» na linha da lista: a cor do acento, em itálico, no lugar da prévia ── */
.cl-prev.is-a-escrever{ color:var(--cyan,#0071e3); font-style:italic; font-weight:500; }

/* ── GRUPOS COM PERMISSÕES (Objetivo 2, 21/09) ── */
.chat-info .ci-membro-sub.is-dono{ color:var(--cyan,#0071e3); font-weight:600; }
.chat-so-admins{
  margin:8px 12px 10px; padding:10px 12px; border-radius:12px; text-align:center;
  background:var(--bg2,#fbfbfd); border:1px dashed var(--line2,#d2d2d7);
  color:var(--text2,#515154); font-size:13px;
}
.chat-compose[hidden]{ display:none; }

/* ── o «?» de ajuda do shell não tapa o ENVIAR (crítica visual de 23/09) ──
   No telemóvel o `.help-fab` vive em baixo à direita (styles.css, @media
   max-width:920px) — o sítio exato do botão de enviar, com o painel a ocupar o
   ecrã. É a mesma decisão da styles.css para o ecrã inteiro de secretária
   (`.chat-w-inteira .help-fab{display:none}`): dentro de uma conversa a página
   que o «?» ajudaria não está à vista. Na LISTA de conversas o «?» continua. */
@media (max-width: 920px){
  body.rp-open:has(#chatPane:not([hidden]) #chatConvView:not([hidden])) .help-fab{ display:none; }
  /* …e os AVISOS também não tapam a caixa de escrever (QA de 23/09): no
     telemóvel assentavam por cima dela durante 6 s («Marcada como urgente»,
     «Receção confirmada»). Dentro de uma conversa sobem para debaixo do
     cabeçalho — tapam mensagens, que rolam, e não o sítio onde se escreve. */
  body.rp-open:has(#chatPane:not([hidden]) #chatConvView:not([hidden])) .toast-stack{
    bottom:auto; top:calc(var(--h-topbar, 56px) + 64px);
  }
}
/* ── o que o painel do shell mostra, com o chat (crítica de 23/09) ──
   · no telemóvel o painel já ocupa o ecrã inteiro: o pin fixava nada;
   · o `#rpHeadMod` é do shell mas só o chat lhe escreve, e ao passar para as
     Notificações ou as Tarefas as ações do chat ficavam no cabeçalho delas.
     `visibility` e não `display`: o vão continua a empurrar o pin e o ✕. */
@media (max-width: 920px){
  #rightPanel #rpPinBtn{ display:none; }
}
#rightPanel:has(> #chatPane[hidden]) #rpHeadMod{ visibility:hidden; }
#rightPanel:has(> #chatPane[hidden]) .rp-actions::before{ content:none; }