/* ═══════════════════════════════════════════════════════════════════════════
CHAT — a pele de PRODUTO (v3, 23/09/2026: «parece algo ainda muito fraco
visualmente, quero algo mais perto de produto final»).
É uma CAMADA por cima do chat.css, carregada a seguir a ele: sobrepõe só o
que muda o aspeto. A v2 (22/09, revisão do Diogo em 25 pontos) puxou o chat
para dentro do SysCore; a v3 sai de uma crítica feita a 30 capturas reais
(painel, ecrã inteiro a 1440 e 1920, escuro e telemóvel) e dá-lhe SISTEMA:
· TRÊS SUPERFÍCIES e uma ordem: a MOLDURA (lista, cabeçalhos,
Informação) › o CHÃO da conversa › os CARTÕES (bolhas, caixa de
escrever, popovers). Cada uma com o seu token e um degrau que se vê
nos dois temas — no escuro eram bandas de cinzento sem ordem;
· a COR é só sinal: azul para o que é meu ou está ativo (a bolha enviada
tem um par próprio, que no escuro é azul-noite com tinta clara — era
azul-vivo com letra quase preta), vermelho só para quem espera por ti,
verde só para presença e «tudo em dia»; as pessoas distinguem-se por
seis tons fixos por login;
· UM cabeçalho por vista, de 52px (`--chat-cab-h`), e no ecrã inteiro
um por coluna, todos à mesma altura;
· UMA escala de raios (6 · 8 · 12 · 14) e UMA de tipografia (11 · 12 ·
14 · 15 · 17; nomes a 500, por ler a 700), com um terceiro cinzento
que passa AA (`--chat-tinta-3`);
· UM conjunto de ícones SVG (chat.js, `ico()`) em botões de 32×32.
Ficam as decisões do Diogo: o separador de dia é SÓ a barra divisória
(sem faixa, e já não preso ao topo — era isso que o carimbava por cima
das bolhas), a meta vai na linha de baixo, os balões são uniformes.
Regras da casa: cor SEMPRE por token (o hex é só o recurso dentro do
var(), ou a definição de um token), por isso o escuro vem pelos tokens;
nada de !important — a especificidade ganha-se com o #id do sítio.
═══════════════════════════════════════════════════════════════════════════ */
/* ── a escala, uma vez ───────────────────────────────────────────────────────
superfícies: moldura › chão › cartão; azul só do que é meu ou ativo;
vermelho só da urgência */
body{
--chat-moldura: var(--bg1, #ffffff); /* lista, cabeçalhos, Informação */
--chat-chao: var(--bg2, #f6f6f7); /* o fundo da conversa: quase branco */
--chat-cartao: var(--bg1, #ffffff); /* caixa de escrever, popovers, chips */
--chat-bolha: var(--bg3, #f0f0f3); /* recebidas */
--chat-hover: var(--bg3, #f0f0f3);
--chat-sel: var(--cyan-soft, #eef5fd); /* conversa aberta, botão ativo */
--chat-minha: var(--cyan, #0071e3); /* a bolha enviada — superfície de leitura */
--chat-minha-tinta: var(--on-accent, #ffffff);
--chat-minha-meta: var(--chat-minha-tinta); /* no claro o azul já está no limite: sem esbater */
--chat-tinta: var(--text, #1d1d1f);
--chat-tinta-2: var(--text2, #515154);
/* o 3.º degrau que passa AA (≈5,5:1 na moldura, 4,8:1 na bolha): o --text3
fica só para o placeholder e para o que está desligado */
--chat-tinta-3: color-mix(in srgb, var(--text2, #515154) 55%, var(--text3, #86868b));
--chat-veu: rgba(0, 0, 0, .45);
--chat-av-1: var(--teal, #0a8f86);
--chat-av-2: var(--purple, #8944ab);
--chat-av-3: var(--gold, #b25a00);
/* (29/09, revisão visual) era rosa (#c2185b), a poucos graus do vermelho da
urgência — e o nome de quem escreve num grupo saía quase a vermelho */
/* (06/10) o oliva passou a LIMA e o cinzento a ÍNDIGO: oliva, dourado e
cinzento liam-se como três tons terrosos iguais, e o cinzento parecia
«sem estado». Nenhum é azul nem vermelho (o índigo puxa ao violeta); a
inicial lê-se pelo color-mix com a tinta (≥4,8:1 nos dois temas, medido). */
--chat-av-4: #4d7c0f;
--chat-av-5: var(--green, #1d8a45);
--chat-av-6: #5a4fcf;
--chat-av-tinta: 20%; /* 06/10: era 14% — na lista os rostos liam-se desmaiados */
--chat-sombra: 0 4px 18px rgba(20, 40, 80, .08);
--chat-sombra-leve: 0 1px 2px rgba(0, 0, 0, .05);
--chat-r-s: 6px; /* elementos pequenos */
--chat-r-m: 8px; /* inputs, cartões, linhas, botões de ícone */
--chat-r-bolha: 12px;
--chat-r-modal: 14px;
--chat-raio-cartao: var(--chat-r-m); /* nomes da v1 que outras folhas ainda leem */
--chat-raio-bolha: var(--chat-r-bolha);
--chat-fs-nome: 14px;
--chat-fs-msg: 14px;
--chat-fs-previa: 12px;
--chat-fs-hora: 11px;
--chat-fs-rotulo: 11px; /* era 10.5: abaixo do mínimo legível da casa */
--chat-fs-titulo: 15px; /* o nome no cabeçalho da conversa */
--chat-fs-retrato: 17px; /* o nome na Informação e no início da conversa */
--chat-cab-h: 52px; /* a altura de TODOS os cabeçalhos */
--chat-lista-w: clamp(340px, 21vw, 400px); /* 1440 → 340 · 1920 → 400 */
--chat-col: clamp(800px, 75%, 980px); /* a coluna de leitura, em % da conversa */
--chat-info-w: clamp(300px, 19vw, 360px);
--chat-barra: 10px; /* a barra de scroll das mensagens (scrollbar-width: thin, chat.css) */
/* O branco de cima de um VÉU ESCURO. Não é o `--on-accent`: esse é «a cor
que se lê sobre o azul da casa» e inverte-se com o tema, enquanto o véu
(rgba preto) é o mesmo nos dois. No escuro, o `--on-accent` ficava quase
preto e o rótulo «Abrir» sobre uma foto desaparecia. Um véu preto pede
sempre texto claro. */
--chat-sobre-veu: #ffffff;
/* o chão de um VÍDEO sem capa e do visor de vídeo: escuro nos dois temas,
como o ecrã de um leitor (28/09) */
--chat-video-chao: #18181b;
}
:root[data-theme="dark"] body{
--chat-moldura: var(--bg1, #1d1d20);
--chat-chao: var(--bg, #141416); /* um degrau abaixo da moldura: era a cor exata da lista */
--chat-cartao: var(--bg2, #212124);
--chat-bolha: var(--bg3, #28282c);
--chat-hover: var(--bg3, #28282c);
--chat-minha: color-mix(in srgb, var(--cyan, #0a84ff) 40%, var(--bg1, #1d1d20));
--chat-minha-tinta: var(--text, #f5f5f7);
--chat-minha-meta: color-mix(in srgb, var(--chat-minha-tinta) 86%, var(--chat-minha));
/* a lima e o índigo não são tokens do shell (os outros quatro tons têm versão
escura em tokens.css): sem estas linhas ficava o do claro, e a inicial e o
nome de quem escreve num grupo quase desapareciam no fundo escuro */
--chat-av-4: #9bd35a; /* lima (06/10) — no escuro, mais clara */
--chat-av-6: #a5a3ff; /* índigo (06/10) */
--chat-av-tinta: 22%;
--chat-sombra: 0 4px 18px rgba(0, 0, 0, .35);
--chat-sombra-leve: 0 1px 2px rgba(0, 0, 0, .3);
}
/* ── as PESSOAS: seis tons fixos por login (chat.js, `_tomDoAvatar`) ──────────
Eram dez discos azuis iguais a competir com as enviadas. O avatar passa a
fundo tingido com a inicial na cor; a foto, quando existe, tapa tudo. */
.ch-tom-1{ --av: var(--chat-av-1); }
.ch-tom-2{ --av: var(--chat-av-2); }
.ch-tom-3{ --av: var(--chat-av-3); }
.ch-tom-4{ --av: var(--chat-av-4); }
.ch-tom-5{ --av: var(--chat-av-5); }
.ch-tom-6{ --av: var(--chat-av-6); }
#chatPane .mui-avatar[class*=" ch-tom-"],
#muiSheet .mui-avatar[class*=" ch-tom-"]{
background: color-mix(in srgb, var(--av) var(--chat-av-tinta), var(--chat-moldura));
/* a inicial é o tom puxado à tinta (como o nome de quem escreve num grupo):
com o fundo a 20% o tom puro descia abaixo de 4,5:1 no teal e no verde */
color: color-mix(in srgb, var(--av) 70%, var(--chat-tinta));
font-weight: 650;
}
/* ── os BOTÕES DE ÍCONE: um só, nas três barras e no compositor ──────────────
32×32, raio 8; repouso em tinta-2, hover no cinzento de passagem, ativo em
acento suave. O ✚ é o mesmo quadrado ativo — o disco azul cheio trocava de
estado com a conversa aberta. O único azul cheio do ecrã é o Enviar. */
:is(#rpHeadMod, #chatAcoes) .cl-ico,
#chatBackBar :is(.cbb-ico, .chat-back-btn),
#chatConvView .chat-ac-ico{
width: 32px; min-width: 32px; height: 32px;
padding: 0;
display: inline-grid; place-items: center;
border: 0;
border-radius: var(--chat-r-m);
background: transparent;
box-shadow: none;
color: var(--chat-tinta-2);
}
:is(#rpHeadMod, #chatAcoes) .cl-ico:hover,
#chatBackBar :is(.cbb-ico, .chat-back-btn):hover,
#chatConvView .chat-ac-ico:hover{ background: var(--chat-hover); color: var(--chat-tinta); }
:is(#rpHeadMod, #chatAcoes) .cl-ico.on,
#chatBackBar .cbb-ico.on,
#chatConvView .chat-ac-ico.on{ background: var(--chat-sel); color: var(--cyan, #0071e3); }
/* o ✚ «Nova» é a ação principal da barra: azul no ÍCONE, sem o quadrado — com o
quadrado lia-se igual a um botão LIGADO (a procura aberta, a largura) */
:is(#rpHeadMod, #chatAcoes) .cl-ico.forte{ background: transparent; color: var(--cyan, #0071e3); }
:is(#rpHeadMod, #chatAcoes) .cl-ico.forte:hover{ background: var(--chat-sel); }
/* o ⚡ é a PORTA da vista das urgentes: cinzento como os outros ícones. Fica
vermelho, com o número, só quando há alguém à minha espera e a secção
«Precisa de ti» não está à vista (procura, arquivadas) — 23/09 */
:is(#rpHeadMod, #chatAcoes) .cl-ico.urg{ position: relative; color: var(--chat-tinta-2); }
:is(#rpHeadMod, #chatAcoes) .cl-ico.urg.is-alerta{ color: var(--red, #d70015); }
:is(#rpHeadMod, #chatAcoes) .cl-ico.urg:hover{ background: var(--chat-hover); color: var(--chat-tinta); }
:is(#rpHeadMod, #chatAcoes) .cl-ico.urg.is-alerta:hover{ background: var(--red-bg, #fdf1f1); color: var(--red, #d70015); }
:is(#rpHeadMod, #chatAcoes) .cl-ico.urg{ width: auto; padding: 0 6px; gap: 3px; grid-auto-flow: column; }
:is(#rpHeadMod, #chatAcoes) .cl-ico.urg .cl-ico-n{ position: static; border: 0; }
:is(#rpHeadMod, #chatAcoes) .cl-ico-n{
/* no canto e com um aro da cor da barra: por cima do raio, vermelho sobre
vermelho, os dois liam-se como uma mancha só */
position: absolute; top: -3px; right: -4px;
min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
border: 2px solid var(--chat-moldura);
border-radius: 999px;
background: var(--red, #d70015); color: var(--on-estado, #ffffff);
font-size: 10px; font-weight: 700; line-height: 12px;
}
:is(#rpHeadMod, #chatAcoes) .cl-sep,
#chatBackBar .cbb-sep{ flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--line2, #d2d2d7); }
:is(.cl-ico, .cbb-ico, .chat-back-btn, .chat-ac-ico) svg{ display: block; }
/* o FOCO volta a ver-se: o shell desenha-o com box-shadow no :focus-visible, e a
regra de cima zera o box-shadow com o peso de um #id — quem navega por Tab
deixava de saber onde estava. Aqui é um contorno, que não luta com ninguém. */
:is(#rpHeadMod, #chatAcoes) .cl-ico:focus-visible,
#chatBackBar :is(.cbb-ico, .chat-back-btn, .cbb-id, .cu-ir):focus-visible,
#chatConvView :is(.chat-ac-ico, .chat-enviar):focus-visible,
#chatList .chat-procura .cp-x:focus-visible,
#muiSheet :is(.cn-x, .chat-novo-grupo):focus-visible,
.chat-info :is(.ci-rapidas button, .ci-voltar, .ci-x):focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; }
:is(#rpHeadMod, #chatAcoes) .cl-titulo-ico{ display: inline-grid; margin-right: 4px; color: var(--chat-tinta-2); vertical-align: -2px; }
/* o ← da vista das urgentes vem antes do título */
:is(#rpHeadMod, #chatAcoes) .cl-voltar{ margin-right: 2px; }
/* ── 1 · LISTA: separadores recuados, hierarquia por peso ──────────────────── */
#chatListView{ background: var(--chat-moldura); }
#chatList .chat-list-row{
margin: 0;
padding: 9px 12px 9px 10px; /* 06/10: avatar a 40 — 10 + 40 + 8 = os mesmos 58px do separador */
gap: 8px;
background: transparent;
border-radius: 0;
box-shadow: none;
border-bottom: 0;
}
/* o separador começa DEPOIS do avatar, como no Telegram e no WhatsApp: os
«separadores subtis» da v2 sem o ar de folha de cálculo */
#chatList .chat-list-row::after{
content: ''; position: absolute; left: 58px; right: 0; bottom: 0;
height: 1px; background: var(--line, #ececec); pointer-events: none;
}
#chatList .chat-list-row:is(:hover, .is-aberta)::after,
#chatList .chat-list-row:has(+ .chat-list-row:is(:hover, .is-aberta))::after{ background: transparent; }
#chatList .chat-list-row:hover{ background: var(--chat-hover); box-shadow: none; }
/* a aberta: acento suave, SEM contorno azul (ponto 3 da v2) — o cinzento de
antes era quase o do hover, e com o rato em cima não se distinguiam */
#chatList .chat-list-row.is-aberta,
#chatList .chat-list-row.is-aberta:hover{ background: var(--chat-sel); box-shadow: none; }
#chatList .chat-list-row.is-aberta .cl-nome{ color: var(--chat-tinta); }
#chatList .chat-list-row.nao-lida{ box-shadow: none; }
#chatList .cl-nome{ font-size: var(--chat-fs-nome); font-weight: 500; color: var(--chat-tinta); }
#chatList .chat-list-row.nao-lida .cl-nome{ font-weight: 700; }
/* regra do Telmo (25/07): numa linha por ler, cor de destaque OU negrito —
o negrito é do nome, a hora muda de cor e NÃO engrossa */
#chatList .chat-list-row.nao-lida .cl-hora{ color: var(--cyan, #0071e3); }
#chatList .cl-prev{ font-size: var(--chat-fs-previa); color: var(--chat-tinta-2); }
#chatList .chat-list-row.nao-lida .cl-prev{ color: var(--chat-tinta); }
#chatList .cl-hora{ font-size: var(--chat-fs-hora); color: var(--chat-tinta-3); font-variant-numeric: tabular-nums; }
#chatList .cl-hora::first-letter{ text-transform: uppercase; } /* «Sex» ao lado de «Ontem» — o _diaMes traduz pelas minúsculas */
#chatList .cl-av .mui-avatar, #chatList .cl-fich{ width: 40px; height: 40px; font-size: 14px; font-weight: 700; }
/* um GRUPO não é uma pessoa: avatar quadrado arredondado, e é isso que o
distingue — o «# » do nome saiu */
#chatList :is(.chat-list-row, .chat-urg-row).tipo-grupo .cl-av .mui-avatar{ border-radius: var(--chat-r-m); }
#chatList .cl-n{ min-width: 18px; height: 18px; font-size: var(--chat-fs-hora); padding: 0 5px; }
#chatList .cl-n.is-ponto{ min-width: 10px; width: 10px; height: 10px; padding: 0; font-size: 0; }
#chatList :is(.cl-pin, .cl-mudo){ flex: none; display: inline-grid; place-items: center; color: var(--chat-tinta-3); opacity: 1; }
#chatList .cl-prev-ico{ display: inline-block; vertical-align: -2px; margin-right: 3px; color: var(--chat-tinta-3); }
#chatList .cl-prev-ico svg{ display: inline-block; }
#chatList .cl-prev-apagada{ font-style: italic; color: var(--chat-tinta-3); } /* 06/10: uma apagada não compete com as mensagens */
/* a menção é minha e é azul: o vermelho é só da urgência */
#chatList .cl-arroba{ color: var(--cyan, #0071e3); font-weight: 700; }
/* na lista diz-se só quem ESTÁ; o «visto há…» continua no cabeçalho */
#chatList .cl-av .status-dot.status-offline{ display: none; }
#chatList .cl-av .status-dot{ width: 9px; height: 9px; border-color: var(--chat-moldura); }
#chatList .chat-list-row:hover .cl-av .status-dot{ border-color: var(--chat-hover); }
#chatList .chat-list-row.is-aberta .cl-av .status-dot{ border-color: var(--chat-sel); }
#chatList .chat-sec{
background: var(--chat-moldura);
padding: 14px 12px 6px;
font-size: var(--chat-fs-previa);
/* 06/10: «Fixadas»/«Recentes» na letra normal a 600 — as maiúsculas espaçadas a
11px liam-se como rodapé, e é o mesmo cabeçalho do resto do SysCore */
font-weight: 600;
text-transform: none;
letter-spacing: 0;
color: var(--chat-tinta-2);
}
/* «Precisa de ti» tem a letra das outras secções, um tom acima; o vermelho
fica só no ⚡ (o número dizia o mesmo que o ⚡ do cabeçalho, a 50px) */
#chatList .chat-sec.urg{ color: var(--chat-tinta-2); }
#chatList .chat-sec .cs-n{ color: var(--chat-tinta-3); }
/* as CONFIRMADAS da vista das urgentes dobram-se: o título é um botão */
#chatList .chat-sec-dobra{
display: flex; align-items: center; gap: 6px; width: 100%;
border: 0; background: var(--chat-moldura); text-align: left; cursor: pointer; /* é sticky como as outras: transparente, lia-se o que passava por baixo */
font-family: inherit;
}
#chatList .chat-sec-dobra:hover{ color: var(--chat-tinta); }
#chatList .chat-sec-dobra .cs-n{ margin-left: 0; }
#chatList .chat-sec-dobra .cs-seta{ display: inline-grid; margin-left: auto; transition: transform .15s ease; }
#chatList .chat-sec-dobra[aria-expanded="false"] .cs-seta{ transform: rotate(-90deg); }
#chatList .chat-sec-dobra:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: -2px; }
/* «✓ Tudo em dia» é um ESTADO no cabeçalho «Recentes», à direita — era uma
faixa de 37px centrada antes da primeira conversa (ponto 23) */
#chatList .chat-tratado{
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 4px;
margin-left: auto;
padding: 0;
border: 0;
text-transform: none;
letter-spacing: 0;
}
#chatList .chat-tratado .ct-fig{ display: inline-grid; width: auto; height: auto; margin: 0; background: none; color: var(--green, #1d8a45); }
#chatList .chat-tratado .ct-t{ font-size: var(--chat-fs-hora); font-weight: 500; color: var(--chat-tinta-3); }
#chatList .chat-load-more{
border-radius: var(--chat-r-m);
background: transparent;
box-shadow: none;
/* 06/10: uma ligação centrada, não um botão com caixa a toda a largura */
border-color: transparent;
color: var(--cyan, #0071e3);
font-weight: 600;
}
#chatList .chat-load-more:hover{ background: var(--chat-hover); }
/* o ⋮ ocupa o lugar da HORA (fila 1) em vez de a tapar a meio das duas filas;
por Tab chega-se a ele (:focus-visible) — e o foco que vem de um CLIQUE não o
mostra: o _pintarLista devolve o foco à linha a cada volta da lista, e a
aberta ficava com o ⋮ no lugar da hora. O `display:none` do chat.css fica. */
#chatList .chat-list-row .cl-menu{
top: 6px; right: 8px; transform: none;
width: 24px; height: 22px; padding: 0;
place-items: center;
border-radius: var(--chat-r-s);
background: transparent; box-shadow: none;
color: var(--chat-tinta-2);
}
#chatList .chat-list-row:is(:hover, :focus-visible, :has(:focus-visible)) .cl-menu{ display: grid; }
#chatList .chat-list-row .cl-menu:hover{ background: var(--bg4, #e4e4e9); color: var(--chat-tinta); }
/* só onde HÁ ⋮: nos resultados da procura não há, e o hover apagava a data */
#chatList .chat-list-row:has(> .cl-menu):is(:hover, :focus-visible, :has(:focus-visible)) .cl-l1 .cl-hora{ visibility: hidden; }
/* as minhas à espera de resposta: no FIM da lista, com o relógio. Deixou de
ficar presa ao fundo (23/09): no telemóvel tapava a última conversa e o «?» */
#chatList .chat-minhas{ border-top: 1px solid var(--line, #ececec); background: transparent; }
#chatList .chat-minhas .cm-pin{ display: inline-grid; color: var(--chat-tinta-3); }
#chatList .chat-minhas .cm-rot{ font-weight: 500; color: var(--chat-tinta-2); }
@media (max-width: 920px){ #chatList{ padding-bottom: 64px; } } /* a folga do «?» de ajuda */
/* a conversa com uma urgência para mim fica na lista, com um ⚡ discreto (o
vermelho está na mensagem, na secção de cima) */
#chatList .cl-urg{ display: inline-grid; flex: none; color: var(--chat-tinta-2); }
/* ── 4 · URGENTES: linhas como as de conversa, sem risco nem cartão ──────── */
/* (23/09) O risco vermelho à esquerda, o botão cheio e o título vermelho eram
três marcas para a mesma coisa. Fica UMA: o botão, tonal, igual ao do pé. */
#chatList .chat-urg-row{
margin: 0;
padding: 8px 12px;
background: transparent;
border-radius: 0;
border-bottom: 1px solid var(--line, #ececec);
box-shadow: none;
}
#chatList .chat-urg-row.is-minha{ opacity: 1; }
#chatList .chat-urg-row.is-aberta{ background: var(--chat-sel); box-shadow: none; }
#chatList .chat-urg-row:hover{ background: var(--chat-hover); }
#chatList .chat-urg-row.is-aberta:hover{ background: var(--chat-sel); }
/* a urgência PARA MIM é um .chat-urg-item: a linha (role=button) e, como
IRMÃO dela, o botão — o traço, o fundo e o hover são do conjunto */
#chatList .chat-urg-item{ border-bottom: 1px solid var(--line, #ececec); }
#chatList .chat-urg-item:hover{ background: var(--chat-hover); }
#chatList .chat-urg-item.is-aberta{ background: var(--chat-sel); }
#chatList .chat-urg-item > .chat-urg-row,
#chatList .chat-urg-item > .chat-urg-row:hover,
#chatList .chat-urg-item > .chat-urg-row.is-aberta{ border-bottom: 0; background: transparent; padding-bottom: 2px; }
/* o botão alinha com a coluna do texto: o padding da linha, o avatar e o intervalo */
#chatList .cu-pe-fora{ margin: 0; padding: 4px 12px 8px calc(12px + var(--chat-av-lista, 36px) + 11px); }
#chatList .chat-urg-row:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: -2px; }
#chatList .chat-urg-row .cl-l1{ min-width: 0; }
#chatList .chat-urg-row .cl-nome{ flex: 0 1 auto; min-width: 0; }
#chatList .chat-urg-row .cl-hora{ margin-left: auto; flex: none; }
#chatList .cu-grupo{
flex: 0 1 auto; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size: var(--chat-fs-previa); color: var(--chat-tinta-2);
}
#chatList .cu-grupo .cu-seta{ margin: 0 4px 0 -2px; color: var(--chat-tinta-3); }
/* a prévia a DUAS linhas: uma urgência de 500 caracteres ocupava o painel */
#chatList .cu-msg{
font-size: var(--chat-fs-msg);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#chatList .cu-msg .cl-prev-ico{ display: inline-grid; vertical-align: -2px; margin-right: 3px; color: var(--chat-tinta-3); }
#chatList .cu-pe{ font-size: var(--chat-fs-previa); margin-top: 6px; min-width: 0; }
/* a linha do estado das MINHAS corre como uma FRASE («À espera de Diogo
Soares, Francisco Nextview · expira em 23 horas»): partia em duas colunas,
e cortada com reticências escondia justamente quem falta */
#chatList .chat-urg-row.is-minha .cu-pe{ display: block; white-space: normal; }
#chatList .cu-onde{ font-size: var(--chat-fs-hora); color: var(--chat-tinta-3); }
#chatList .cu-falta{ margin-left: 4px; font-size: var(--chat-fs-hora); color: var(--chat-tinta-3); white-space: nowrap; }
/* a nota da vista das urgentes, no topo: sem o traço e a margem de quando
vivia no fundo, e na tinta que passa AA (o --text3 dava 3,6:1) */
#chatList .chat-urg-nota{ margin: 0; border-top: 0; padding: 12px 12px 4px; font-size: var(--chat-fs-previa); color: var(--chat-tinta-3); }
/* expirou sem toda a gente: é o desfecho que ainda pede alguma coisa ao autor
(insistir) — um tom acima, nunca vermelho */
#chatList .chat-urg-row.is-expirada .cu-onde{ color: var(--chat-tinta-2); }
/* O BOTÃO DE CONFIRMAR — um só desenho na lista, na vista e no pé (eram um
cheio e um contornado para o mesmo gesto). Tonal: no escuro os tokens
--red-* do tema fazem o resto (o cheio ficava a superfície mais clara). */
:is(#chatList .cu-vi, #chatMessages .cm-urg-vi){
display: inline-flex; align-items: center; justify-content: center;
min-height: 28px; padding: 0 12px;
border: 1px solid var(--red-bd, #f3b8bc); border-radius: var(--chat-r-s);
background: var(--red-bg, #fdf1f1); color: var(--red, #d70015);
font: inherit; font-size: var(--chat-fs-previa); font-weight: 600; line-height: 1;
white-space: nowrap; cursor: pointer;
}
:is(#chatList .cu-vi, #chatMessages .cm-urg-vi):hover{ border-color: var(--red, #d70015); background: var(--red-bg, #fdf1f1); color: var(--red, #d70015); }
:is(#chatList .cu-vi, #chatMessages .cm-urg-vi):disabled{ cursor: default; border-color: var(--line2, #d2d2d7); background: transparent; color: var(--chat-tinta-3); }
:is(#chatList .cu-vi, #chatMessages .cm-urg-vi):focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; }
@media (pointer: coarse){ :is(#chatList .cu-vi, #chatMessages .cm-urg-vi){ min-height: 44px; padding: 0 16px; } }
#chatList .cp-onde-bateu{ font-size: var(--chat-fs-hora); color: var(--chat-tinta-3); }
/* ── procura: resultados alinhados com a lista, filtros numa fila ────────── */
#chatList .chat-procura{ margin: 8px 10px; padding: 6px 10px; border-radius: var(--chat-r-m); }
/* o foco é da PÍLULA inteira: a regra global do shell pintava um retângulo
azul no DENTRO da caixa redonda */
#chatList .chat-procura input:focus-visible{ box-shadow: none; }
#chatList .chat-procura:focus-within{
border-color: var(--cyan, #0071e3);
background: var(--chat-cartao);
box-shadow: 0 0 0 3px var(--ring, rgba(0, 113, 227, .14));
}
#chatList .chat-procura .cp-lupa{ display: inline-grid; color: var(--chat-tinta-3); }
#chatList .chat-procura .cp-x{ display: inline-grid; place-items: center; }
/* numa linha SÓ: a 340px o «Sempre ▾» saltava sozinho para uma segunda linha
(28px a mais antes dos resultados); se ainda assim não couber, rola */
#chatList .cp-filtros{ padding: 6px 12px; gap: 3px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#chatList .cp-chip{ flex: none; padding: 2px 6px; font-size: var(--chat-fs-hora); }
#chatList .cp-periodo{
flex: none;
padding: 2px 5px;
border: 1px solid var(--line, #ececec);
border-radius: 999px;
background: var(--bg3, #f0f0f3);
color: var(--chat-tinta-2);
font-size: var(--chat-fs-hora);
}
#chatList .chat-list-row.cp-msg{ padding: 7px 12px; align-items: flex-start; }
#chatList .cp-msg .cl-av .mui-avatar{ width: 36px; height: 36px; font-size: 13px; }
#chatList .cp-contexto{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
#chatList .cp-contexto .cl-nome{ flex: none; max-width: 100%; }
#chatList .cp-contexto :is(.cp-sep, .cp-conv, .cl-hora){
font-size: var(--chat-fs-hora);
color: var(--chat-tinta-3);
}
#chatList .cp-contexto .cl-hora{ margin-left: auto; }
#chatList .cp-excerto{
font-size: var(--chat-fs-previa);
color: var(--chat-tinta-2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* o termo aceso: o --cyan-soft sobre branco era 1,10:1 — não se via */
#chatList .cp-mark{ background: var(--sel, rgba(0, 113, 227, .16)); color: inherit; border-radius: var(--chat-r-s); padding: 0 2px; font-weight: 600; }
/* ── 2 · CONVERSA: um cabeçalho de 52px, chão neutro ─────────────────────── */
#chatConvView .chat-back-bar{
background: var(--chat-moldura);
border-bottom: 1px solid var(--line, #ececec);
box-shadow: none;
height: var(--chat-cab-h);
min-height: 0;
padding-block: 0;
box-sizing: border-box;
gap: 2px; /* o mesmo das outras barras; com 6 o nome cortava a 400px */
position: relative;
z-index: 2;
}
#chatConvView .chat-back-bar .cbb-id{ margin-right: 4px; }
#chatConvView .cbb-av .mui-avatar{ width: 32px; height: 32px; font-size: 12px; }
/* o grupo é quadrado em TODO o lado — era quadrado na lista e redondo aqui */
#chatConvView .cbb-av.is-grupo .mui-avatar{ border-radius: var(--chat-r-m); }
/* o nome CORTA com reticências e nunca parte a barra em duas linhas: com a
pastilha das urgentes, «Francisco Nextview» dobrava a 400px e a barra
deixava de ter 52px. O `display:block` troca o flex do chat.css (que servia
a bola, hoje no avatar) por uma linha que sabe cortar. */
#chatConvView .cbb-id, #chatConvView .cbb-tx{ min-width: 0; }
#chatConvView .cbb-nome{
display: block;
font-size: var(--chat-fs-titulo); font-weight: 600; letter-spacing: -.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#chatConvView .cbb-presenca{ font-size: var(--chat-fs-previa); color: var(--chat-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* as urgentes são uma PASTILHA na barra (era uma faixa de 37px fora da coluna) */
#chatBackBar .cu-ir{
flex: none;
display: inline-flex; align-items: center; gap: 5px;
height: 26px; padding: 0 10px;
border: 1px solid var(--red-bd, #f3b8bc);
border-radius: 999px;
background: var(--red-bg, #fdf1f1);
color: var(--red, #d70015);
font: inherit; font-size: var(--chat-fs-previa); font-weight: 600;
cursor: pointer;
}
#chatBackBar .cu-ir:hover{ border-color: var(--red, #d70015); }
/* só conta o que precisa de MIM (23/09) — as minhas à espera não entram, e a
pastilha desaparece quando só há essas; o ⚡ do conjunto em vez do ponto,
que no painel se lia igual ao contador das não lidas */
#chatBackBar .cu-ir .cu-ico{ display: inline-grid; margin-right: -1px; }
#chatBackBar .cu-ir .cu-n{ font-variant-numeric: tabular-nums; }
/* o CHÃO é da vista da conversa inteira e não só da caixa das mensagens: a
caixa de escrever assenta nele (no painel ficava uma faixa da cor da moldura
à volta dela, visível no escuro) */
#chatConvView{ background: var(--chat-chao); }
#chatMessages{ background: var(--chat-chao); padding: 12px 14px 10px; }
/* o histórico encosta ao compositor: com poucas mensagens o espaço morto fica
em CIMA, não a separar a última mensagem da caixa de escrever (ponto 1) */
#chatMessages{ display: flex; flex-direction: column; }
#chatMessages > :first-child:not(.chat-vazio){ margin-top: auto; }
/* o estado vazio fica ao CENTRO, não encostado ao compositor */
#chatMessages .chat-vazio.is-escolher{ margin: auto 0; }
/* a tira das FIXADAS: moldura, a escala da casa, pin e ✕ do conjunto */
#chatConvView .chat-fixadas{ background: var(--chat-moldura); border-bottom: 1px solid var(--line, #ececec); }
#chatConvView .chat-fixadas .cf-pin{ display: inline-grid; color: var(--chat-tinta-3); }
#chatConvView .chat-fixadas .cf-t{ font-size: var(--chat-fs-previa); color: var(--chat-tinta); }
#chatConvView .chat-fixadas .cf-s{ font-size: var(--chat-fs-hora); color: var(--chat-tinta-3); }
#chatConvView .chat-fixadas .cf-x{ width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; border-radius: var(--chat-r-m); color: var(--chat-tinta-2); }
#chatConvView .chat-fixadas .cf-x:hover{ background: var(--chat-hover); color: var(--chat-tinta); }
/* o PRINCÍPIO da conversa: quem é e desde onde (chat.js, `_htmlInicio`) */
#chatMessages .cm-inicio{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px 12px; text-align: center; }
#chatMessages .cm-inicio .mui-avatar{ width: 56px; height: 56px; font-size: 20px; }
#chatMessages .cm-inicio-av.is-grupo .mui-avatar{ border-radius: var(--chat-r-bolha); }
#chatMessages .cm-inicio-t{ font-size: var(--chat-fs-retrato); font-weight: 600; color: var(--chat-tinta); }
#chatMessages .cm-inicio-d{ font-size: var(--chat-fs-previa); color: var(--chat-tinta-3); }
/* balões: raio 12, recebidas sem sombra, mínimo de largura para «teste» não
virar um comprimido, meta SEMPRE na linha de baixo (pontos 6, 7, 8) */
#chatMessages .cm-bloco .chat-message,
#chatMessages .cm-bloco.me .chat-message{
border-radius: var(--chat-r-bolha);
padding: 7px 11px 6px;
border: 0;
box-shadow: none;
min-width: 72px;
position: relative;
}
#chatMessages .cm-bloco .chat-message{ background: var(--chat-bolha); }
/* a enviada tem um PAR próprio: no escuro o --on-accent é quase preto (é a
tinta dos BOTÕES azuis) e a bolha lia-se como um botão aceso */
#chatMessages .cm-bloco.me .chat-message{ background: var(--chat-minha); color: var(--chat-minha-tinta); }
/* MENSAGENS SEGUIDAS leem-se como UMA fala (23/09): raio 12 por fora e, do
lado de quem fala, os cantos entre bolhas do mesmo bloco a 6 — como no
Telegram e no Messenger. A v2 punha tudo a 12 («balões uniformes») e seis
frases seguidas liam-se como seis interrupções. Uma sozinha fica redonda. */
#chatMessages .cm-bloco.me:not(.abre) .chat-message{ border-top-right-radius: var(--chat-r-s); }
#chatMessages .cm-bloco.me:not(.fecha) .chat-message{ border-bottom-right-radius: var(--chat-r-s); }
#chatMessages .cm-bloco:not(.me):not(.abre) .chat-message{ border-top-left-radius: var(--chat-r-s); }
#chatMessages .cm-bloco:not(.me):not(.fecha) .chat-message{ border-bottom-left-radius: var(--chat-r-s); }
/* o PÉ da urgência ou as REAÇÕES fecham a fala: são da mensagem de cima, e com
os cantos colados a atravessá-los liam-se como da mensagem de baixo */
#chatMessages .cm-bloco:has(> .cm-pilha > :is(.cm-urg-pe, .chat-reactions)) .chat-message{ border-bottom-left-radius: var(--chat-r-bolha); border-bottom-right-radius: var(--chat-r-bolha); }
#chatMessages .cm-bloco:has(> .cm-pilha > :is(.cm-urg-pe, .chat-reactions)) + .cm-bloco{ margin-top: 10px; }
/* depois de um PÉ a folga é a da pílula de ações (sobe 22px acima da bolha):
com 10px ela assentava em cima do pé de cima e tapava o estado */
#chatMessages .cm-bloco:has(> .cm-pilha > .cm-urg-pe) + .cm-bloco{ margin-top: 26px; }
/* o AVATAR de quem fala num grupo encosta à BOLHA e não ao pé que vem por
baixo dela (ficava ao lado do «Confirmar receção»): sobe a altura do pé —
18px de texto, ou o botão de 28px (44px no toque) — mais os 2px do intervalo */
#chatMessages .cm-bloco:has(> .cm-pilha > .cm-urg-pe) > .cm-av{ margin-bottom: 20px; }
#chatMessages .cm-bloco:has(> .cm-pilha > .cm-urg-pe.is-para-mim) > .cm-av{ margin-bottom: 34px; }
@media (pointer: coarse){ #chatMessages .cm-bloco:has(> .cm-pilha > .cm-urg-pe.is-para-mim) > .cm-av{ margin-bottom: 50px; } }
#chatMessages .cm-bloco:has(> .cm-pilha > :is(.cm-urg-pe, .chat-reactions)) + .cm-bloco .chat-message{ border-top-left-radius: var(--chat-r-bolha); border-top-right-radius: var(--chat-r-bolha); }
#chatMessages .cm-bloco .cm-corpo{ font-size: var(--chat-fs-msg); line-height: 20px; }
#chatMessages .cm-bloco.me .cm-corpo{ color: inherit; }
/* ── OS ESTADOS DA BOLHA VOLTAM A VER-SE ─────────────────────────────────────
O bloco acima zera `border` e `box-shadow` com o peso de um #id, e por isso
derrotava as regras de estado do chat.css, que são só de classes. Repõem-se
aqui, com o mesmo #id. (Auditoria de 22/09.) */
#chatMessages .cm-bloco .chat-message.is-apagada,
#chatMessages .cm-bloco.me .chat-message.is-apagada{
background: transparent;
border: 1px dashed var(--line2, #d2d2d7);
box-shadow: none;
color: var(--text3, #86868b);
}
#chatMessages .cm-bloco .chat-message.is-apagada .cm-corpo,
#chatMessages .cm-bloco.me .chat-message.is-apagada .cm-corpo,
#chatMessages .cm-bloco .chat-message.is-apagada .cm-hora,
#chatMessages .cm-bloco.me .chat-message.is-apagada .cm-hora{ color: var(--text3, #86868b); opacity: 1; }
#chatMessages .cm-bloco .chat-message.is-falhou{ opacity: .75; border: 1px dashed var(--red, #d70015); }
/* (23/09) O risco que ficava FORA da bolha lia-se como um defeito, sobretudo
nas minhas, à direita, e era a quarta marca da mesma mensagem. A urgência
diz-se no PÉ, por baixo — a bolha fica igual às outras. A menção passa a
tinta de fundo. */
#chatMessages .cm-bloco .chat-message:is(.is-urgente, .foi-urgente, .tem-mencao){ box-shadow: none; }
#chatMessages .cm-bloco:not(.me) .chat-message.tem-mencao{ background: color-mix(in srgb, var(--cyan, #0071e3) 12%, var(--chat-bolha)); }
#chatMessages .cm-bloco .chat-message.a-editar{ background: var(--chat-cartao); box-shadow: inset 0 0 0 1px var(--cyan, #0071e3); }
/* a editar uma MINHA o fundo passa a cartão, e a tinta tem de ir com ele: a
da bolha enviada é branca (claro) — ficava branco sobre branco */
#chatMessages .cm-bloco.me .chat-message.a-editar{ color: var(--chat-tinta); }
#chatMessages .cm-bloco.me .chat-message.a-editar :is(.cm-hora, .cm-recibo){ color: var(--chat-tinta-3); }
/* O PÉ DA URGÊNCIA — a regra da cor, escrita no AGENTS.md: o vermelho quer
dizer «alguém espera por ti e ainda não confirmaste» e mais nada. Só o pé
`is-para-mim` é vermelho; o do autor (`is-minha`) é cinzento e diz de quem
está à espera; os desfechos (`is-feita`) são cinzento-claro. Numa linha só
com o botão, também no telemóvel. */
#chatMessages .cm-urg-pe{
flex-wrap: nowrap; gap: 8px; padding-top: 4px;
font-size: var(--chat-fs-hora); font-weight: 500; color: var(--chat-tinta-2);
}
#chatMessages .cm-urg-pe > span{ min-width: 0; }
#chatMessages .cm-urg-pe.is-para-mim{ color: var(--red, #d70015); font-weight: 600; }
#chatMessages .cm-urg-pe.is-feita{ color: var(--chat-tinta-3); font-weight: 500; }
#chatMessages .cm-urg-ico{ display: inline-grid; vertical-align: -1px; margin-right: 3px; color: inherit; }
#chatList .chat-sec .cs-ico{ display: inline-grid; vertical-align: -1px; margin-right: 3px; color: var(--red, #d70015); }
/* a mensagem que está no MENU fica marcada até ele fechar (chat.js) — por
DENTRO da bolha: por fora o contorno pintava-se por cima das vizinhas (28/09) */
#chatMessages .cm-bloco.is-alvo-menu .chat-message{ outline: 2px solid var(--cyan, #0071e3); outline-offset: -2px; }
/* a mensagem ENCONTRADA acende-se na BOLHA (a mesma língua do menu): a animação
pintava o fundo do bloco, que ocupa a coluna toda — uma banda de 824px atrás
de uma bolha de 350 */
#chatMessages .cm-bloco.cm-achada{ animation: none; background: none; }
#chatMessages .cm-bloco.cm-achada .chat-message{ animation: cmAchadaBolha 2.6s ease-out 1; }
@keyframes cmAchadaBolha{
0%, 70%{ box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cyan, #0071e3) 45%, transparent); }
100%{ box-shadow: inset 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce){
#chatMessages .cm-bloco.cm-achada .chat-message{ animation: none; outline: 2px solid var(--cyan, #0071e3); outline-offset: -2px; }
}
#chatMessages .cm-meta,
#chatMessages .cm-bloco:not(.fecha) .cm-meta,
#chatMessages .cm-bloco:not(.fecha) .cm-meta:not(:has(.cm-editada)):not(:has(.cm-estrela)){
float: none;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 4px;
margin: 3px 0 0;
height: auto;
font-size: var(--chat-fs-hora);
line-height: 1;
}
/* A HORA NA LINHA (23/09): a meta assenta em absoluto no canto de baixo, por
cima da réplica invisível que o chat.js põe no fim do texto (`cm-vao-hora`)
— é a réplica que reserva o lugar, por isso não há contas de larguras */
#chatMessages .cm-vao-hora{
display: inline-flex;
align-items: center;
gap: 4px; /* o gap da .cm-meta */
visibility: hidden;
padding-left: 12px; /* o ar entre o texto e a hora */
font-size: var(--chat-fs-hora);
line-height: 1;
white-space: nowrap;
vertical-align: baseline;
font-variant-numeric: tabular-nums; /* a .cm-meta tem-no (chat.css): sem ele «11:38» media 26px contra 32 */
}
/* as mesmas medidas da meta verdadeira, peça a peça (ver `_replicaDaMeta`) */
#chatMessages .cm-vao-hora .cv-recibo{ padding: 0 3px; letter-spacing: -.06em; }
#chatMessages .cm-vao-hora .cv-recibo-vista{ font-weight: 700; }
#chatMessages .cm-bloco .chat-message.hora-na-linha .cm-meta{ position: absolute; right: 11px; bottom: 9px; margin: 0; } /* medido: assim a hora cai EXATAMENTE sobre a réplica (0px de desvio nas 74 bolhas da conversa de teste) */
body:not(.chat-2col) #chatMessages .cm-bloco .chat-message.hora-na-linha .cm-meta{ right: 10px; bottom: 8px; }
/* foto com legenda: a bolha só tem 3px de padding e a legenda leva o resto
(8px dos lados). A meta alinha pelo fim da legenda, sem o padding que tem
quando vai por baixo, e a legenda ganha o ar de baixo que a meta lhe dava.
Os dois seletores porque o do painel lateral (right:10px) ganhava a este e
a hora pisava a última palavra da legenda («dois11:38»). */
#chatMessages .cm-bloco .chat-message.hora-na-linha:has(.chat-anexo-foto) .cm-corpo:not(:empty){ padding-bottom: 6px; }
#chatMessages .cm-bloco .chat-message.hora-na-linha:has(.chat-anexo-foto) .cm-meta,
body:not(.chat-2col) #chatMessages .cm-bloco .chat-message.hora-na-linha:has(.chat-anexo-foto) .cm-meta{ padding: 0; right: 11px; bottom: 12px; }
#chatMessages .cm-bloco:not(.me) .cm-hora{ color: var(--chat-tinta-3); opacity: 1; }
/* «· editada» e ★ à escala da hora — a réplica já as media a 11px e a meta tinha-as a 10 */
#chatMessages .cm-meta :is(.cm-editada, .cm-estrela){ font-size: var(--chat-fs-hora); }
#chatMessages .cm-bloco.me .cm-hora{ color: var(--chat-minha-meta); opacity: 1; }
/* os TRÊS degraus do recibo voltam a ver-se: o `.cm-recibo{ font:inherit;
background:transparent }` do chat.css vinha depois e apagava a pastilha e o
negrito da «vista» — enviada, entregue e vista eram o mesmo ✓✓ */
#chatMessages .cm-meta .cm-recibo{ font-size: var(--chat-fs-hora); padding: 0 3px; border-radius: 999px; letter-spacing: -.06em; }
#chatMessages .cm-bloco.me .cm-meta .cm-recibo{ color: var(--chat-minha-meta); }
#chatMessages .cm-meta .cm-recibo-enviada{ opacity: .6; }
#chatMessages .cm-meta .cm-recibo-entregue{ opacity: 1; font-weight: 400; }
/* (29/09, revisão visual) a pastilha em repouso saiu: desde 28/09 a «vista» é
AZUL, e o negrito das marcas fica como segunda pista — os três degraus
continuam distintos. O tom aparece ao passar o rato ou no foco (é um botão). */
#chatMessages .cm-meta .cm-recibo-vista{ opacity: 1; font-weight: 700; }
/* a FALHADA minha: o «!» e os dois botões assentam num cartão — vermelho e
cinzento sobre o azul da bolha não se liam */
#chatMessages .cm-bloco.me .chat-message .cm-recibo-falhou{ background: var(--chat-cartao); color: var(--red, #d70015); }
#chatMessages .cm-bloco.me .cm-falhou-acoes button{ background: var(--chat-cartao); border-color: var(--chat-cartao); color: var(--red, #d70015); }
#chatMessages .cm-bloco.me .cm-falhou-acoes button.is-descartar{ color: var(--chat-tinta-2); }
#chatMessages .cm-bloco.em-grupo .cm-av .mui-avatar{ width: 28px; height: 28px; font-size: 11px; }
/* o vão onde falta o avatar tem a largura dele: com 26 contra 28, a última
bolha de cada bloco ficava 2px ao lado das de cima */
#chatMessages .cm-bloco.em-grupo .cm-av-vago{ width: 28px; }
#chatMessages .cm-quem{ font-size: var(--chat-fs-previa); }
#chatMessages .cm-quem[class*=" ch-tom-"]{ color: color-mix(in srgb, var(--av) 80%, var(--chat-tinta)); }
#chatMessages .cm-pilha{ gap: 2px; }
/* O DIA: só a barra divisória, de lado a lado (decisão do Diogo). Deixou de
estar preso ao topo — sem faixa por trás, o rótulo carimbava-se por cima
das bolhas, e como todos os dias são irmãos no #chatMessages nenhum se
soltava: empilhavam-se no topo. */
#chatMessages .cm-dia{ position: static; background: none; padding: 14px 0 6px; gap: 10px; pointer-events: none; }
#chatMessages .cm-dia::before, #chatMessages .cm-dia::after{ content: ''; flex: 1 1 0; height: 1px; background: var(--line2, #d2d2d7); }
#chatMessages .cm-dia > *{
background: none;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
font-size: var(--chat-fs-hora);
font-weight: 600;
color: var(--chat-tinta-3);
letter-spacing: .02em;
}
#chatMessages .cm-dia > span::first-letter{ text-transform: uppercase; }
/* «Novas mensagens» no azul, não no vermelho (que é só da urgência), e com a
mesma geometria do dia: só a cor diz qual é qual */
#chatMessages .cm-novas{ color: var(--cyan, #0071e3); font-size: var(--chat-fs-rotulo); font-weight: 700; letter-spacing: .04em; margin: 14px 0 8px; }
#chatMessages .cm-novas::before, #chatMessages .cm-novas::after{ opacity: .45; }
#chatMessages .cm-bloco, #chatMessages .cm-pilha{ scroll-margin-top: 12px; }
/* as REAÇÕES penduradas na borda de baixo — sem tapar a hora das minhas */
#chatMessages .cm-pilha .chat-reactions{ margin-top: -7px; padding-inline: 8px; } /* 5px dentro da bolha: assenta na borda sem chegar às letras nem à hora */
#chatMessages .cm-pilha .chat-reaction{
height: 20px; padding: 0 7px; line-height: 18px;
font-size: var(--chat-fs-hora);
background: var(--chat-cartao);
border: 1px solid var(--line, #e8e8ed);
box-shadow: none;
}
#chatMessages .cm-pilha .chat-reaction.mine{ border-color: var(--cyan, #0071e3); color: var(--cyan, #0071e3); background: var(--chat-sel); }
#chatMessages .cm-pilha .chat-reaction .cr-emoji{ font-size: 13px; }
/* a pílula das ações por cima da bolha, com os ícones do conjunto */
#chatMessages .cm-ferram button{ display: inline-grid; place-items: center; width: 26px; height: 24px; padding: 0; }
#chatMessages .cm-ferram button svg{ display: block; }
/* o ⚡ LIGADO numa urgência minha à espera: é do autor, por isso não é vermelho
(o vermelho da chat.css era do tempo em que tudo o que era urgente o era) */
#chatMessages .cm-ferram .acao-urg.is-on{ color: var(--chat-tinta); background: var(--chat-sel); }
/* o ⚡ de uma urgência já confirmada por toda a gente: desligado, e parece-o */
#chatMessages .cm-ferram .acao-urg:disabled{ opacity: .4; cursor: default; background: transparent; }
/* a pílula assenta POR CIMA da bolha e só pisa o padding de cima: com top:-13px
(chat.css) tapava metade da 1.ª linha — e a hora das curtas */
#chatMessages .cm-ferram{ top: -22px; }
/* os ENDEREÇOS de uma mensagem (QA de 23/09, `ligarEnderecos`): na bolha azul
o azul das ligações não se lia — herdam a cor do texto e levam sublinhado;
na bolha clara vão no tom de destaque. Um endereço comprido parte-se. */
#chatMessages .cm-corpo a.cm-ligacao{ color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
#chatMessages .cm-bloco:not(.me) .cm-corpo a.cm-ligacao{ color: var(--cyan, #0071e3); }
/* num GRUPO, a 1.ª bolha de outra pessoa tem o NOME por cima, à esquerda —
e a pílula à esquerda tapava-o (QA de 23/09). Vai para a ponta direita da
bolha, que é onde o nome não está. */
#chatMessages .cm-bloco.abre.em-grupo:not(.me) .cm-ferram{ left: auto; right: 6px; }
/* …e numa bolha CURTA a ponta direita da bolha ainda era por cima do nome
(revisão de 23/09): a linha do nome reserva o lugar da pílula (3 botões,
88px). Alarga só a pilha, que é transparente — a bolha fica do tamanho dela. */
#chatMessages .cm-bloco.abre.em-grupo:not(.me) .cm-quem{ padding-right: 100px; }
/* com o MENU da mensagem aberto a pílula sai: a fila das reações assentava
por cima dela e viam-se as duas, uma a espreitar por baixo da outra (o
⋮ fica com o foco e o `:focus-within` mantinha-a acesa) */
#chatMessages .cm-bloco.is-alvo-menu .cm-ferram{ display: none; }
/* A CITAÇÃO da resposta: quem e o quê, legível nas duas bolhas, e leva lá */
#chatMessages .cm-citacao{
display: block;
margin: 1px 0 5px;
padding: 4px 8px 5px;
border-left: 3px solid var(--cyan, #0071e3);
border-radius: var(--chat-r-s);
background: color-mix(in srgb, var(--cyan, #0071e3) 9%, transparent);
color: var(--chat-tinta-2);
font-size: var(--chat-fs-previa);
line-height: 17px;
cursor: pointer;
}
#chatMessages .cm-citacao .cc-quem{ display: block; font-weight: 600; color: color-mix(in srgb, var(--cyan, #0071e3) 80%, var(--chat-tinta)); }
#chatMessages .cm-citacao .cc-tx{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chatMessages .cm-citacao.is-longe{ font-style: italic; }
#chatMessages .cm-bloco.me .cm-citacao{ border-left-color: currentColor; background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }
#chatMessages .cm-bloco.me .cm-citacao .cc-quem{ color: inherit; }
/* FOTOS: largura constante (ponto 18), a altura segue a foto entre 3/4 e 16/9
(`--ar`, chat.js), sem a moldura branca (preta no escuro) do currentColor */
#chatMessages .chat-anexo-foto{
width: 240px; height: auto;
aspect-ratio: var(--ar, 4 / 3);
max-width: 100%; max-height: 320px;
border: 0;
border-radius: var(--chat-r-m);
background: var(--chat-bolha);
position: relative;
cursor: pointer;
}
#chatMessages .chat-anexo-foto::after{
/* o texto vem do `data-abrir`, montado com `_fr` (22/09): escrito aqui,
nunca passava pelo dicionário e ficava em português com a app em EN */
content: attr(data-abrir);
position: absolute; right: 8px; bottom: 8px;
padding: 3px 9px;
border-radius: var(--chat-r-s);
background: var(--chat-veu);
color: var(--chat-sobre-veu); /* ver a nota do token: o véu não vira com o tema */
font-size: var(--chat-fs-hora);
font-weight: 600;
opacity: 0;
transition: opacity .12s;
pointer-events: none;
}
#chatMessages .chat-anexo-foto:hover::after{ opacity: 1; }
/* num ecrã tátil o «Abrir» ficava preso por cima da foto: uma foto abre-se */
@media (hover: none){ #chatMessages .chat-anexo-foto::after{ content: none; } }
#chatMessages .cm-bloco .chat-message:has(.chat-anexo-foto):not(.a-editar){ padding: 3px; }
#chatMessages .chat-message:has(.chat-anexo-foto) .chat-anexos{ margin-top: 0; }
#chatMessages .chat-message:has(.chat-anexo-foto) .cm-corpo:not(:empty){ display: block; padding: 5px 8px 0; }
/* é a FOTO que dá a largura à bolha, não o texto: com a legenda numa linha só
ficava uma faixa azul vazia ao lado da foto (até 118px no painel). A legenda
e a citação partem-se à largura dela, como no WhatsApp */
#chatMessages .chat-message:has(.chat-anexo-foto) :is(.cm-corpo:not(:empty), .cm-citacao){ width: 0; min-width: 100%; box-sizing: border-box; }
/* raios CONCÊNTRICOS: a foto fica 3px para dentro, por isso o raio dela é o da
bolha menos 3 (também nos cantos colados das seguidas) */
#chatMessages .chat-message:has(.chat-anexo-foto):not(.so-fotos) .chat-anexos > .chat-anexo-foto:first-child{ border-radius: calc(var(--chat-r-bolha) - 3px); }
#chatMessages .cm-bloco.me:not(.abre) .chat-message:not(.so-fotos):not(:has(.cm-citacao)) .chat-anexos > .chat-anexo-foto:only-child{ border-top-right-radius: calc(var(--chat-r-s) - 3px); }
#chatMessages .cm-bloco:not(.me):not(.abre) .chat-message:not(.so-fotos):not(:has(.cm-citacao)) .chat-anexos > .chat-anexo-foto:first-child{ border-top-left-radius: calc(var(--chat-r-s) - 3px); }
#chatMessages .chat-message.so-fotos :is(.chat-anexos, .chat-anexo-foto){ border-radius: inherit; }
#chatMessages .chat-message:has(.chat-anexo-foto) .cm-meta{ padding: 0 8px 4px; }
/* só fotos: é a foto, sem bolha, com a hora numa pastilha por cima */
#chatMessages .cm-bloco .chat-message.so-fotos:not(.a-editar),
#chatMessages .cm-bloco.me .chat-message.so-fotos:not(.a-editar){ background: transparent; padding: 0; min-width: 0; }
#chatMessages .cm-bloco .chat-message.so-fotos .cm-corpo{ display: none; }
#chatMessages .cm-bloco .chat-message.so-fotos .cm-meta{
position: absolute; right: 6px; bottom: 6px;
margin: 0; padding: 3px 7px;
border-radius: 999px;
background: var(--chat-veu);
}
#chatMessages .cm-bloco .chat-message.so-fotos :is(.cm-hora, .cm-recibo){ color: var(--chat-sobre-veu); opacity: 1; }
#chatMessages .cm-bloco .chat-message.so-fotos .chat-anexo-foto::after{ right: auto; left: 8px; }
/* ficheiros: ícone maior, nome destacado, meta discreta, descarregar como ícone (ponto 19) */
#chatMessages .chat-anexo-cartao{
border-radius: var(--chat-r-m);
padding: 8px 10px;
gap: 10px;
max-width: 300px;
cursor: pointer;
transition: background .12s;
opacity: 1;
}
#chatMessages .cm-bloco:not(.me) .chat-anexo-cartao{ background: var(--chat-cartao); border: 1px solid var(--line, #ececec); }
#chatMessages .cm-bloco:not(.me) .chat-anexo-cartao:hover{ background: var(--bg2, #f6f6f7); }
#chatMessages .cm-bloco.me .chat-anexo-cartao{ border: 0; background: color-mix(in srgb, var(--chat-minha-tinta) 14%, transparent); }
#chatMessages .cm-bloco.me .chat-anexo-cartao:hover{ background: color-mix(in srgb, var(--chat-minha-tinta) 22%, transparent); }
#chatMessages .chat-anexo-cartao .ca-ico{ font-size: 22px; margin-top: 0; }
#chatMessages .chat-anexo-cartao .ca-nome{ font-size: 13px; font-weight: 600; }
#chatMessages .chat-anexo-cartao .ca-l2{ font-size: var(--chat-fs-hora); line-height: 16px; }
#chatMessages .chat-anexo-cartao .ca-sub{ opacity: .7; }
/* «Abrir» é uma AÇÃO e tem de se ler como uma: uma pastilha discreta diz o
que o sublinhado dizia, sem sujar a linha */
#chatMessages .chat-anexo-cartao .ca-acao{
text-decoration: none;
padding: 1px 7px;
border-radius: 999px;
border: 1px solid var(--line2, #d2d2d7);
color: var(--cyan, #0071e3);
font-weight: 600;
transition: background .12s;
}
#chatMessages .chat-anexo-cartao .ca-acao:hover{ background: var(--cyan-soft, #eef5fd); }
#chatMessages .cm-bloco.me .chat-anexo-cartao .ca-acao{
border-color: color-mix(in srgb, var(--chat-minha-tinta) 35%, transparent);
color: var(--chat-minha-tinta);
}
#chatMessages .cm-bloco.me .chat-anexo-cartao .ca-acao:hover{ background: color-mix(in srgb, var(--chat-minha-tinta) 18%, transparent); }
#chatMessages .chat-anexo-cartao .ca-acao::before{ content: none; }
/* «Descarregar» fica no botão (leitor de ecrã, paredes), mas o que se VÊ é o ícone */
#chatMessages .chat-anexo-cartao .ca-baixar{ font-size: 0; min-width: 22px; height: 22px; margin-left: 2px; }
#chatMessages .chat-anexo-cartao .ca-baixar::before{ content: '⤓'; font-size: 14px; display: inline-block; opacity: .85; text-decoration: none; }
/* ── o COMPOSITOR: um cartão só, igual no painel e no ecrã inteiro ──────────
No ecrã inteiro partia-se em dois (a caixa em cima, o clipe, o Aa, o @ e o
Enviar soltos por baixo). A borda passa a --line2, que se vê no escuro, e o
anel do foco é do contentor (pontos 10, 11). */
#chatConvView .chat-compose{
background: var(--chat-cartao);
border: 1px solid var(--line2, #d2d2d7);
border-radius: var(--chat-r-bolha);
margin: 6px 12px 10px;
padding: 4px 8px 6px;
gap: 0;
box-shadow: var(--chat-sombra-leve);
}
#chatConvView .chat-compose:focus-within{ border-color: var(--cyan, #0071e3); box-shadow: 0 0 0 3px var(--ring, rgba(0, 113, 227, .14)); }
#chatConvView .chat-editor:focus-visible{ box-shadow: none; }
#chatConvView .chat-compose-editor{ border: 0; background: transparent; border-radius: 0; box-shadow: none; position: relative; }
#chatConvView .chat-editor{ min-height: 40px; padding: 9px 8px 6px; font-size: var(--chat-fs-msg); line-height: 20px; }
/* o texto de ajuda numa LINHA só, com reticências (28/09): «Mensagem no grupo
» partia em duas e a caixa crescia sem ninguém escrever */
#chatConvView .chat-editor:empty::before{ color: var(--text3, #9a9aa0); font-weight: 400; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatConvView .chat-compose-acoes{ padding: 0 0 0 2px; gap: 2px; }
#chatConvView .chat-enviar{
width: 32px; height: 32px; min-width: 32px;
padding: 0;
border-radius: 50%;
font-size: 0; /* o texto «Enviar» fica para o leitor de ecrã e para o title */
/* A SETA AO CENTRO, E PORQUÊ ASSIM (22/09): era um `inline-grid` e a
grelha recebia DOIS itens — a seta e o texto «Enviar» do leitor de ecrã;
dois itens, duas linhas, e a seta ficava ~4px acima do centro. Com
`position` a seta deixa de ser um item da grelha e o centro é o centro. */
display: inline-block;
position: relative;
line-height: 0;
transition: background .12s, color .12s, transform .12s;
}
#chatConvView .chat-enviar::before{
content: '';
position: absolute;
top: 50%; left: 50%;
/* +1px à direita: a seta é assimétrica e o centro geométrico não é o
centro que o olho vê */
transform: translate(calc(-50% + 1px), -50%);
width: 16px; height: 16px;
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%, 18% 50%); /* a seta de enviar */
}
/* com a caixa vazia o Enviar NÃO grita: era o círculo azul cheio, o elemento
mais forte do ecrã, a prometer uma coisa que o `enviar()` recusa */
#chatConvView .chat-compose.is-vazio .chat-enviar{ background: transparent; color: var(--chat-tinta-3); cursor: default; }
#chatConvView .chat-compose:not(.is-vazio) .chat-enviar:active{ transform: scale(.92); }
/* os ficheiros por enviar vivem DENTRO da caixa, por cima do texto */
#chatConvView .chat-anexos-tira{ padding: 8px 4px 2px; border-bottom: 0; }
#chatConvView .chat-anexo-item{ border-radius: var(--chat-r-m); }
/* as MENÇÕES ancoradas à caixa, compactas — em ecrã inteiro o popup
atravessava os 1076px da conversa e caía por cima da linha de escrever */
#chatConvView .chat-mention-pop{
bottom: calc(100% + 6px); left: 0; right: auto;
width: min(320px, 100%); max-height: 240px;
padding: 4px;
border: 1px solid var(--line, #e8e8ed);
border-radius: var(--chat-r-m);
background: var(--chat-cartao);
box-shadow: var(--chat-sombra);
}
#chatMentionPop .mui-item{ padding: 6px 8px; gap: 8px; border: 0; border-radius: var(--chat-r-s); }
#chatMentionPop .mui-avatar{ width: 28px; height: 28px; font-size: 11px; }
#chatMentionPop .mui-item:is(.is-ativa, :hover){ background: var(--chat-sel); }
#chatConvView .chat-reply-banner{ border-radius: var(--chat-r-m); }
#chatConvView .chat-so-admins{ border-radius: var(--chat-r-m); background: var(--chat-cartao); border-style: solid; box-shadow: none; }
/* estado vazio: discreto, com identidade, sem se perder no centro (ponto 22) */
#chatMessages .chat-vazio.is-escolher .chat-vazio-fig{
width: 56px; height: 56px; font-size: 24px; opacity: 1;
color: var(--cyan, #0071e3);
background: var(--cyan-soft, #eef5fd);
border-radius: var(--chat-r-bolha);
display: grid; place-items: center;
}
#chatMessages .chat-vazio.is-escolher .chat-vazio-t{ font-size: var(--chat-fs-nome); }
#chatMessages .chat-vazio.is-escolher .chat-vazio-d{ display: none; }
/* …mas com o que se pode fazer daqui */
#chatMessages .chat-vazio-acoes{ display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
#chatMessages .chat-vazio-acoes .chat-vazio-b{
display: inline-flex; align-items: center; gap: 6px;
height: 32px; margin: 0; padding: 0 14px;
border: 1px solid var(--cyan, #0071e3);
border-radius: var(--chat-r-m);
background: var(--cyan, #0071e3);
color: var(--on-accent, #ffffff);
font-size: var(--chat-fs-previa); font-weight: 600;
}
#chatMessages .chat-vazio-acoes .chat-vazio-b.is-sec{ border-color: var(--line2, #d2d2d7); background: var(--chat-moldura); color: var(--chat-tinta); }
#chatMessages .chat-vazio-acoes .chat-vazio-b.is-sec:hover{ background: var(--chat-hover); }
/* ── 3 · INFORMAÇÃO: uma ficha com hierarquia (pontos 12, 13, 21) ────────── */
.chat-info{ background: var(--chat-moldura); border-left: 1px solid var(--line, #ececec); box-shadow: none; }
.chat-info .ci-cab{ background: var(--chat-moldura); border-bottom: 1px solid var(--line, #ececec); box-shadow: none; height: var(--chat-cab-h); box-sizing: border-box; }
.chat-info .ci-t{ font-size: var(--chat-fs-titulo); }
.chat-info :is(.ci-voltar, .ci-x){ width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; border-radius: var(--chat-r-m); background: transparent; color: var(--chat-tinta-2); }
.chat-info :is(.ci-voltar, .ci-x):hover{ background: var(--chat-hover); color: var(--chat-tinta); }
.chat-info .ci-retrato{ padding: 16px 16px 10px; gap: 2px; }
.chat-info .ci-foto .mui-avatar{ width: 56px; height: 56px; font-size: 20px; box-shadow: none; }
/* sem foto não é botão nenhum — e o de recurso não sai esbatido a 45% */
.chat-info .ci-foto.is-grupo, .chat-info .ci-foto.is-grupo .mui-avatar{ border-radius: var(--chat-r-bolha); }
.chat-info .ci-nome{ font-size: var(--chat-fs-retrato); font-weight: 600; margin-top: 6px; }
.chat-info .ci-sub{ font-size: var(--chat-fs-previa); color: var(--chat-tinta-3); text-align: center; }
/* os atalhos à mão, por baixo do retrato */
.chat-info .ci-rapidas{ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: 6px 12px 4px; }
/* sem moldura (29/09, revisão visual): três caixas de contorno pesavam mais do que
o retrato — um fundo leve no tom do acento diz «botão» sem gritar */
.chat-info .ci-rapidas button{
height: 52px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
border: 0;
border-radius: var(--chat-r-m);
background: color-mix(in srgb, var(--cyan, #0071e3) 7%, var(--chat-moldura));
color: var(--cyan, #0071e3);
font: inherit; font-size: var(--chat-fs-hora); font-weight: 600;
cursor: pointer;
}
.chat-info .ci-rapidas button:hover{ background: var(--chat-hover); }
.chat-info .ci-rapidas svg{ width: 18px; height: 18px; }
.chat-info .ci-cartao{ margin: 8px 12px 0; padding: 0; border: 1px solid var(--line, #ececec); border-radius: var(--chat-r-m); }
.chat-info .ci-linha{
margin: 0;
padding: 8px 12px;
min-height: 42px;
gap: 12px;
background: transparent;
border-radius: 0;
box-shadow: none;
border-bottom: 1px solid var(--line, #ececec);
}
.chat-info .ci-linha:last-child{ border-bottom: 0; }
.chat-info .ci-ico{ width: 20px; height: 20px; color: var(--chat-tinta-3); }
.chat-info .ci-val{ font-size: var(--chat-fs-nome); }
.chat-info .ci-rot{ font-size: var(--chat-fs-previa); color: var(--chat-tinta-3); }
.chat-info .ci-sw{ width: 36px; height: 20px; }
.chat-info .ci-sw-bola{ width: 16px; height: 16px; }
.chat-info .ci-sw.on .ci-sw-bola{ transform: translateX(16px); }
.chat-info .ci-membros, .chat-info .ci-bloco{
margin: 10px 12px 0;
padding: 6px 0 0;
background: transparent;
border-radius: 0;
border-top: 1px solid var(--line, #ececec);
box-shadow: none;
}
.chat-info .ci-membros-t, .chat-info .ci-bloco-t{
font-size: var(--chat-fs-rotulo);
letter-spacing: .06em;
text-transform: uppercase;
padding: 6px 8px 4px;
color: var(--chat-tinta-3);
}
.chat-info .ci-membro{ padding: 5px 8px; border-radius: var(--chat-r-m); }
.chat-info .ci-membro .mui-avatar{ width: 32px; height: 32px; font-size: 12px; }
.chat-info .ci-membro-nome{ font-size: var(--chat-fs-nome); }
.chat-info .ci-membro-sub{ font-size: var(--chat-fs-previa); color: var(--chat-tinta-3); }
.chat-info .ci-membro-espera{ padding: 2px 8px 8px; font-size: var(--chat-fs-previa); color: var(--chat-tinta-3); }
/* «Acrescentar pessoas» à escala dos membros: era 15px com um disco azul cheio
de 36px, maior do que as próprias pessoas */
.chat-info .ci-membro-add{ font-size: var(--chat-fs-nome); font-weight: 500; padding: 5px 8px; }
.chat-info .ci-mais{ width: 32px; height: 32px; font-size: 16px; background: var(--chat-sel); color: var(--cyan, #0071e3); }
.chat-info .ci-item{ padding: 5px 8px; border-radius: var(--chat-r-m); gap: 8px; }
.chat-info .ci-item-ico{ font-size: 15px; }
.chat-info .ci-item-t{ font-size: 13px; -webkit-line-clamp: 1; }
.chat-info .ci-item-s{ font-size: var(--chat-fs-hora); color: var(--chat-tinta-3); }
.chat-info .ci-acoes{ margin: 10px 12px 0; padding-top: 6px; border-top: 1px solid var(--line, #ececec); }
.chat-info .ci-gestao-t{ padding: 8px 8px 2px; }
.chat-info .ci-sep{ height: 1px; margin: 6px 0; background: var(--line, #e8e8ed); }
.chat-info .ci-bt{
margin: 0;
width: 100%;
background: transparent;
border-radius: var(--chat-r-m);
box-shadow: none;
padding: 8px 8px;
font-size: var(--chat-fs-nome);
color: var(--chat-tinta);
}
.chat-info .ci-ver-todos{ font-size: var(--chat-fs-previa); padding: 6px 8px; }
/* SAIR do grupo é vermelho (29/09, revisão visual): perde-se o acesso, e é assim
em todo o lado (a ronda 2 tinha-o a cinzento, com o «Apagar o grupo» a vermelho) */
.chat-info .ci-bt.is-saida{ color: var(--red, #d93025); }
.chat-info .ci-bt.is-saida:hover{ background: color-mix(in srgb, var(--red, #d93025) 10%, transparent); }
/* a segunda linha de um membro diz SEMPRE o login; o papel vem antes, a azul */
.chat-info .ci-membro-linha2{ display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.chat-info .ci-membro-linha2 .ci-membro-sub{ flex: none; }
.chat-info .ci-membro-login{
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: var(--chat-fs-previa); color: var(--chat-tinta-3);
}
/* ── reações e menus: mais pequenos, mais perto (pontos 16, 17) ─────────── */
.cm-fila-reacoes{
height: 34px;
padding: 0 6px;
gap: 2px;
border-radius: 17px;
box-shadow: var(--chat-sombra-leve), var(--chat-sombra);
}
.cm-fila-reacoes .cfr-e, .cm-fila-reacoes .cfr-mais{ width: 28px; height: 28px; font-size: 18px; }
.cm-fila-reacoes .cfr-mais{ font-size: 16px; }
/* ── a folha «Nova conversa» ─────────────────────────────────────────────── */
#muiSheet .cn-cab{ display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
#muiSheet .cn-cab h3{ margin: 0; font-size: var(--chat-fs-retrato); font-weight: 600; }
#muiSheet .cn-x{
width: 32px; height: 32px;
display: grid; place-items: center;
border: 0; border-radius: var(--chat-r-m);
background: transparent; color: var(--chat-tinta-2);
cursor: pointer;
}
#muiSheet .cn-x:hover{ background: var(--chat-hover); color: var(--chat-tinta); }
/* os tipos como controlo SEGMENTADO, e não como chips que parecem filtros */
#muiSheet .cn-tipos{ display: inline-flex; gap: 2px; margin: 10px 0 6px; padding: 2px; border-radius: var(--chat-r-m); background: var(--bg3, #f0f0f3); }
#muiSheet .cn-tipos .chat-filter-chip{
border: 0; border-radius: var(--chat-r-s);
background: transparent; color: var(--chat-tinta-2);
padding: 5px 12px;
font-size: var(--chat-fs-previa); font-weight: 600;
}
#muiSheet .cn-tipos .chat-filter-chip.active{ background: var(--bg1, #ffffff); color: var(--chat-tinta); box-shadow: var(--chat-sombra-leve); }
#muiSheet .cn-rot{ padding: 10px 8px 4px; font-size: var(--chat-fs-rotulo); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--chat-tinta-3); }
#muiSheet .chat-novo-grupo{
width: 100%;
display: flex; align-items: center; gap: 12px;
margin: 0;
padding: 8px;
border: 0; border-radius: var(--chat-r-m);
background: transparent; box-shadow: none;
text-align: left; cursor: pointer;
}
#muiSheet .chat-novo-grupo:hover{ background: var(--chat-hover); }
#muiSheet .chat-novo-grupo .cng-ico{ width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--chat-r-m); background: var(--chat-sel); color: var(--cyan, #0071e3); }
#muiSheet .chat-novo-grupo .cng-t{ font-size: var(--chat-fs-nome); }
#muiSheet .chat-novo-grupo .cng-d{ font-size: var(--chat-fs-previa); color: var(--chat-tinta-3); }
/* ícones e avatares todos a +24 da folha e os textos a +72 (eram três margens),
sem o traço de baixo de cada linha, que curvava nos cantos arredondados */
#muiSheet .cn-folha .mui-item{ padding: 8px; gap: 12px; border-bottom: 0; border-radius: var(--chat-r-m); }
#muiSheet .cn-folha .mui-item:hover{ background: var(--chat-hover); }
#muiSheet .mui-sheet:has(.cn-folha){ background: var(--chat-cartao); }
#muiSheet .cn-folha .mui-search-sug{ background: transparent; }
/* a lista da folha não tem scroll próprio (a folha já tem): com os 280px do
dropdown do shell, a 4.ª recente cortava a meio com espaço de sobra em baixo */
#muiSheet .cn-folha #chatDestSug{ max-height: none; overflow: visible; }
#muiSheet .cn-folha .mui-avatar{ width: 36px; height: 36px; font-size: 13px; }
/* no PAINEL, a folha nasce encostada ao painel e não ao centro do ecrã — e o
ASSISTENTE DO GRUPO NOVO também (28/09): é o mesmo gesto a continuar, e
saltava da «Nova conversa», encostada ao painel, para o meio da página */
@media (min-width: 921px){
body.rp-open:not(.chat-2col) #muiSheet:is(:has(.cn-folha), :has(.cg-rodape)){ justify-content: flex-end; align-items: flex-start; padding: calc(var(--h-topbar, 44px) + var(--chat-cab-h)) 12px 0 0; }
#muiSheet:is(:has(.cn-folha), :has(.cg-rodape)) .mui-sheet{ width: 376px; max-width: 376px; border-radius: var(--chat-r-modal); }
body.rp-open:not(.chat-2col) #muiSheet:has(.cg-rodape) .mui-sheet{ max-height: calc(100vh - var(--h-topbar, 44px) - var(--chat-cab-h) - 24px); }
}
/* ── 5 · ECRÃ INTEIRO: um cabeçalho por coluna, larguras que crescem ───────
A barra do shell atravessava 1440–1920px com «Chat ⚡ ⌕ ✚ ⋮» à esquerda e o
pin e o ✕ no canto oposto, e por baixo vinham três traços a alturas
diferentes. Cada coluna tem o seu cabeçalho de 52px; a do shell esconde-se
(só com o chat à vista — as Notificações e as Tarefas não mudam). */
body.chat-2col #rightPanel:has(> #chatPane:not([hidden])) > .rp-head{ display: none; }
body.chat-2col #chatListView{ flex: 0 0 var(--chat-lista-w); max-width: var(--chat-lista-w); border-right: 1px solid var(--line, #ececec); }
body.chat-2col #chatConvView{ background: var(--chat-chao); }
body.chat-2col #chatAcoes{
display: flex; align-items: center; gap: 2px;
height: var(--chat-cab-h); box-sizing: border-box;
padding: 0 8px 0 14px;
border-bottom: 1px solid var(--line, #ececec);
background: var(--chat-moldura);
}
body.chat-2col #chatAcoes .cl-titulo{ flex: 1; font-size: var(--chat-fs-titulo); font-weight: 700; }
body.chat-2col #chatConvView .chat-info .ci-cab{ height: var(--chat-cab-h); min-height: 0; padding-block: 0; box-sizing: border-box; }
/* o ✕ da barra da conversa é do painel lateral: aqui está no cabeçalho da
lista; e a seta «voltar» não faz sentido com a lista sempre à vista (o
`display:none` do chat.css perdia para o botão de ícone, que traz o #id) */
body.chat-2col #chatBackBar :is(.cbb-sep, .cbb-fechar, .chat-back-btn, .cbb-largura, .cbb-pin){ display: none; }
/* o pin da barra da conversa segue o do shell: no telemóvel o painel já ocupa o
ecrã inteiro e fixá-lo não fazia nada (chat.css, «o que o painel do shell
mostra») */
@media (max-width: 920px){
#chatBackBar .cbb-pin{ display: none; }
}
/* e o ⤢ só nasce onde as duas colunas cabem (`LARGURA_MINIMA_DUAS_COLUNAS`,
901px) — mas a barra não se redesenha ao estreitar a janela, e ficava lá um
botão que já não fazia nada */
@media (max-width: 900px){
#chatBackBar .cbb-largura{ display: none; }
}
/* a conversa não corre de parede a parede: a coluna de leitura ao centro, e o
que se pendura à volta dela (barra, fixadas, «a escrever», pedidos) na mesma
coluna (ponto 1) */
body.chat-2col #chatMessages,
body.chat-2col #chatConvView :is(.chat-back-bar, .chat-fixadas, .chat-busca-conversa, .chat-a-escrever, .chat-pedidos){
padding-inline: max(16px, calc((100% - var(--chat-col)) / 2));
}
body.chat-2col #chatMessages{ padding-top: 16px; padding-bottom: 8px; }
/* a BARRA DE SCROLL come a coluna do lado direito: as bolhas acabavam 10px antes
da caixa de escrever e do cabeçalho (medido a 1440: 1293 contra 1303). Fica
com o lugar reservado sempre (gutter estável — sem ela a coluna saltava ao
aparecer o scroll) e o recuo direito desconta-a. */
body.chat-2col #chatMessages{ scrollbar-gutter: stable; padding-right: max(6px, calc((100% - var(--chat-col)) / 2 - var(--chat-barra))); }
body.chat-2col.chat-tem-info #chatConvView > #chatMessages{ padding-right: calc(var(--ci-w) + var(--ci-margem) - var(--chat-barra)); }
body.chat-2col .cm-pilha{ max-width: min(72%, 600px); }
body.chat-2col #chatMessages .cm-bloco .chat-message{ max-width: 100%; }
/* o compositor é o MESMO cartão do painel, dentro da coluna: o recuo é margem
e não padding, por isso a caixa acaba onde as mensagens acabam */
body.chat-2col #chatConvView .chat-compose{ margin: 0 max(16px, calc((100% - var(--chat-col)) / 2)) 14px; padding: 4px 8px 6px; }
body.chat-2col.chat-tem-info #chatConvView > :not(.chat-info){
--ci-w: var(--chat-info-w);
--ci-margem: max(16px, calc((100% - var(--ci-w) - var(--chat-col)) / 2));
}
body.chat-2col.chat-tem-info #chatConvView > .chat-compose{
margin-left: var(--ci-margem);
margin-right: calc(var(--ci-w) + var(--ci-margem));
padding: 4px 8px 6px;
}
body.chat-2col .chat-info{ width: var(--chat-info-w); }
/* ── 6 · PAINEL LATERAL: regras próprias, não a versão encolhida (ponto 20) ──
Dentro de uma conversa há UM cabeçalho: a barra do shell (40px só com
«Chat», o pin e o ✕) esconde-se e o ✕ vem para a barra da conversa. Eram
≈126px de moldura (40 + 49 + 37) antes da primeira mensagem; ficam 52. */
body:not(.chat-2col) #rightPanel:has(> #chatPane:not([hidden]) #chatConvView:not([hidden])) > .rp-head{ display: none; }
body:not(.chat-2col) #chatBackBar .cu-ir .cu-tx{ display: none; } /* no painel só «⚡ 5»; a frase vai no title */
/* a lista do painel também tem 52px e o fundo da moldura: a 40px o ✕ saltava
8px ao entrar numa conversa */
body:not(.chat-2col) #rightPanel:has(> #chatPane:not([hidden])) > .rp-head{ height: var(--chat-cab-h); min-height: 0; box-sizing: border-box; background: var(--chat-moldura); }
body:not(.chat-2col) #rightPanel:has(> #chatPane:not([hidden])) > .rp-head .rp-actions{ padding-right: 12px; }
body:not(.chat-2col) #rightPanel:has(> #chatPane:not([hidden])) > .rp-head .rp-action:not(.on, .active){ color: var(--chat-tinta-2); }
body:not(.chat-2col) #rightPanel:has(> #chatPane:not([hidden])) > .rp-head .rp-action:not(.on, .active):hover{ background: var(--chat-hover); color: var(--chat-tinta); }
body:not(.chat-2col) #rightPanel:has(> #chatPane:not([hidden])) > .rp-head .rp-title{ font-size: var(--chat-fs-titulo); }
/* os ícones do shell na barra da lista à escala dos do chat (18px) */
#rightPanel:has(> #chatPane:not([hidden])) #rpPinBtn svg{ width: 18px; height: 18px; }
body:not(.chat-2col) #chatMessages{ padding: 10px 12px 8px; }
body:not(.chat-2col) #chatMessages .cm-pilha{ max-width: 88%; }
body:not(.chat-2col) #chatMessages .cm-bloco .chat-message{ padding: 6px 10px 5px; min-width: 56px; }
body:not(.chat-2col) #chatMessages .chat-anexo-foto{ width: 200px; }
body:not(.chat-2col) #chatMessages .chat-anexo-cartao{ max-width: 100%; padding: 6px 8px; gap: 8px; }
body:not(.chat-2col) #chatMessages .chat-anexo-cartao .ca-ico{ font-size: 18px; }
body:not(.chat-2col) #chatConvView .chat-compose{ margin: 6px 8px 8px; padding: 2px 6px 4px; }
body:not(.chat-2col) #chatConvView .chat-editor{ min-height: 36px; padding: 8px 6px 4px; }
body:not(.chat-2col) #chatConvView .chat-enviar{ width: 30px; height: 30px; min-width: 30px; }
body:not(.chat-2col) .cm-fila-reacoes{ height: 30px; }
body:not(.chat-2col) .cm-fila-reacoes .cfr-e, body:not(.chat-2col) .cm-fila-reacoes .cfr-mais{ width: 26px; height: 26px; font-size: 16px; }
/* a Informação no painel é uma VISTA inteira com «←», não um painel lateral:
deixava uma tira de 60px da conversa a espreitar, com um segundo «←» */
body:not(.chat-2col) #chatConvView .chat-info{ inset: 0; width: auto; border-left: 0; box-shadow: none; }
/* …e o que fica por baixo dela sai do Tab e do leitor de ecrã: tapada, a
conversa continuava a receber o foco e a ser lida */
body:not(.chat-2col).chat-tem-info #chatConvView > :not(.chat-info){ visibility: hidden; }
body:not(.chat-2col) .chat-info .ci-cab{ gap: 4px; padding-left: 6px; }
body:not(.chat-2col) .chat-info .ci-x{ display: none; }
/* a região viva do chat (23/09): o que o `dizer()` diz também se OUVE — os
toasts do shell não são anunciados. Invisível, mas não escondida do leitor. */
#chatAnuncio{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* AS GUARDADAS (23/09): quem escreveu, quando, e o texto a duas linhas;
agrupadas por conversa na folha, só as desta conversa na Informação */
:is(#muiSheet, .chat-info) .cg-lista{ max-height: none; overflow: visible; display: flex; flex-direction: column; }
:is(#muiSheet, .chat-info) .cg-linha{
display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start;
width: 100%; padding: 8px; border: 0; border-radius: var(--chat-r-m);
background: transparent; text-align: left; font: inherit; color: var(--chat-tinta); cursor: pointer;
}
:is(#muiSheet, .chat-info) .cg-linha:hover{ background: var(--chat-hover); }
:is(#muiSheet, .chat-info) .cg-linha:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: -2px; }
:is(#muiSheet, .chat-info) .cg-av .mui-avatar{ width: 28px; height: 28px; font-size: 11px; }
:is(#muiSheet, .chat-info) .cg-corpo{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:is(#muiSheet, .chat-info) .cg-l1{ display: flex; align-items: baseline; gap: 8px; min-width: 0; }
:is(#muiSheet, .chat-info) .cg-quem{ flex: 1; min-width: 0; font-size: var(--chat-fs-previa); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#muiSheet, .chat-info) .cg-quando{ flex: none; font-size: var(--chat-fs-hora); color: var(--chat-tinta-3); font-variant-numeric: tabular-nums; }
:is(#muiSheet, .chat-info) .cg-tx{
font-size: var(--chat-fs-msg); color: var(--chat-tinta-2); margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#muiSheet .cg-conv{ padding: 12px 8px 4px; font-size: var(--chat-fs-rotulo); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--chat-tinta-3); }
#muiSheet .cg-conv:first-child{ padding-top: 2px; }
:is(#muiSheet, .chat-info) .cg-vazio, :is(#muiSheet, .chat-info) .cg-nota, .chat-info .cg-sub{ padding: 10px 12px; font-size: var(--chat-fs-previa); color: var(--chat-tinta-3); line-height: 1.5; }
.chat-info .cg-sub{ padding-bottom: 2px; }
.chat-info .cg-lista{ padding: 0 4px; }
/* «Pessoas» leva aqui: o título dos membros recebe o foco, sem contorno de rato */
.chat-info .ci-membros-t:focus{ outline: none; }
.chat-info .ci-membros-t:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; }
/* 24/09 — leitura e ações do chat INTERNO. A régua da réplica invisível
acompanha a meta para continuar a reservar espaço na última linha. */
/* O azul SUAVE das minhas (texto escuro, sem o azul cheio) — mas tem de se
distinguir das recebidas à primeira vista. A 12% (claro) e 22% (escuro) as
duas bolhas liam-se quase iguais (25/09, o Diogo: «muito pouco contraste»):
26% no claro, e no escuro os 40% que a casa já usava antes do azul suave. */
#chatMessages .cm-interna.me{
--chat-minha: color-mix(in srgb, var(--cyan, #0071e3) 26%, var(--chat-cartao));
--chat-minha-tinta: var(--chat-tinta);
--chat-minha-meta: var(--chat-tinta-2);
}
:root[data-theme="dark"] #chatMessages .cm-interna.me{
--chat-minha: color-mix(in srgb, var(--cyan, #0a84ff) 40%, var(--chat-cartao));
}
#chatMessages .cm-interna :is(.cm-meta, .cm-vao-hora){
gap: 8px; font-size: 12px; line-height: 1.2;
}
#chatMessages .cm-interna .cm-meta .cm-recibo,
#chatMessages .cm-interna .cm-vao-hora .cv-recibo{
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 26px; padding: 3px 6px; box-sizing: border-box;
font-size: 12px; line-height: 1.2; letter-spacing: normal; border-radius: 6px;
}
#chatMessages .cm-interna .cm-meta .cm-recibo-vista{
color: color-mix(in srgb, var(--cyan, #0071e3) 70%, var(--chat-tinta));
}
#chatMessages .cm-interna :is(.cm-recibo-marca, .cv-recibo-marca){ letter-spacing: -.08em; }
/* o recibo é um BOTÃO (abre «Quem leu»): o tom aparece ao passar o rato ou no
foco, e não em repouso — em repouso era uma pastilha em cada mensagem minha */
#chatMessages .cm-interna .cm-recibo:is(:hover, :focus-visible){ background: color-mix(in srgb, currentColor 12%, transparent); }
#chatMessages .cm-interna .cm-recibo:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 1px; }
/* o «1/2» dos grupos na letra da hora: o negrito é das marcas ✓✓, não do número */
#chatMessages .cm-interna .cm-recibo .cm-recibo-n{ font-weight: 400; }
/* Um acesso lateral estável ao menu existente, com reações e todas as ações.
Tem o seu próprio espaço: nunca cobre a bolha ou a mensagem anterior. */
/* O destino de uma fixada/procura fica inequívoco durante todo o destaque,
sem piscar nem mudar as dimensões da mensagem. */
#chatMessages .cm-interna.cm-achada{ animation: none; background: transparent; }
/* …e POR DENTRO da bolha (28/09, o Diogo: «o realce fica por cima da mensagem
em baixo»). Era um contorno de 3px a 2px de distância mais um halo de 6px —
11px para fora, com as bolhas a 3–4px umas das outras; e o contorno pinta-se
por cima de tudo, por isso tapava a de baixo (e a de cima). Por dentro não
sai da bolha: o contorno ocupa os 3px da borda e o halo mais 3px para dentro,
antes do texto. */
#chatMessages .cm-interna.cm-achada .chat-message{
animation: none;
outline: 3px solid var(--cyan, #0071e3); outline-offset: -3px;
box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--cyan, #0071e3) 22%, transparent);
}
body #chatMessages .cm-interna .cm-pilha{ max-width: min(80%, calc(100% - 48px)); }
body #chatMessages .cm-interna.em-grupo:not(.me) .cm-pilha{ max-width: min(80%, calc(100% - 80px)); }
#chatMessages .cm-interna .cm-ferram,
#chatMessages .cm-interna.abre.em-grupo:not(.me) .cm-ferram{
top: 0; left: auto; right: -40px; padding: 0;
border: 0; border-radius: var(--chat-r-m); background: transparent; box-shadow: none;
}
#chatMessages .cm-interna.me .cm-ferram{ right: auto; left: -40px; }
#chatMessages .cm-interna.abre.em-grupo:not(.me) .cm-ferram{ top: 20px; }
#chatMessages .cm-interna .cm-ferram button:not(:last-child){ display: none; }
#chatMessages .cm-interna .cm-ferram button:last-child{ width: 32px; height: 32px; border-radius: var(--chat-r-m); }
#chatMessages .cm-interna .cm-pilha:focus-within .cm-ferram{ display: flex; }
/* O ⋮ vive FORA da bolha, e o `.cm-pilha:hover` (chat.css) só o acendia com o
rato EM CIMA da bolha: a caminho dele, o rato saía da bolha, o ⋮ apagava-se e
não voltava nem com o cursor no sítio dele (25/09, «os 3 pontos estão todos
bugados», medido ponto a ponto). Acende-se com a LINHA da mensagem, que ocupa
a largura da coluna — o caminho até ao ⋮ fica todo dentro dela. */
/* …e com o rato o FOCO não o prende: depois de usar o menu o ⋮ ficava com o
foco e aceso nessa mensagem, e ao passar noutra viam-se dois. Com rato, fica
aceso pelo foco só quando o foco é de TECLADO (`:focus-visible`); no toque e
no telemóvel está sempre à vista (regra do fim desta secção). */
@media (min-width: 641px) and (hover: hover) and (pointer: fine){
#chatMessages .cm-interna .cm-ferram:focus-within,
#chatMessages .cm-interna .cm-pilha:focus-within .cm-ferram{ display: none; }
}
/* (a mesma força da regra de cima — `.cm-pilha` no seletor — para ganharem por virem depois) */
#chatMessages .cm-interna:hover .cm-pilha .cm-ferram,
#chatMessages .cm-interna .cm-pilha:has(:focus-visible) .cm-ferram{ display: flex; }
#chatMessages .cm-interna.is-alvo-menu .cm-pilha .cm-ferram{ display: none; }
#chatMessages .cm-interna.abre.em-grupo:not(.me) .cm-quem{ padding-right: 0; }
/* A folha mantém Escape, foco e clique fora do MUI. No computador é um
detalhe ancorado, sem escurecer a aplicação; no telemóvel assenta em baixo. */
#muiSheet.chat-leitura-sheet{ background: transparent; }
#muiSheet.chat-leitura-sheet > .mui-sheet{
position: fixed; left: var(--ql-x, 12px); top: var(--ql-y, 12px);
width: min(360px, calc(100vw - 24px)); max-width: none; box-sizing: border-box;
max-height: calc(100dvh - 24px); padding: 0;
background: var(--chat-cartao); color: var(--chat-tinta);
border: 1px solid var(--line2, #d2d2d7); border-radius: var(--chat-r-modal);
box-shadow: var(--shadow-lg, 0 12px 36px rgba(0,0,0,.18)); animation: none;
}
#chatQuemLeu .ql-topo{
display: flex; align-items: center; justify-content: space-between; gap: 12px;
position: sticky; top: 0; z-index: 1; padding: 10px 12px 8px 16px;
background: var(--chat-cartao); border-bottom: 1px solid var(--line, #e8e8ed);
}
#chatQuemLeu .ql-topo h3{ margin: 0; font-size: 15px; font-weight: 650; }
#chatQuemLeu .ql-fechar{
display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px;
border: 0; border-radius: var(--chat-r-m); background: transparent;
color: var(--chat-tinta-2); cursor: pointer;
}
#chatQuemLeu .ql-fechar:hover{ background: var(--chat-hover); }
#chatQuemLeu .ql-fechar:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: -2px; }
#chatQuemLeu .ql-detalhes{ padding: 12px 16px 4px; }
#chatQuemLeu .ql-msg{ white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
#chatQuemLeu :is(.ql-resumo, .ql-cab, .ql-vazio, .ql-em){ color: var(--chat-tinta-3); }
#chatQuemLeu .ql-tx{ flex-direction: column; align-items: flex-start; gap: 3px; }
#chatQuemLeu .ql-nome{ max-width: 100%; color: var(--chat-tinta); }
#chatQuemLeu .ql-em{ font-size: 12px; white-space: normal; }
/* Confirmação de apagar: mesma folha acessível, centrada no computador. */
#muiSheet.chat-apagar-sheet{ align-items: center; background: var(--chat-veu); }
#muiSheet.chat-apagar-sheet > .mui-sheet{
width: min(420px, calc(100vw - 32px)); padding: 24px; box-sizing: border-box;
border: 1px solid var(--line, #e8e8ed); border-radius: var(--chat-r-modal);
background: var(--chat-cartao); color: var(--chat-tinta); animation: none;
}
.chat-apagar header{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-apagar h3{ margin: 0; font-size: 17px; }
.chat-apagar p{ margin: 16px 0 24px; color: var(--chat-tinta-2); line-height: 1.55; font-size: 14px; }
.chat-apagar button{ font: inherit; cursor: pointer; border-radius: var(--chat-r-m); }
.chat-apagar .chat-apagar-fechar{
display: grid; place-items: center; flex: none; width: 32px; height: 32px;
padding: 0; border: 0; background: transparent; color: var(--chat-tinta-2);
}
.chat-apagar footer{ display: flex; justify-content: flex-end; gap: 10px; }
.chat-apagar footer button{ min-height: 44px; padding: 10px 16px; font-size: 14px; font-weight: 600; }
.chat-apagar-cancelar{ background: var(--chat-cartao); color: var(--chat-tinta); border: 1px solid var(--line2, #d2d2d7); }
.chat-apagar-confirmar{ background: var(--red-bg, #fdf1f1); color: var(--red, #d70015); border: 1px solid var(--red-bd, #f3b8bc); }
.chat-apagar button:hover{ filter: brightness(.95); }
.chat-apagar button:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; }
.chat-apagar button:disabled{ opacity: .6; cursor: wait; }
.chat-apagar .chat-apagar-erro{ color: var(--red, #d70015); margin-bottom: 16px; }
/* A MESMA folha para todas as confirmações do chat (28/09 — saíram os
`window.confirm`): o texto pode ter mais de um parágrafo, o que não se desfaz
diz-se à parte, e o que não destrói nada confirma-se a azul. */
.chat-confirmar .chat-confirmar-texto{ display: grid; gap: 8px; margin: 14px 0 22px; }
.chat-confirmar .chat-confirmar-texto p{ margin: 0; }
.chat-confirmar .chat-confirmar-aviso{ color: var(--red, #d70015); font-weight: 600; }
.chat-confirmar.is-neutro .chat-apagar-confirmar{
background: var(--cyan, #0071e3); color: var(--on-accent, #ffffff); border-color: var(--cyan, #0071e3);
}
.chat-confirmar h3{ text-wrap: balance; }
@media (max-width: 640px){
#muiSheet.chat-apagar-sheet{ align-items: flex-end; padding-bottom: env(safe-area-inset-bottom, 0px); }
#muiSheet.chat-apagar-sheet > .mui-sheet{ width: calc(100vw - 16px); margin-bottom: 8px; padding: 20px; }
.chat-apagar footer{ flex-direction: column-reverse; }
.chat-apagar .chat-apagar-fechar{ width: 44px; height: 44px; }
}
@media (max-width: 640px){
#muiSheet.chat-leitura-sheet{ background: var(--chat-veu); }
#muiSheet.chat-leitura-sheet > .mui-sheet{
left: 8px; right: 8px; top: auto; bottom: 8px; width: auto;
max-height: calc(100dvh - 32px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
#chatQuemLeu .ql-fechar{ width: 44px; height: 44px; }
}
@media (max-width: 640px), (hover: none), (pointer: coarse){
/* só na mensagem em que se tocou (29/09): em todas era uma coluna de botões.
O :hover que o toque deixa preso na última bolha tocada não conta (senão
tocar outra vez, ou no chão, não o tirava); o foco de teclado continua a
acendê-lo, como com o rato. */
#chatMessages .cm-interna:not(.is-tocada) .cm-pilha:not(:has(:focus-visible)) .cm-ferram{ display: none; }
#chatMessages .cm-interna.is-tocada .cm-ferram{ display: flex; }
#chatMessages .cm-interna .cm-ferram button:last-child{ width: 40px; height: 40px; }
#chatMessages .cm-interna .cm-meta .cm-recibo,
#chatMessages .cm-interna .cm-vao-hora .cv-recibo{ min-height: 36px; }
}
/* ── ENCAMINHAR (28/09) ──────────────────────────────────────────────────────
A folha que escolhe PARA ONDE vai uma mensagem: o que vai (quem escreveu, o
texto, os ficheiros), a procura, as conversas e as pessoas com a cara de cada
uma, um visto por escolha e o botão que diz quantas. PRESA AO TOPO no
computador (29/09, revisão visual), como todas as outras folhas do chat e a
regra do shell de 28/09: centrada, uma folha que cresce muda de sítio e o
botão foge debaixo do rato — e a «Nova sondagem» cresce a cada opção. De baixo
no telemóvel. As CONFIRMAÇÕES continuam ao centro: são alertas e não crescem. */
#muiSheet.chat-enc-sheet{ align-items: center; background: var(--chat-veu); }
@media (min-width: 641px){
#muiSheet.chat-enc-sheet{ align-items: flex-start; padding-top: max(24px, 11vh); box-sizing: border-box; }
}
#muiSheet.chat-enc-sheet > .mui-sheet{
width: min(480px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - max(24px, 11vh) - 24px));
padding: 18px 18px 16px; box-sizing: border-box; display: flex; flex-direction: column;
border: 1px solid var(--line, #e8e8ed); border-radius: var(--chat-r-modal);
background: var(--chat-cartao); color: var(--chat-tinta); animation: none; overflow: hidden;
}
.chat-enc{ display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; }
.chat-enc .ce-cab{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-enc .ce-cab h3{ margin: 0; font-size: 17px; }
.chat-enc button{ font: inherit; cursor: pointer; }
.chat-enc .ce-x{
width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%;
background: transparent; color: var(--chat-tinta-2);
}
.chat-enc .ce-x:hover{ background: var(--chat-hover); color: var(--chat-tinta); }
/* o que vai: uma citação, como a da resposta */
.chat-enc .ce-previa{
display: flex; flex-direction: column; gap: 3px; padding: 9px 12px;
border-radius: var(--chat-r-m); background: var(--chat-bolha);
border-left: 3px solid var(--cyan, #0071e3);
}
.chat-enc .ce-previa-de{ font-size: 12px; font-weight: 700; color: var(--cyan, #0071e3); }
.chat-enc .ce-previa-tx{
font-size: 13.5px; line-height: 1.4; color: var(--chat-tinta);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
overflow-wrap: anywhere;
}
.chat-enc .ce-previa-fx{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--chat-tinta-2); }
.chat-enc .ce-procura{ margin: 0; }
.chat-enc .ce-procura input{ width: 100%; box-sizing: border-box; }
/* os escolhidos, em pastilhas: ficam à vista mesmo quando a procura os esconde */
.chat-enc .ce-escolhidos{ display: flex; flex-wrap: wrap; gap: 6px; }
.chat-enc .ce-escolhidos[hidden]{ display: none; }
.chat-enc .ce-pastilha{
display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
padding: 4px 8px 4px 10px; border: 0; border-radius: 999px;
background: var(--chat-sel); color: var(--chat-tinta); font-size: 12.5px; font-weight: 600;
}
.chat-enc .ce-pastilha:hover .ce-pastilha-x{ color: var(--red, #d70015); }
.chat-enc .ce-pastilha-x{ display: inline-grid; color: var(--chat-tinta-3); }
.chat-enc .ce-lista{ flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; }
.chat-enc .ce-sec{
position: sticky; top: 0; z-index: 1; padding: 8px 4px 4px; background: var(--chat-cartao);
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chat-tinta-3);
}
.chat-enc .ce-alvo{
width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
padding: 7px 8px; border: 0; border-radius: var(--chat-r-m); background: transparent;
color: var(--chat-tinta); text-align: left;
}
.chat-enc .ce-alvo:hover{ background: var(--chat-hover); }
.chat-enc .ce-alvo.is-sel{ background: var(--chat-sel); }
.chat-enc .ce-alvo:disabled{ opacity: .5; cursor: not-allowed; background: transparent; }
.chat-enc .ce-alvo:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: -2px; }
.chat-enc .ce-av .mui-avatar{ width: 36px; height: 36px; font-size: 14px; }
/* um grupo é QUADRADO também aqui (29/09): era o único sítio onde saía redondo */
.chat-enc .ce-alvo.is-grupo .ce-av .mui-avatar{ border-radius: var(--chat-r-m); }
.chat-enc .ce-tx{ display: flex; flex-direction: column; min-width: 0; }
.chat-enc .ce-nome{ font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-enc .ce-sub{ font-size: 12px; color: var(--chat-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-enc .ce-marca{
width: 22px; height: 22px; display: grid; place-items: center; box-sizing: border-box;
border: 2px solid var(--line2, #d2d2d7); border-radius: 50%; color: var(--on-accent, #ffffff);
}
.chat-enc .ce-alvo.is-sel .ce-marca{ background: var(--cyan, #0071e3); border-color: var(--cyan, #0071e3); }
.chat-enc .ce-vazio{ padding: 18px 8px; text-align: center; font-size: 13px; color: var(--chat-tinta-3); }
.chat-enc .ce-erro{ margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--red, #d70015); }
.chat-enc .ce-erro[hidden]{ display: none; }
.chat-enc .ce-pe{ display: flex; align-items: center; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line, #e8e8ed); padding-top: 12px; }
.chat-enc .ce-nota{ flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.35; color: var(--chat-tinta-3); }
.chat-enc .ce-pe button{ min-height: 40px; padding: 8px 16px; border-radius: var(--chat-r-m); font-size: 14px; font-weight: 600; }
.chat-enc .ce-cancelar{ background: var(--chat-cartao); color: var(--chat-tinta); border: 1px solid var(--line2, #d2d2d7); }
.chat-enc .ce-enviar{ background: var(--cyan, #0071e3); color: var(--on-accent, #ffffff); border: 1px solid var(--cyan, #0071e3); }
.chat-enc .ce-enviar:disabled{ opacity: .45; cursor: default; }
.chat-enc .ce-pe button:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; }
@media (max-width: 640px){
#muiSheet.chat-enc-sheet{ align-items: flex-end; padding-bottom: env(safe-area-inset-bottom, 0px); }
#muiSheet.chat-enc-sheet > .mui-sheet{ width: calc(100vw - 16px); margin-bottom: 8px; max-height: calc(100dvh - 24px); }
.chat-enc .ce-pe{ flex-wrap: wrap; }
.chat-enc .ce-nota{ flex-basis: 100%; }
.chat-enc .ce-pe button{ flex: 1; min-height: 44px; }
.chat-enc .ce-alvo{ padding: 9px 8px; }
}
/* ── A FOTO DO GRUPO (Fotos, 24/09) ──────────────────────────────────────────
Na Informação, o botão da câmara assenta no canto do retrato — só para o
dono e os administradores (quem o vê pode mudá-la; quem não pode, não o vê).
No grupo novo, o retrato É o botão: carrega-se nele para pôr a foto. */
.chat-info .ci-foto-caixa{ position: relative; display: inline-flex; }
.chat-info .ci-foto-mudar{
position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; padding: 0;
display: grid; place-items: center; border-radius: 50%; cursor: pointer;
background: var(--cyan, #0071e3); color: var(--on-accent, #ffffff); border: 2px solid var(--chat-moldura);
box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform .12s;
}
.chat-info .ci-foto-mudar:hover{ transform: scale(1.08); }
.chat-info .ci-foto-mudar:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; }
.chat-info .ci-foto img{ border-radius: inherit; }
#muiSheet .cg-retrato{ flex-direction: column; align-items: center; gap: 6px; margin: 2px 0 14px; }
#muiSheet .cg-foto-bt{
position: relative; padding: 0; border: 0; background: transparent; cursor: pointer;
border-radius: var(--chat-r-bolha); transition: transform .12s;
}
#muiSheet .cg-foto-bt:hover{ transform: scale(1.03); }
#muiSheet .cg-foto-bt:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 3px; }
#muiSheet .cg-retrato .cg-foto{
width: 76px; height: 76px; font-size: 28px; border-radius: var(--chat-r-bolha);
display: grid; place-items: center; overflow: hidden;
}
#muiSheet .cg-foto.is-com-foto img{ width: 100%; height: 100%; object-fit: cover; display: block; }
#muiSheet .cg-foto-cam{
position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px;
display: grid; place-items: center; border-radius: 50%;
background: var(--cyan, #0071e3); color: var(--on-accent, #ffffff); border: 2px solid var(--chat-cartao);
box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
#muiSheet .cg-foto-rot{ font-size: var(--chat-fs-previa, 12px); color: var(--cyan, #0071e3); font-weight: 600; }
/* ── O ROSTO DE UM GRUPO SEM FOTO (28/09) ─────────────────────────────────────
O Diogo: «dar a entender que é um grupo, com a foto de 3 membros em
miniatura, como o Messenger». Duas ou três caras redondas, sobrepostas em
diagonal (duas) ou em triângulo (três), cada uma com a foto da pessoa ou a
inicial no tom dela. O anel à volta de cada cara é da cor do fundo onde o
avatar está (`--av-anel`) — é ele que separa as caras onde se sobrepõem. */
/* sem fundo próprio: o que se vê são as caras (o `.mui-avatar` base pinta de
azul; nenhum sítio pinta o de grupo com #id, por isso chega esta força) */
.mui-avatar.is-mosaico{ position: relative; background: transparent; box-shadow: none; overflow: visible; }
.mui-avatar.is-mosaico .av-m{
position: absolute; width: 64%; height: 64%; box-sizing: border-box; overflow: hidden;
display: grid; place-items: center; border-radius: 50%;
font-size: .62em; font-weight: 700; line-height: 1;
/* o tom da pessoa, como no avatar dela (`#chatPane .mui-avatar[class*=" ch-tom-"]`) */
background: color-mix(in srgb, var(--av, var(--chat-av-1)) var(--chat-av-tinta), var(--chat-moldura));
color: var(--av, var(--chat-av-1));
box-shadow: 0 0 0 2px var(--av-anel, var(--chat-moldura, #ffffff));
}
.mui-avatar.is-mosaico .av-m img{
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.mui-avatar.is-mosaico.n2 .av-m:nth-child(1){ top: 0; left: 0; }
.mui-avatar.is-mosaico.n2 .av-m:nth-child(2){ right: 0; bottom: 0; }
.mui-avatar.is-mosaico.n3 .av-m{ width: 56%; height: 56%; font-size: .56em; }
.mui-avatar.is-mosaico.n3 .av-m:nth-child(1){ top: 0; left: 22%; }
.mui-avatar.is-mosaico.n3 .av-m:nth-child(2){ bottom: 0; left: 0; }
.mui-avatar.is-mosaico.n3 .av-m:nth-child(3){ bottom: 0; right: 0; }
/* SEM NENHUMA FOTO (29/09, revisão visual): o mosaico só se acende quando uma
das caras tem foto (`.tem-foto`, do `fotoCarregou`); até lá vê-se o QUADRADO do
grupo com a inicial dele, no tom dele — o mesmo de um grupo à espera da foto.
As caras continuam lá, escondidas, a pedir as fotos. */
.mui-avatar.is-mosaico:not(.tem-foto) .av-m{ visibility: hidden; }
.mui-avatar.is-mosaico .av-g{
position: absolute; inset: 0; box-sizing: border-box;
display: grid; place-items: center; border-radius: inherit;
font-weight: 700; line-height: 1;
background: color-mix(in srgb, var(--av, var(--chat-av-1)) var(--chat-av-tinta), var(--chat-moldura));
color: var(--av, var(--chat-av-1));
}
.mui-avatar.is-mosaico.tem-foto .av-g{ display: none; }
/* a cor do anel segue o fundo de cada sítio */
#chatList .chat-list-row:hover{ --av-anel: var(--chat-hover); }
#chatList .chat-list-row.is-aberta{ --av-anel: var(--chat-sel); }
#chatMessages{ --av-anel: var(--chat-chao); }
.chat-enc .ce-alvo{ --av-anel: var(--chat-cartao); }
.chat-enc .ce-alvo:hover{ --av-anel: var(--chat-hover); }
.chat-enc .ce-alvo.is-sel{ --av-anel: var(--chat-sel); }
/* ── SONDAGENS (28/09) ────────────────────────────────────────────────────────
O Diogo: «criar uma parte de sondagem como tem o Telegram». O cartão vive
dentro da bolha e serve as duas (a minha, azul, e a recebida, cinzenta):
as cores das opções e das barras são por transparência sobre a bolha. */
/* a largura é do CARTÃO e não da bolha (28/09): o `min-width` na bolha perdia
para o do painel (`body:not(.chat-2col) … .chat-message{ min-width: 56px }`,
que tem um `body` a mais na especificidade) e a sondagem encolhia a ~150px no
painel e no telemóvel, com as opções apertadas */
#chatMessages .cm-bloco .chat-message.is-sondagem:not(.a-editar){ min-width: 0; }
#chatMessages .cs-sond{ width: 280px; max-width: 100%; box-sizing: border-box; }
#chatMessages .cs-sond{ display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
#chatMessages .cs-tipo{
display: inline-flex; align-items: center; gap: 5px;
font-size: var(--chat-fs-rotulo, 11px); font-weight: 600; letter-spacing: .02em; color: var(--chat-tinta-2);
}
#chatMessages .cm-bloco.me .cs-tipo{ color: var(--chat-minha-meta); }
#chatMessages .cs-tipo svg{ flex: none; }
#chatMessages .cs-pergunta{ font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
#chatMessages .cs-opcoes{ display: flex; flex-direction: column; gap: 6px; }
#chatMessages .cs-op{
display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: left;
padding: 8px 10px; border-radius: var(--chat-r-m); cursor: pointer; font: inherit; font-size: 14px; color: inherit;
border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
background: color-mix(in srgb, var(--chat-cartao) 55%, transparent);
transition: border-color .12s, background-color .12s;
}
#chatMessages .cs-op:hover{ border-color: var(--cyan, #0071e3); }
#chatMessages .cs-op.is-sel{
border-color: var(--cyan, #0071e3);
background: color-mix(in srgb, var(--cyan, #0071e3) 12%, var(--chat-cartao));
}
#chatMessages .cs-marca{
flex: none; width: 18px; height: 18px; box-sizing: border-box; display: grid; place-items: center;
border-radius: 50%; border: 2px solid color-mix(in srgb, var(--chat-tinta-3) 75%, transparent); color: var(--on-accent, #ffffff);
}
#chatMessages .cs-op.is-multipla .cs-marca{ border-radius: var(--chat-r-s); }
#chatMessages .cs-op.is-sel .cs-marca{ background: var(--cyan, #0071e3); border-color: var(--cyan, #0071e3); }
#chatMessages .cs-votar{
align-self: flex-start; padding: 6px 18px; border: 0; border-radius: 999px; cursor: pointer;
background: var(--cyan, #0071e3); color: var(--on-accent, #ffffff); font: inherit; font-size: 14px; font-weight: 600;
}
#chatMessages .cs-votar:disabled{ opacity: .45; cursor: default; }
#chatMessages .cs-resultados{ display: flex; flex-direction: column; gap: 9px; }
#chatMessages .cs-res-linha{ display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
#chatMessages .cs-pct{ flex: none; min-width: 40px; font-weight: 700; font-variant-numeric: tabular-nums; }
#chatMessages .cs-op-tx{ flex: 1; min-width: 0; overflow-wrap: anywhere; }
#chatMessages .cs-minha{ flex: none; display: inline-grid; color: var(--cyan, #0071e3); }
#chatMessages .cs-barra{
height: 6px; margin-top: 4px; border-radius: 999px; overflow: hidden;
background: color-mix(in srgb, currentColor 12%, transparent);
}
#chatMessages .cs-barra span{
display: block; height: 100%; border-radius: inherit; transition: width .3s ease;
background: color-mix(in srgb, var(--cyan, #0071e3) 50%, transparent);
}
#chatMessages .cs-res.is-minha .cs-barra span,
#chatMessages .cs-res.is-vence .cs-barra span{ background: var(--cyan, #0071e3); }
#chatMessages .cs-res.is-vence .cs-op-tx{ font-weight: 700; }
#chatMessages .cs-pe{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; color: var(--chat-tinta-2); }
#chatMessages .cm-bloco.me .cs-pe{ color: var(--chat-minha-meta); }
#chatMessages .cs-link{
border: 0; background: none; padding: 2px 0; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--cyan, #0071e3);
}
#chatMessages .cs-link:hover{ text-decoration: underline; }
#chatMessages :is(.cs-op, .cs-votar, .cs-link):focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
#chatMessages .cs-barra span, #chatMessages .cs-op{ transition: none; }
}
/* a folha de CRIAR */
.chat-sond-nova .csn-rot{ margin-bottom: -6px; font-size: 12px; font-weight: 700; color: var(--chat-tinta-2); }
.chat-sond-nova :is(.csn-pergunta, .csn-op-in){
width: 100%; box-sizing: border-box; border: 1px solid var(--line2, #d2d2d7); border-radius: var(--chat-r-m);
background: var(--chat-cartao); color: var(--chat-tinta); font: inherit; font-size: 14px;
}
.chat-sond-nova .csn-pergunta{ min-height: 58px; padding: 10px 12px; resize: vertical; line-height: 1.4; }
.chat-sond-nova :is(.csn-pergunta, .csn-op-in):focus{
outline: none; border-color: var(--cyan, #0071e3);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan, #0071e3) 20%, transparent);
}
.chat-sond-nova .csn-ops{ display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; padding: 2px; margin: -2px; }
.chat-sond-nova .csn-op{ position: relative; }
.chat-sond-nova .csn-op-in{ padding: 8px 36px 8px 12px; }
.chat-sond-nova .csn-op-x{
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%;
background: transparent; color: var(--chat-tinta-3); cursor: pointer;
}
.chat-sond-nova .csn-op-x:hover{ background: var(--chat-hover); color: var(--red, #d70015); }
.chat-sond-nova .csn-regras{ display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.chat-sond-nova .csn-sw{ display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.chat-sond-nova .csn-sw input{ flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--cyan, #0071e3); }
.chat-sond-nova .csn-sw-tx{ display: flex; flex-direction: column; gap: 1px; }
.chat-sond-nova .csn-sw-tx > span{ font-size: 14px; font-weight: 600; }
.chat-sond-nova .csn-sw-tx small{ font-size: 12px; color: var(--chat-tinta-3); }
/* a folha de QUEM VOTOU (sondagem pública) */
.chat-sond-votos .csv-pergunta{ margin: 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.chat-sond-votos .csv-pessoa{ cursor: default; }
/* ── ÁUDIO, NOTAS DE VOZ E VÍDEO (28/09) ──────────────────────────────────────
O leitor na bolha é um só desenho para a nota de voz e para um ficheiro de
áudio: ▶ redondo, a barra de posição, o tempo e a velocidade (1× · 1,5× ·
2×). A COR vem de `color`: azul nas recebidas, a tinta da bolha nas minhas —
o ▶, a barra e a pastilha herdam-na. */
#chatMessages .ca-audio,
#chatConvView .chat-gravacao .ca-audio{
--ca-cor: var(--cyan, #0071e3);
--ca-sobre: var(--on-accent, #ffffff);
display: flex; align-items: center; gap: 10px;
width: 290px; max-width: 100%; box-sizing: border-box;
padding: 4px 2px;
color: var(--ca-cor);
}
#chatMessages .cm-bloco.me .ca-audio{ --ca-cor: var(--chat-minha-tinta); --ca-sobre: var(--chat-minha); }
#chatMessages .ca-audio + .ca-audio{ margin-top: 4px; }
#chatMessages .cm-bloco .chat-message:has(.ca-audio):not(.a-editar){ min-width: 0; }
.ca-audio .ca-play{
flex: none; width: 38px; height: 38px; padding: 0;
display: grid; place-items: center;
border: 0; border-radius: 50%;
background: var(--ca-cor); color: var(--ca-sobre);
cursor: pointer;
transition: transform .12s, opacity .12s;
}
.ca-audio .ca-play:active{ transform: scale(.92); }
.ca-audio .ca-play svg{ display: block; }
.ca-audio .ca-i-play svg{ transform: translateX(1px); } /* o triângulo parece descentrado no centro geométrico */
.ca-audio .ca-i-pausa,
.ca-audio.is-a-tocar .ca-i-play{ display: none; }
.ca-audio.is-a-tocar .ca-i-pausa{ display: block; }
.ca-audio.is-a-carregar .ca-play{ opacity: .6; animation: caPulsa 1s ease-in-out infinite alternate; }
@keyframes caPulsa{ to{ opacity: .35; } }
@media (prefers-reduced-motion: reduce){ .ca-audio.is-a-carregar .ca-play{ animation: none; } }
.ca-audio .ca-audio-meio{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ca-audio .ca-audio-nome{
font-size: 12px; font-weight: 600; color: var(--chat-tinta);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-audio .ca-audio-rot{
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--chat-fs-hora); font-weight: 600; opacity: .8;
}
#chatMessages .cm-bloco.me .ca-audio .ca-audio-nome{ color: var(--chat-minha-tinta); }
/* a BARRA: fina, com o que já se ouviu na cor do leitor */
.ca-audio .ca-seek{
-webkit-appearance: none; appearance: none;
width: 100%; height: 14px; margin: 0; padding: 0;
background: transparent; cursor: pointer;
}
.ca-audio .ca-seek::-webkit-slider-runnable-track{
height: 4px; border-radius: 999px;
background: linear-gradient(to right, var(--ca-cor) var(--p, 0%), color-mix(in srgb, var(--ca-cor) 24%, transparent) var(--p, 0%));
}
.ca-audio .ca-seek::-moz-range-track{ height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ca-cor) 24%, transparent); }
.ca-audio .ca-seek::-moz-range-progress{ height: 4px; border-radius: 999px; background: var(--ca-cor); }
.ca-audio .ca-seek::-webkit-slider-thumb{
-webkit-appearance: none; appearance: none;
width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%;
background: var(--ca-cor);
}
.ca-audio .ca-seek::-moz-range-thumb{ width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ca-cor); }
.ca-audio .ca-seek:focus-visible{ outline: 2px solid var(--ca-cor); outline-offset: 2px; border-radius: var(--chat-r-s); }
.ca-audio .ca-tempo{
font-size: var(--chat-fs-hora); font-variant-numeric: tabular-nums;
color: var(--chat-tinta-3);
}
#chatMessages .cm-bloco.me .ca-audio .ca-tempo{ color: var(--chat-minha-meta); }
/* a VELOCIDADE: uma pastilha que dá a volta 1× → 1,5× → 2× */
.ca-audio .ca-vel{
flex: none; min-width: 40px; height: 24px; padding: 0 7px;
border: 1px solid color-mix(in srgb, var(--ca-cor) 38%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--ca-cor) 10%, transparent);
color: var(--ca-cor);
font: inherit; font-size: var(--chat-fs-hora); font-weight: 700; font-variant-numeric: tabular-nums;
cursor: pointer;
}
.ca-audio .ca-vel:hover{ background: color-mix(in srgb, var(--ca-cor) 20%, transparent); }
.ca-audio :is(.ca-play, .ca-vel):focus-visible{ outline: 2px solid var(--ca-cor); outline-offset: 2px; }
/* A FORMA DE ONDA da nota de voz (29/09, revisão visual): barras do próprio áudio
(`picosDaOnda`), o que já se ouviu na cor do leitor (`--p`), e o tempo na mesma
linha. A barra de posição fica por cima, invisível (arrasta-se e o teclado usa-a);
sem onda — o browser não a soube calcular — volta a barra fina. */
.ca-audio.tem-onda .ca-audio-meio{ flex-direction: row; align-items: center; gap: 8px; }
.ca-audio .ca-onda-caixa{ position: relative; flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; }
.ca-audio .ca-onda{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* o intervalo e a barra ENCOLHEM com a caixa (29/09, verificação antes de mandar):
36 barras de 2px com 2px entre elas pediam 142px, e no telemóvel a onda
passava por baixo do «0:07». O `overflow` fica de rede. */
.ca-audio .ca-onda > span{ position: absolute; inset: 0; display: flex; align-items: center; column-gap: min(2px, 1.4%); }
.ca-audio .ca-onda i{ flex: 1; min-width: 1px; border-radius: 2px; background: color-mix(in srgb, var(--ca-cor) 30%, transparent); }
.ca-audio .ca-onda .ca-onda-feita{ clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.ca-audio .ca-onda .ca-onda-feita i{ background: var(--ca-cor); }
.ca-audio .ca-onda.is-espera i{ opacity: .55; }
.ca-audio .ca-onda-caixa:has(.ca-onda) .ca-seek{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.ca-audio .ca-onda-caixa:has(.ca-seek:focus-visible){ outline: 2px solid var(--ca-cor); outline-offset: 2px; border-radius: var(--chat-r-s); }
.ca-audio.tem-onda .ca-tempo{ flex: none; min-width: 34px; text-align: right; }
/* o VÍDEO na bolha: um cartão escuro com o ▶ (e a primeira imagem, depois de
o ver); abre-se no visor */
#chatMessages .chat-anexo-video{
position: relative;
/* largura FIXA, como a da foto: com legenda, é o cartão que dá a largura à
bolha — em % encolhia com ela e a bolha ficava uma tira */
width: 280px; aspect-ratio: 16 / 9; max-width: 100%;
border-radius: calc(var(--chat-r-bolha) - 3px);
background: var(--chat-video-chao) center / cover no-repeat;
color: var(--chat-sobre-veu);
overflow: hidden; cursor: pointer;
}
#chatMessages .chat-anexo-video + .chat-anexo-video{ margin-top: 4px; }
body:not(.chat-2col) #chatMessages .chat-anexo-video{ width: 240px; }
/* `.cm-bloco` no seletor: sem ele o `padding` do painel (que tem um `body` a
mais na especificidade) ganhava e o cartão ficava com margem a mais */
#chatMessages .cm-bloco .chat-message:has(.chat-anexo-video):not(.a-editar){ padding: 3px; }
#chatMessages .chat-message:has(.chat-anexo-video) .chat-anexos{ margin-top: 0; }
#chatMessages .chat-message:has(.chat-anexo-video) .cm-corpo:not(:empty){ display: block; padding: 5px 8px 0; }
#chatMessages .chat-message:has(.chat-anexo-video) :is(.cm-corpo:not(:empty), .cm-citacao){ width: 0; min-width: 100%; box-sizing: border-box; }
#chatMessages .chat-message:has(.chat-anexo-video) .cm-meta{ padding: 0 8px 4px; }
#chatMessages .chat-anexo-video .cav-play{
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 48px; height: 48px; display: grid; place-items: center;
border-radius: 50%;
background: var(--chat-veu);
transition: transform .12s, background .12s;
}
#chatMessages .chat-anexo-video .cav-play svg{ transform: translateX(2px); }
#chatMessages .chat-anexo-video:hover .cav-play{ transform: translate(-50%, -50%) scale(1.06); background: color-mix(in srgb, var(--chat-veu) 100%, var(--chat-video-chao) 30%); }
#chatMessages .chat-anexo-video:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; }
#chatMessages .chat-anexo-video .cav-rodape{
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; align-items: baseline; gap: 8px;
padding: 16px 10px 7px;
background: linear-gradient(to top, var(--chat-veu), transparent);
font-size: var(--chat-fs-hora);
}
#chatMessages .chat-anexo-video .cav-nome{ flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatMessages .chat-anexo-video .cav-tam{ flex: none; opacity: .8; font-variant-numeric: tabular-nums; }
/* o VISOR do vídeo: o chão escuro e as velocidades no cabeçalho */
.chat-visor.is-video .cv-corpo-video{ background: var(--chat-video-chao); }
.chat-visor.is-video .cv-corpo-video .cv-espera{ color: var(--chat-sobre-veu); opacity: .75; }
.chat-visor.is-video .cv-video{ display: block; max-width: 100%; max-height: 100%; background: var(--chat-video-chao); }
/* um ÁUDIO aberto de fora da bolha: uma caixa baixa, só o leitor */
.chat-visor.is-video .cv-caixa-video.is-som{ height: auto; width: min(560px, 100%); }
.chat-visor.is-video .cv-caixa-video.is-som .cv-corpo-video{ flex: none; padding: 28px 20px; }
.chat-visor.is-video .cv-audio{ display: block; width: 100%; }
.chat-visor.is-video .cvv-vel{
flex: none; display: inline-flex; gap: 2px; padding: 2px;
border: 1px solid var(--line2, #d2d2d7); border-radius: 999px;
}
.chat-visor.is-video .cvv-v{
min-width: 42px; height: 26px; padding: 0 8px;
border: 0; border-radius: 999px;
background: transparent; color: var(--text2, #515154);
font: inherit; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
cursor: pointer;
}
.chat-visor.is-video .cvv-v:hover{ color: var(--text, #1d1d1f); background: var(--bg3, #f0f0f3); }
.chat-visor.is-video .cvv-v.on{ background: var(--cyan, #0071e3); color: var(--on-accent, #ffffff); }
.chat-visor.is-video .cvv-v:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 1px; }
/* no TELEMÓVEL o cabeçalho do vídeo arruma-se em DUAS linhas (28/09): numa só,
o nome encolhia até «v…», o tamanho partia-se em três e o ✕ ficava entre o
«Descarregar» e as velocidades. Em cima o que é (e o ✕, no canto de sempre);
em baixo o que se lhe faz. */
@media (max-width: 560px){
.chat-visor.is-video .cv-cab{ flex-wrap: wrap; row-gap: 10px; }
.chat-visor.is-video .cv-tx{ flex: 1 1 calc(100% - 96px); }
.chat-visor.is-video .cv-x{ order: 2; }
.chat-visor.is-video .cvv-vel{ order: 3; }
.chat-visor.is-video .cv-baixar{ order: 4; margin-left: auto; }
}
/* a GRAVAÇÃO: a barra toma o lugar da caixa de escrever enquanto dura (o
texto a meio fica lá, escondido, e volta quando a nota sai ou vai fora) */
#chatConvView .chat-compose.a-gravar > :not(.chat-gravacao){ display: none; }
#chatConvView .chat-gravacao{
display: flex; align-items: center; gap: 8px;
min-height: 48px; padding: 2px 0;
position: relative;
}
#chatConvView .chat-gravacao .cg-meio{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
#chatConvView .chat-gravacao .cg-meio > .ca-audio{ width: 100%; }
#chatConvView .chat-gravacao .cg-bt{
flex: none; width: 36px; height: 36px; padding: 0;
display: grid; place-items: center;
border: 0; border-radius: 50%;
background: transparent; color: var(--chat-tinta-2);
cursor: pointer;
transition: background .12s, color .12s, transform .12s;
}
#chatConvView .chat-gravacao .cg-bt svg{ display: block; }
#chatConvView .chat-gravacao .cg-bt:hover{ background: var(--chat-hover); color: var(--chat-tinta); }
#chatConvView .chat-gravacao .cg-lixo:hover{ color: var(--red, #d70015); }
#chatConvView .chat-gravacao .cg-parar{ color: var(--red, #d70015); }
#chatConvView .chat-gravacao .cg-enviar{ background: var(--cyan, #0071e3); color: var(--on-accent, #ffffff); }
#chatConvView .chat-gravacao .cg-enviar:hover{ background: color-mix(in srgb, var(--cyan, #0071e3) 88%, var(--text, #1d1d1f)); color: var(--on-accent, #ffffff); }
#chatConvView .chat-gravacao .cg-enviar:active{ transform: scale(.92); }
#chatConvView .chat-gravacao .cg-enviar:disabled{ background: var(--chat-hover); color: var(--chat-tinta-3); cursor: default; transform: none; }
#chatConvView .chat-gravacao .cg-bt:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; }
#chatConvView .chat-gravacao .cg-estado{ font-size: 13px; color: var(--chat-tinta-3); }
#chatConvView .chat-gravacao .cg-ponto{
flex: none; width: 10px; height: 10px; border-radius: 50%;
background: var(--red, #d70015);
animation: cgPisca 1.1s ease-in-out infinite;
}
@keyframes cgPisca{ 50%{ opacity: .25; } }
#chatConvView .chat-gravacao .cg-tempo{
flex: none; min-width: 38px;
font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--chat-tinta);
}
/* o NÍVEL: barras que sobem com a voz — prova de que o microfone ouve */
#chatConvView .chat-gravacao .cg-niveis{
flex: 1; min-width: 0; height: 26px;
display: flex; align-items: center; justify-content: flex-end; gap: 2px;
overflow: hidden;
}
#chatConvView .chat-gravacao .cg-niveis span{
flex: none; width: 3px; height: 100%;
border-radius: 999px;
background: color-mix(in srgb, var(--cyan, #0071e3) 70%, transparent);
transform: scaleY(.12);
transition: transform .08s linear;
}
#chatConvView .chat-gravacao .cg-a-enviar{
position: absolute; right: 48px; top: 50%; transform: translateY(-50%);
font-size: var(--chat-fs-hora); color: var(--chat-tinta-3);
}
@media (prefers-reduced-motion: reduce){
#chatConvView .chat-gravacao .cg-ponto{ animation: none; }
#chatConvView .chat-gravacao .cg-niveis span{ transition: none; }
}
/* ── O CABEÇALHO DA CONVERSA NO PAINEL CABE (28/09) ────────────────────────────
No painel de 400px leva seis botões (⌕ ⋮ | ⤢ pin ✕) e o nome ficava com 115px:
«Grupo · 2 participantes» cortava. Com rato os botões vão a 30px e as folgas
encolhem — 12px que o nome recebe; no toque ficam os alvos de sempre. */
@media (hover: hover) and (pointer: fine){
body:not(.chat-2col) #chatBackBar :is(.cbb-ico, .chat-back-btn){ width: 30px; min-width: 30px; }
body:not(.chat-2col) #chatConvView .chat-back-bar{ padding-right: 8px; }
body:not(.chat-2col) #chatBackBar .cbb-sep{ margin: 0 2px; }
}
/* ── os AVISOS em ecrã inteiro (28/09) ───────────────────────────────────────
O chat ocupa o ecrã e não há para onde os afastar: no canto de baixo
caíam em cima da caixa de escrever (ou da Informação). Sobem para debaixo do
cabeçalho — tapam mensagens, que rolam, e não o sítio onde se escreve; o
mesmo que o telemóvel já fazia. */
@media (min-width: 921px){
body.rp-open.chat-w-inteira .toast-stack{ bottom: auto; top: calc(var(--h-topbar, 44px) + var(--chat-cab-h) + 12px); }
}
/* ── REVISÃO DE PRODUTO (28/09) ───────────────────────────────────────────────
O que a revisão a três (lógica, visual, servidor) e o ensaio a dois nos
browsers encontraram, e que é de CSS. */
/* o «VISTA» a azul nas MINHAS mensagens — que são as únicas com recibo. A regra
de cima (`.cm-interna .cm-meta .cm-recibo-vista`) tinha menos uma classe do
que a tinta das minhas (`.cm-bloco.me .cm-meta .cm-recibo`) e perdia sempre:
entregue e vista eram o mesmo ✓✓ cinzento, com o negrito como única pista */
#chatMessages .cm-bloco.me.cm-interna .cm-meta .cm-recibo-vista{
color: color-mix(in srgb, var(--cyan, #0071e3) 78%, var(--chat-tinta));
}
:root[data-theme="dark"] #chatMessages .cm-bloco.me.cm-interna .cm-meta .cm-recibo-vista{
color: color-mix(in srgb, var(--cyan, #0a84ff) 62%, var(--chat-tinta));
}
/* a folha de pedir um texto (o nome e a descrição do grupo) — o desenho das
confirmações, com o campo */
.chat-pedir-texto .cpt-rot{ display: block; margin: 16px 0 6px; font-size: 12px; font-weight: 700; color: var(--chat-tinta-2); }
.chat-pedir-texto .cpt-in{
width: 100%; box-sizing: border-box; padding: 10px 12px; margin: 0 0 20px;
border: 1px solid var(--line2, #d2d2d7); border-radius: var(--chat-r-m);
background: var(--chat-cartao); color: var(--chat-tinta); font: inherit; font-size: 14px;
}
.chat-pedir-texto .cpt-in:focus{ outline: none; border-color: var(--cyan, #0071e3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan, #0071e3) 20%, transparent); }
.chat-pedir-texto .chat-apagar-erro{ margin: -8px 0 16px; }
.chat-apagar button.chat-apagar-confirmar:disabled{ cursor: default; }
/* os nomes compridos sem espaços partem, em vez de esticar a Informação e o
retrato do início da conversa */
.chat-info .ci-nome,
#chatMessages .cm-inicio-t{ overflow-wrap: anywhere; }
/* a pílula de ações das conversas do TEAMS no escuro: o chão e a pílula eram a
mesma cor (`--bg`), e só o contorno de 1px a separava */
#chatMessages .cm-ferram{ background: var(--chat-cartao); box-shadow: var(--chat-sombra-leve); }
/* o foco das pastilhas do encaminhar igual ao dos alvos vizinhos */
.chat-enc .ce-pastilha:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; }
/* a escala tipográfica nas secções novas (11·12·14·15·17) */
.chat-enc .ce-previa-tx{ font-size: 14px; }
.chat-enc :is(.ce-pastilha, .ce-erro, .ce-nota, .ce-vazio){ font-size: 12px; }
#chatConvView .chat-gravacao .cg-estado{ font-size: 12px; }
/* ── o TOQUE: alvos de 40–44px onde o dedo carrega ─────────────────────────
O Enviar — o gesto principal do chat — tinha 30px no telemóvel, e os
ícones da caixa, o ▶ do áudio, os botões da gravação e o «Votar» também
ficavam abaixo do que um dedo acerta. Com rato ficam como estão. */
@media (pointer: coarse){
body #chatConvView .chat-compose .chat-enviar{ width: 40px; min-width: 40px; height: 40px; }
body #chatConvView .chat-compose-acoes .chat-ac-ico{ width: 40px; min-width: 40px; height: 40px; }
.ca-audio .ca-play{ width: 44px; height: 44px; }
.ca-audio .ca-vel{ height: 32px; min-width: 46px; }
body #chatConvView .chat-gravacao .cg-bt{ width: 44px; height: 44px; }
#chatMessages .cs-votar{ min-height: 40px; padding: 8px 20px; }
#chatMessages .cs-op{ min-height: 44px; }
/* o toque longo abre as opções da conversa: sem isto o browser selecionava
o texto da linha ou abria o menu dele por cima */
#chatList .chat-list-row[data-cid]{ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
/* o VISOR com os ícones do conjunto (28/09): o ⤓ e o ✕ eram glifos de texto */
.chat-visor .cv-ico{ display: grid; place-items: center; color: var(--chat-tinta-2); }
.chat-visor .cv-baixar{ display: inline-flex; align-items: center; gap: 6px; }
.chat-visor .cv-x{ display: grid; place-items: center; width: 34px; height: 34px; padding: 0; }
/* os ACHADOS dentro da conversa ficam em cima, com a contagem (28/09) */
body:not(.chat-sem-aberta) #chatMessages > .chat-achados-conversa:first-child{ margin-top: 0; }
#chatMessages .chat-achados-conversa{ display: flex; flex-direction: column; }
#chatMessages .chat-achados-conversa .cac-cab{
padding: 2px 10px 8px; font-size: 12px; font-weight: 700; color: var(--chat-tinta-2);
}
#chatMessages .chat-achados-conversa .ca-linha{ border-radius: var(--chat-r-m); }
#chatMessages .chat-achados-conversa .cp-mark{
background: var(--sel, rgba(0, 113, 227, .16)); color: inherit; border-radius: var(--chat-r-s); padding: 0 2px; font-weight: 600;
}
/* com a tira «A responder a» aberta, as MENÇÕES sobem para cima DELA (28/09):
o popup ancorava-se à caixa do texto e tapava a tira que diz a quem se está
a responder */
#chatConvView .chat-compose:has(> .chat-reply-banner){ position: relative; }
#chatConvView .chat-compose:has(> .chat-reply-banner) .chat-compose-editor{ position: static; }
/* a procura na conversa tinha DOIS ✕ lado a lado (28/09): o do próprio campo
(type=search — só apaga o texto) e o que fecha a procura. Fica o que fecha:
fechar também limpa, e o Esc faz o mesmo */
#chatBuscaConversa input::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; display: none; }
#chatBuscaConversa button{ display: grid; place-items: center; }
/* o GRUPO NOVO com uma pessoa só (28/09): é uma conversa a dois — o aviso e o
caminho para ela, por cima do «Seguinte» (desligado até haver duas) */
.cg-a-dois{
margin-top: 12px; padding: 10px 12px; border-radius: var(--chat-r-m);
background: var(--chat-bolha); display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.cg-a-dois[hidden]{ display: none; }
.cg-a-dois .cad-tx{ margin: 0; font-size: 13px; line-height: 1.4; color: var(--chat-tinta-2); }
.cg-a-dois .cad-bt{
border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer;
background: var(--cyan, #0071e3); color: var(--on-accent, #ffffff); font: inherit; font-size: 13px; font-weight: 600;
}
.cg-a-dois .cad-bt:hover{ filter: brightness(1.06); }
.cg-a-dois .cad-bt:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; }
/* ── REVISÃO VISUAL, os seguintes (29/09) ─────────────────────────────────────── */
/* 9 · as urgentes: o «Como funciona» é uma ligação discreta; «nada à tua espera» diz-se */
#chatList .chat-urg-como{
margin-left: 4px; padding: 0; border: 0; background: transparent; cursor: pointer;
font: inherit; color: var(--cyan, #0071e3); text-decoration: underline; text-underline-offset: 2px;
}
#chatList .chat-urg-como:focus-visible{ outline: 2px solid var(--cyan, #0071e3); outline-offset: 2px; border-radius: 3px; }
#chatList .chat-urg-regra{ display: block; margin-top: 4px; }
#chatList .chat-urg-limpo{
display: flex; align-items: center; gap: 6px; padding: 10px 12px;
font-size: var(--chat-fs-previa); color: var(--chat-tinta-2);
}
#chatList .chat-urg-limpo svg{ color: var(--green, #1d8a45); }
/* 10 · os controlos da JANELA (⤢ · pin · ✕) mais discretos do que os da conversa (⌕ ⋮):
ficam os três (o Diogo pediu-os a 28/09), e o nome ganha a atenção */
body:not(.chat-2col) #chatBackBar :is(.cbb-largura, .cbb-pin, .cbb-fechar):not(:hover):not(.on){ color: var(--chat-tinta-3); }
body:not(.chat-2col) #chatBackBar :is(.cbb-largura, .cbb-pin, .cbb-fechar) svg{ width: 16px; height: 16px; }
/* P4 · uma foto mais pequena do que a caixa: no tamanho dela, numa caixa à medida */
body #chatMessages .chat-anexo-foto.is-pequena{
width: auto; min-width: 64px; min-height: 64px; aspect-ratio: auto;
display: inline-grid; place-items: center; overflow: hidden;
}
body #chatMessages .chat-anexo-foto.is-pequena img{ width: auto; height: auto; max-width: 100%; object-fit: none; }
body #chatMessages .chat-anexo-foto.is-pequena::after{ content: none; }
/* …e a LEGENDA não se parte à largura dela (29/09, verificação antes de mandar):
com «é a foto que dá a largura à bolha», uma foto de 64px dava uma bolha de 70px
e uma palavra por linha. Quando as fotos são todas pequenas, a legenda volta à
largura do texto e a foto fica ao canto, como uma miniatura. */
body #chatMessages .chat-message:has(.chat-anexo-foto.is-pequena):not(:has(.chat-anexo-foto:not(.is-pequena))) :is(.cm-corpo:not(:empty), .cm-citacao){ width: auto; min-width: 0; }
/* sem legenda, a pastilha da hora não cabe por cima de 64px: desce para baixo da
foto, a mesma pastilha, como a de um autocolante */
body #chatMessages .cm-bloco .chat-message.so-fotos:has(.chat-anexo-foto.is-pequena):not(:has(.chat-anexo-foto:not(.is-pequena))) .cm-meta{ position: static; align-self: flex-end; }
body #chatMessages .cm-bloco.me .chat-message.so-fotos:has(.chat-anexo-foto.is-pequena) .chat-anexos{ justify-content: flex-end; }