/* ORBIT Empresa · paginas/chat.css — área B: o Chat tipo Claude Code.

   Só o que é da página do Chat (prefixo ch-); os componentes são os do sistema visual (o-*, no visual.css), sem os
   redefinir. A conversa rola com a página (o dedo rola a página, como no resto do OS): o cabeçalho da conversa fica preso
   por baixo do da casa e a caixa de escrever por baixo, por cima da barra do telemóvel ou do teclado (o --ch-topo e o
   --ch-fundo medem-se no chat.js, pelo visualViewport). Escuro sempre, nas fichas da casa; nada para o lado (o código e as
   tabelas rolam dentro da caixa deles); 44 px no toque e 16 px nas mensagens e nos campos. */

/* ── a moldura ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.ch { min-width: 0; }
.ch-cabeca-pagina { margin-bottom: var(--e-5); }   /* as medidas do cabeçalho da casca (.casca-cabeca) */
.ch-grelha { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--e-4); align-items: start; min-width: 0; }
.ch--a-largar .ch-painel { outline: 2px dashed var(--accent-texto); outline-offset: -2px; }

/* a gaveta (no computador, a coluna da esquerda; no telemóvel, uma folha). Na conversa do terminal (que rola com a
   página), presa onde o cabeçalho da conversa se prende e, ao abrir, até onde o painel acaba (as duas colunas com a
   mesma altura); no chat ao vivo, a moldura fixa (lá em baixo) */
.ch-gaveta {
  position: sticky; top: var(--ch-topo, var(--topo-alt));
  display: flex; flex-direction: column; gap: var(--e-3); min-width: 0;
  min-height: calc(100vh - var(--ch-grelha-topo, 140px) - var(--ch-fundo-pagina, 32px));
  min-height: calc(100dvh - var(--ch-grelha-topo, 140px) - var(--ch-fundo-pagina, 32px));
  max-height: calc(100vh - var(--ch-topo, var(--topo-alt)) - var(--e-4)); max-height: calc(100dvh - var(--ch-topo, var(--topo-alt)) - var(--e-4));
  overflow-y: auto; overscroll-behavior: contain; padding: var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--r-janela); background: var(--painel);
}
.ch-gaveta-corpo { display: flex; flex-direction: column; gap: var(--e-3); }
/* a gaveta (e a folha dela) rola inteira: nada lá dentro encolhe. As etiquetas, uma fila que rola para o lado, ficavam
   com 4 px de altura quando havia muitas conversas (com overflow, o mínimo automático de um item flex é zero) */
.ch-gaveta > *, .ch-gaveta-corpo > * { flex-shrink: 0; }
.ch-gaveta .o-grupo-rotulo, .ch-gaveta-corpo .o-grupo-rotulo { margin: var(--e-2) 0 var(--e-1); }
.ch-grupo-n { margin-left: auto; font-variant-numeric: tabular-nums; }
.ch-grupo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-gaveta-itens { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
/* a linha das conversas partilhadas (o interruptor está em Configurações › Entrada, 18/10) */
.ch-partilha { line-height: 1.45; }
/* a pesquisa (ronda 2, ponto 1): um só campo, com os filtros escolhidos lá dentro (o chip das etiquetas, com o ×), que
   partem em linhas e nunca vão para o lado; as sugestões abrem por baixo, por cima da lista (que não se mexe) */
.ch-procura { position: relative; z-index: 3; min-width: 0; }
.ch-procura-campo {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0;
  min-height: var(--ctl-campo); padding: var(--e-1) var(--e-2) var(--e-1) var(--e-10); cursor: text;
  border: 1px solid var(--linha-campo); border-radius: var(--r); background: var(--painel-2); color: var(--ink);
}
.ch-procura-campo:focus-within { border-color: var(--accent-texto); box-shadow: 0 0 0 1px var(--accent-texto), 0 0 0 4px var(--accent-fundo); }
/* a lupa fica presa à primeira linha (com os chips em várias linhas, ficava sozinha numa linha por cima deles): ao
   centro da altura de uma linha do campo, como o .o-procurar */
.ch-procura-campo > .o-ic { position: absolute; left: var(--e-3); top: calc((var(--ctl-campo) - 2px - 16px) / 2); color: var(--ink-3); pointer-events: none; }
/* (com chips, o texto não fica num canto de 6 letras: sem 7rem ao lado do último chip, desce para uma linha dele, com o
   «Procurar ou filtrar» inteiro) */
.ch-procura-texto {
  flex: 1 1 7rem; width: 7rem; min-width: min(100%, 7rem); min-height: calc(var(--ctl-campo) - 10px); margin: 0; padding: 0;
  border: 0; border-radius: 0; outline: none; background: none; color: var(--ink); font: 400 var(--t-14)/1.4 var(--sans);
  -webkit-appearance: none; appearance: none;
}
.ch-procura-texto::placeholder { color: var(--ink-3); opacity: 1; }
.ch-procura-texto::-webkit-search-decoration { -webkit-appearance: none; }
.ch-procura-texto::-webkit-search-cancel-button { -webkit-appearance: none; }
/* o chip de um filtro: um nome comprido acaba em «…» e o × fica (no toque, os 44 px vêm do .o-anexo) */
.ch-filtro-escolhido { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.ch-filtro-escolhido > button { flex: none; }
.ch-sugestoes {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1;
  max-height: min(50vh, 320px); overflow-y: auto; overscroll-behavior: contain; padding: var(--e-1);
  border: 1px solid var(--linha-2); border-radius: var(--r-caixa); background: var(--painel); box-shadow: var(--sombra-flutua);
}
.ch-sugestoes-grupo { padding: var(--e-2) var(--e-2) var(--e-1); color: var(--ink-3); font: 600 var(--t-11)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ch-sugestao {
  display: flex; align-items: center; gap: var(--e-2); min-width: 0; min-height: 36px; padding: 0 var(--e-2);
  border-radius: var(--r); color: var(--ink-2); font: 400 var(--t-13)/1.3 var(--sans); cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.ch-sugestao:hover, .ch-sugestao[aria-selected="true"] { background: var(--hover); color: var(--ink); }
/* a marcada pelo teclado (↓ ↑) leva também o traço da casa: só o fundo, a 5 %, não se via */
.ch-sugestao[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--accent-texto); }
.ch-sugestao > .o-ic { flex: none; color: var(--ink-3); }
.ch-sugestao > .o-ponto { margin: 0 4px; }   /* o ponto (8 px) na caixa de um ícone (16 px) */
.ch-sugestao-rotulo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-sugestao-n { flex: none; margin-left: auto; color: var(--ink-3); font: 500 var(--t-12)/1 var(--mono); font-variant-numeric: tabular-nums; }
.ch-procura-resumo { display: flex; align-items: center; gap: var(--e-2); min-width: 0; margin: 0; color: var(--ink-3); font-size: var(--t-12); line-height: 1.4; white-space: nowrap; }
.ch-procura-resumo > .ch-procura-limpar { flex: none; }
.ch-vazio-lista { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.ch-conversa-linha { min-width: 0; }
.ch-conversa {
  display: flex; align-items: flex-start; gap: var(--e-2); width: 100%; min-width: 0; min-height: 48px; padding: var(--e-2);
  border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--ink-2); text-align: left; font: inherit;
}
.ch-conversa:hover { background: var(--hover); color: var(--ink); }
.ch-conversa[aria-current="true"] { border-color: var(--accent-linha); background: var(--accent-fundo); color: var(--ink); }
.ch-conversa[aria-current="true"] .o-linha-meta { color: var(--ink-2); }
/* o ponto fica ao centro da primeira linha (o título, 13 px × 1,5) */
.ch-conversa > .o-ponto { margin-top: calc((1.5 * var(--t-13) - 8px) / 2); }
.ch-conversa-titulo { display: flex; align-items: center; gap: var(--e-2); min-width: 0; color: var(--ink); font: 600 var(--t-13)/1.5 var(--sans); }
.ch-conversa-titulo > .o-elipse { flex: 1 1 auto; }
.ch-conversa-meta { display: flex; align-items: center; gap: var(--e-2); min-width: 0; margin-top: 2px; }
.ch-conversa-meta > .o-pill { flex: none; }
.ch-conversa-meta > .o-linha-meta { flex: 1 1 auto; }
.ch-conversa-tags { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: 2px; }
.ch-mais-antigas { margin-top: var(--e-1); }
.ch-vazio-lista { padding: var(--e-2); }
.ch-contas { margin-top: auto; border: 1px solid var(--linha); border-radius: var(--r); }
.ch-contas .o-linha-fim { font: 500 var(--t-12)/1.3 var(--mono); }

/* ── o painel (22/10): o filtro por cima, dois a dois, e as secções bem separadas (Construtor, Equipa, WeSolve, Agentes) ── */
/* o filtro: quatro botões de rádio numa caixa só, dois por linha (cabem na gaveta de 236 px e na folha a 320 px, sem
   nada para o lado); o escolhido com o fundo e a letra da casa; o número de cada um à direita, a amarelo quando há
   conversas desse papel à tua espera */
.ch-mostrar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-1); min-width: 0; padding: var(--e-1);
  border: 1px solid var(--linha); border-radius: var(--r-caixa); background: var(--painel-2);
}
.ch-mostrar-op {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-width: 0; min-height: var(--ctl);
  padding: 0 var(--e-2); border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--ink-2);
  font: 500 var(--t-13)/1 var(--sans); text-align: left; cursor: pointer;
}
.ch-mostrar-op:hover { background: var(--hover); color: var(--ink); }
/* cinco escolhas (22/10): «Tudo» numa linha inteira e as outras quatro dois a dois */
.ch-mostrar-op[data-mostrar="tudo"] { grid-column: 1 / -1; }
.ch-mostrar-op:focus-visible { outline-offset: -2px; }
.ch-mostrar-op[aria-checked="true"] { border-color: var(--accent-linha); background: var(--accent-fundo); color: var(--accent-texto); }
.ch-mostrar-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.ch-mostrar-n { flex: none; }
.ch-mostrar-n:not(.o-conta) { color: var(--ink-3); font: 500 var(--t-12)/1 var(--mono); font-variant-numeric: tabular-nums; }
.ch-mostrar-op[aria-checked="true"] > .ch-mostrar-n:not(.o-conta) { color: var(--accent-texto); }
/* as secções: um traço e espaço entre elas; o cabeçalho com o ícone da casa, o nome, quantas e o «+» da conversa nova */
.ch-seccao { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-seccao + .ch-seccao { margin-top: var(--e-2); padding-top: var(--e-3); border-top: 1px solid var(--linha); }
.ch-seccao-cabeca { display: flex; align-items: center; gap: var(--e-2); min-width: 0; min-height: var(--ctl); }
.ch-seccao-titulo { display: flex; flex: 1 1 auto; align-items: center; gap: var(--e-2); min-width: 0; margin: 0; color: var(--ink); font: 600 var(--t-14)/1.3 var(--sans); }
.ch-seccao-titulo > .o-ic { flex: none; color: var(--accent-texto); }
.ch-seccao-titulo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-seccao-n { flex: none; color: var(--ink-3); font: 500 var(--t-12)/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-seccao-nova { flex: none; }
/* a nota de quando falta a conta de um papel: o ícone fica com a primeira linha (a nota pode partir em duas) */
.ch-seccao-nota { display: flex; align-items: flex-start; gap: var(--e-2); margin-bottom: var(--e-1); padding: var(--e-2); border-radius: var(--r); background: var(--painel-2); color: var(--ink-2); }
.ch-seccao-nota-ic { display: grid; flex: none; place-items: center; height: 1.45em; color: var(--ink-3); }
.ch-seccao-vazia { padding: var(--e-1) 0 var(--e-2); }
/* o arquivo da WeSolve (22/10): fechado por omissão, com quantas tem; dentro, as conversas das ordens que acabaram */
.ch-arquivo { margin-top: var(--e-2); }
.ch-arquivo-corpo { display: flex; flex-direction: column; gap: 2px; padding-left: var(--e-1); padding-right: var(--e-1); }
.ch-arquivo-dica { margin-bottom: var(--e-1); }
.ch-conversa-meta > .ch-ag-papel { flex: none; min-height: 16px; padding: 0 var(--e-1); }

/* ── a conversa nova: a pergunta «Para quê» à vista, por cima das Opções (22/10) ──────────────────────────────────── */
.ch-papel-nova { display: flex; flex-direction: column; gap: var(--e-2); width: 100%; max-width: 640px; align-self: center; }
.ch-papel { flex-wrap: nowrap; }
.ch-papel-op { justify-content: center; }
.ch-papel-op > .o-ic { flex: none; }

/* ── o painel da conversa ──────────────────────────────────────────────────────────────────────────────────────── */
/* enche o ecrã até ao fundo da página (sem passar: a página não rola só por causa dele). O painel corta o que lhe sai dos
   cantos (overflow: clip, que não estraga o preso do cabeçalho e da caixa): o cabeçalho e a caixa presos ficam retos e
   os cantos redondos são os do painel (antes, os cantos do cabeçalho preso deixavam dois entalhes contra o contorno) */
.ch-painel {
  display: flex; flex-direction: column; min-width: 0;
  min-height: calc(100vh - var(--ch-grelha-topo, 140px) - var(--ch-fundo-pagina, 32px));
  min-height: calc(100dvh - var(--ch-grelha-topo, 140px) - var(--ch-fundo-pagina, 32px));
  border: 1px solid var(--linha-2); border-radius: var(--r-janela); background: var(--void); overflow: clip;
}
/* o cabeçalho da conversa, preso por baixo do da casa */
.ch-painel-cab {
  position: sticky; top: var(--ch-topo, var(--topo-alt)); z-index: 6;
  display: flex; align-items: center; gap: var(--e-3); min-width: 0; padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linha); border-radius: 0; background: var(--painel);
}
.ch-bt-voltar { flex: none; }
.ch-titulo-caixa { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ch-titulo-linha { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.ch-titulo { flex: 0 1 auto; min-width: 0; margin: 0; color: var(--ink); font: 600 var(--t-14)/1.43 var(--sans); }
.ch-meta-linha { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
/* o modelo encolhe (com reticências) e a conta fica inteira (L04) */
.ch-meta { display: flex; min-width: 0; color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--mono); }
.ch-meta-modelo { flex: 0 1 auto; min-width: 2ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-meta-conta { flex: none; white-space: nowrap; }
.ch-meta-conta::before { content: ' · '; white-space: pre; }
.ch-cab-acoes { display: flex; flex: none; align-items: center; gap: var(--e-2); }
.ch-bt-gaveta { position: relative; flex: none; }
.ch-bt-gaveta-n { position: absolute; top: -4px; right: -4px; }
.ch-tags { display: flex; flex-wrap: wrap; gap: var(--e-2); padding: var(--e-2) var(--e-4); border-bottom: 1px solid var(--linha); }
.ch-faixa {
  position: sticky; top: calc(var(--ch-topo, var(--topo-alt)) + var(--ch-cab, 61px)); z-index: 5;
  width: auto; margin: var(--e-3) var(--e-4) 0; text-align: left; font: inherit; cursor: pointer;
}
.ch-faixa > .o-ic { flex: none; color: var(--ink-3); }
/* a faixa dos ajudantes: «2 ajudantes a trabalhar · 1 acabou» e uma marca por ajudante (o ponto e o nome curto; no
   telemóvel, só os pontos), tudo numa linha (o que não cabe fica escondido, nunca para o lado) */
.ch-faixa > span.ch-faixa-texto { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (o padding deixa à vista o anel de 3 px de cada ponto, que o overflow cortava) */
.ch-faixa > span.ch-faixa-ajudantes { display: flex; flex: 1 1 0; align-items: center; gap: var(--e-3); min-width: 0; padding: var(--e-1); overflow: hidden; }
.ch-faixa-ajudante { display: inline-flex; flex: none; align-items: center; gap: var(--e-2); min-width: 0; color: var(--ink-2); font: 400 var(--t-12)/1.3 var(--sans); }
.ch-faixa-ajudante[data-estado="acabou"] { color: var(--ink-3); }
.ch-faixa-ajudante-nome { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* as mensagens (na página: rolam com ela) */
.ch-mensagens { display: flex; flex: 1; flex-direction: column; gap: var(--e-4); min-width: 0; padding: var(--e-5) var(--e-4) var(--e-4); }
.ch-mensagens--nova { justify-content: center; }
.ch-lista { gap: var(--e-5); }
.ch-antigas { align-self: center; }
.ch-sem-rede { margin: 0; }
.ch-vazio { padding: var(--e-10) var(--e-4); }

/* a tua mensagem, à direita */
.ch-lista .o-msg--eu, .ch-pendente.o-msg--eu { flex-direction: row-reverse; align-self: flex-end; max-width: min(640px, 92%); margin-left: auto; }
.ch-lista .o-msg--eu .o-msg-corpo { display: flex; flex-direction: column; gap: var(--e-2); }
/* o que escreveste, como o escreveste (as mudanças de linha e os espaços); um espaço no fim de uma linha passa para a
   seguinte em vez de ficar pendurado fora da caixa (o pre-wrap deixava-o 1 a 3 px fora) */
.ch-tu-texto { white-space: break-spaces; overflow-wrap: anywhere; }
/* a mensagem do OS para a IA: uma frase à vista e o texto inteiro no «Detalhe técnico» */
.ch-tu-os { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.ch-tu-os-frase { margin: 0; }
.ch-na-fila .o-msg-corpo { border-style: dashed; color: var(--ink-2); }
.ch-fila { display: flex; align-items: flex-start; gap: var(--e-1); }
.ch-fila > .o-ic { height: 1.4em; }
.ch-fila > span { min-width: 0; }
.ch-fila--perdida { color: var(--aviso); }
/* (23/10) o «Enviar já» de uma mensagem da fila: só com a IA a trabalhar (a lista leva a ch-pode-ja, pelo estado) */
.ch-fila-ja { flex: none; align-self: center; }
.ch-lista:not(.ch-pode-ja) .ch-fila-ja { display: none; }
/* o «Enviar já» da caixa: ao lado do «Enviar», com o ícone e a palavra (no telemóvel ao alto, só o ícone com o nome para
   o leitor de ecrã, mais abaixo) */
.ch-enviar-ja { flex: none; white-space: nowrap; }
.ch-anexos-msg { margin: 0; }
a.ch-anexo-msg { text-decoration: none; padding-right: var(--e-2); }
a.ch-anexo-msg:hover { border-color: var(--accent-linha); color: var(--ink); }

/* a resposta da IA */
.ch-lista .o-msg--ia { max-width: 820px; }
.ch-blocos { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.ch-texto { min-width: 0; }
.ch-miniaturas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-width: 0; margin-top: var(--e-2); }
.ch-miniatura { display: block; flex: none; width: 120px; height: 90px; border: 1px solid var(--linha-2); border-radius: var(--r-cartao); overflow: hidden; background: var(--painel-2); }
.ch-miniatura:hover { border-color: var(--accent-linha); }
.ch-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-pendente .o-msg-corpo { padding-top: 0; }

/* a linha dobrada das ações e o pormenor de cada uma */
.ch-atividade { margin-top: var(--e-1); }
.ch-atividade .o-atividade-resumo { color: var(--ink-2); }
.ch-atividade .o-atividade-resumo:disabled { cursor: default; opacity: 1; }
.ch-atividade .o-atividade-resumo:disabled:hover { background: none; color: var(--ink-2); }
.ch-atividade--so { border-color: transparent; padding-left: 0; }
.ch-erros { color: var(--erro); }
.ch-acao { min-width: 0; }
.ch-acao-detalhe { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; margin: var(--e-1) 0 var(--e-2) var(--e-6); }
.ch-acao-detalhe .o-ferramenta, .ch-acao-detalhe .o-diff { margin: 0; }
.ch-acao-detalhe .o-ferramenta-cabeca .o-copiar { margin-left: auto; }
.ch-acao-caminho { margin: 0; color: var(--ink-3); font: 400 var(--t-12)/1.45 var(--mono); overflow-wrap: anywhere; }
.ch-diff-cab { color: var(--ink-3); }
.ch-diff-cab::before { content: '' !important; }

/* os subagentes, o plano, os avisos e os divisores */
.ch-sub .o-acoes { justify-content: space-between; }
/* (ao chegar pela faixa, o topo do cartão fica por baixo do cabeçalho preso e da faixa, como a pergunta) */
.ch-sub { scroll-margin-top: calc(var(--ch-cab, 61px) + var(--ch-faixa, 0px) + var(--e-3)); transition: border-color var(--dur-2) ease-out, box-shadow var(--dur-2) ease-out; }
.ch-sub--fim { background: var(--painel); }
.ch-sub-acoes { margin-top: var(--e-1); }
.ch-sub-filhos { display: flex; flex-direction: column; gap: var(--e-2); padding-left: var(--e-3); border-left: 1px solid var(--linha-2); }
/* os ajudantes ao vivo (ronda 2): enquanto trabalha, uma linha de luz corre no topo do cartão (um só pseudo-elemento, com
   transform: no iPhone não repinta o cartão); pára quando ele acaba, e fica parada com o movimento reduzido */
.ch-sub--vivo { position: relative; overflow: hidden; border-color: var(--accent-linha); }
.ch-sub--vivo::before {
  content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  transform: translateX(-100%); animation: ch-fio 1.8s linear infinite;
}
@keyframes ch-fio { from { transform: translateX(-100%); } to { transform: translateX(200%); } }
/* os últimos passos do ajudante, numa coluna com um fio à esquerda (como no Claude Code): cada passo numa linha, o alvo
   acaba em «…»; o que está a correr leva os três pontos; um passo novo entra a deslizar */
.ch-sub-passos {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: 0 0 0 var(--e-3); list-style: none;
  border-left: 1px solid var(--linha-2); color: var(--ink-3); font: 400 var(--t-12)/1.5 var(--mono);
}
.ch-sub-passo { display: flex; align-items: center; gap: var(--e-2); min-width: 0; white-space: nowrap; }
.ch-sub-passo > .o-ic { flex: none; }
.ch-sub-passo > .o-pontos { flex: none; width: 14px; gap: 1px; color: var(--accent-texto); }
.ch-sub-passo[data-estado="ok"] > .o-ic { color: var(--ok); }
.ch-sub-passo[data-estado="erro"] > .o-ic { color: var(--erro); }
.ch-sub-passo[data-estado="a-correr"] { color: var(--ink-2); }
.ch-sub-passo-verbo { flex: none; color: var(--ink-2); }
.ch-sub-passo-alvo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ch-sub-passo--novo { animation: ch-passo-entra var(--dur-2) ease-out; }
@keyframes ch-passo-entra { from { opacity: 0; transform: translateY(4px); } }
.ch-sub-antes { padding-left: calc(var(--e-3) + 1px); }
/* ao chegar pela faixa: um anel da casa, que se apaga */
.ch-sub--destaque { border-color: var(--accent-linha); box-shadow: 0 0 0 2px var(--accent-linha); }
.ch-plano { max-width: 560px; gap: var(--e-2); padding: var(--e-3); }
.ch-passos { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; padding: 0; list-style: none; }
.ch-passo { display: flex; align-items: flex-start; gap: var(--e-2); color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.ch-passo > .o-ic { height: 1.5em; }
.ch-passo--feito { color: var(--ink-3); }
.ch-passo--feito > .o-ic { color: var(--ok); }
.ch-passo--a-fazer { color: var(--ink); }
.ch-passo--a-fazer > .o-ic { color: var(--accent-texto); }
.ch-passo-por { flex: none; width: 10px; height: 10px; margin: calc((1.5em - 10px) / 2) 2px 0; border: 1.5px solid var(--ink-3); border-radius: 50%; }
.ch-aviso, .ch-erro { max-width: 760px; }
.ch-detalhe { margin-top: var(--e-2); background: var(--void); }
.ch-pre { margin: 0; max-height: 240px; overflow: auto; color: var(--ink-2); font: 400 var(--t-12)/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-divisor { display: flex; align-items: center; gap: var(--e-3); color: var(--ink-3); font: 500 var(--t-12)/1.4 var(--mono); text-align: center; }
.ch-divisor::before, .ch-divisor::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.ch-divisor > span { max-width: 80%; }
.ch-divisor--parado { color: var(--aviso); }

/* a hora de cada mensagem (22/10): discreta (a letra das horas da casa: mono, 11 px, a cor mais apagada), no fuso da
   empresa; a data inteira ao passar o rato (o title) e no toque longo (sem o menu do sistema nem a seleção por cima) */
.ch-hora {
  color: var(--ink-3); font: 400 var(--t-11)/1.4 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
/* a tua mensagem: a hora ao lado da caixa, numa caixa da altura do quadrado «Tu» (28 px), centrada nela: o mesmo eixo */
.ch-lista .o-msg > .ch-hora--msg { display: flex; flex: none; align-items: center; height: 28px; }
/* (22/10) quem a escreveu, ao lado da hora (do lado de fora dela: a tua mensagem vai da direita para a esquerda), na
   mesma letra discreta e no mesmo eixo; um nome comprido acaba em «…» */
.ch-lista .o-msg > .ch-autor--msg {
  display: flex; flex: none; align-items: center; height: 28px; max-width: 16em; min-width: 0;
  color: var(--ink-3); font: 400 var(--t-11)/1.4 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* a resposta da IA: o cabeçalho com a hora, ao lado do «IA» e no eixo dele; o que a IA disse começa por baixo */
.ch-lista .o-msg--ia.ch-msg--hora > .o-msg-corpo { padding-top: 0; }
.ch-msg-cab { display: flex; align-items: center; min-height: 28px; margin-bottom: var(--e-1); }
/* nas linhas do sistema (os divisores, os avisos, a resposta a uma pergunta), junto ao texto, depois de um «·» (na
   linha do texto: a caixa toma a linha de base do primeiro filho) */
.ch-hora-junto { display: inline-flex; align-items: center; gap: var(--e-1); margin-left: var(--e-1); color: var(--ink-3); font: 400 var(--t-11)/1 var(--mono); white-space: nowrap; }
/* a última palavra do texto, colada à hora: a frase parte antes dela (o «·» nunca começa uma linha) */
.ch-hora-cola { white-space: nowrap; }
.ch-divisor .ch-hora-junto, .ch-divisor .ch-hora-junto .ch-hora { font-size: inherit; }
.ch-divisor--parado .ch-hora-junto, .ch-divisor--parado .ch-hora { color: inherit; }
/* os dias, entre as mensagens de dias diferentes: «Hoje», «Ontem», «20/10», na pílula pequena da casa, entre dois traços
   (os divisores do sistema são só texto: não se confundem) */
.ch-dia { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.ch-dia::before, .ch-dia::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.ch-dia-rotulo { flex: none; }

/* a pergunta da IA (ao abrir uma conversa que espera por ti, ou quando a pergunta chega, o topo dela vem à vista: por
   baixo do cabeçalho preso e da faixa dos ajudantes, no telemóvel; com um pouco de ar, na moldura do computador) */
.ch-pergunta { max-width: 640px; scroll-margin-top: calc(var(--ch-cab, 61px) + var(--ch-faixa, 0px) + var(--e-3)); }
.ch-pergunta--feita { border-color: var(--linha); background: var(--painel); }
.ch-pergunta--feita .o-pergunta-titulo { color: var(--ink-2); font-weight: 500; }
.ch-pergunta--feita .o-pergunta-texto { margin: 0; color: var(--ink-2); }
.ch-pergunta-plano { margin: 0 0 var(--e-3); padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--void); }
.ch-perg-cab { margin-right: var(--e-2); }
.ch-pergunta .o-opcao[aria-pressed="true"] { border-color: var(--accent-linha); background: var(--accent-fundo); }
.ch-pergunta .o-opcao:disabled { cursor: default; opacity: .7; }
.ch-opcao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ch-opcao-desc { color: var(--ink-3); font-size: var(--t-12); line-height: 1.4; }
.ch-outra { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-3); }
.ch-outra-texto { min-height: 64px; max-height: 200px; resize: none; }
/* com várias perguntas, a «Outra…» de cada uma fica logo por baixo das opções dela */
.ch-outra-uma { margin-top: var(--e-1); }
.ch-outra--pergunta { margin-top: var(--e-1); }
input.ch-outra-texto { min-height: var(--ctl); }
.ch-perg-segredo { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0 0 var(--e-2); }
.ch-perg-segredo > .o-ic { flex: none; height: 1.5em; }

/* ── em baixo: a caixa de escrever (presa por baixo), a barra de uma fechada, «↓ novas» ────────────────────────── */
.ch-rodape {
  position: sticky; bottom: var(--ch-fundo, 0px); z-index: 6;
  display: flex; flex-direction: column; gap: var(--e-2); min-width: 0;
  border-radius: 0; background: var(--painel);
}
.ch-rodape > .ch-barra { margin: var(--e-3) var(--e-4); }
/* «A IA está à espera de uma resposta no terminal.», por cima da caixa, com o «Terminal» à direita (desce quando não cabe) */
.ch-rodape > .ch-no-terminal { flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: var(--e-3) var(--e-4) 0; }
.ch-no-terminal > .o-aviso-texto { flex: 1 1 10rem; min-width: 0; }
.ch-no-terminal > .o-btn { flex: none; }
.ch-compor { border-radius: 0; }
.ch-compor .o-compor-barra { row-gap: var(--e-1); }
.ch-compor-estado { min-height: 0; margin: var(--e-1) 0 0; }
.ch-compor-estado:empty { display: none; }
.ch-mic[aria-pressed="true"] { border-color: var(--erro-linha); background: var(--erro-fundo); color: var(--erro); }
.ch-anexo--erro { border-color: var(--erro-linha); color: var(--erro); }
.ch-novas {
  position: absolute; left: 50%; top: calc(-1 * (var(--ctl) + var(--e-3))); transform: translateX(-50%);
  border-color: var(--accent-linha); background: var(--painel-3); box-shadow: var(--sombra-flutua);
}

/* ── a conversa nova: as opções fechadas ────────────────────────────────────────────────────────────────────────── */
.ch-opcoes { width: 100%; max-width: 640px; align-self: center; background: var(--painel); }
.ch-opcoes > summary { padding-top: var(--e-1); padding-bottom: var(--e-1); }   /* o resumo em duas linhas não cola à borda (e cabe nos 44 px) */
.ch-opcoes > summary > span:first-of-type { flex: none; color: var(--ink); }
.ch-opcoes-resumo { flex: 1; min-width: 0; color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--mono); overflow-wrap: anywhere; }
.ch-opcoes-grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-bottom: var(--e-3); }
.ch-conta-info { margin-top: var(--e-2); }
.ch-conta-info--erro { color: var(--erro); }
.ch-erro-nova { width: 100%; max-width: 640px; align-self: center; }
.ch-vazio--nova { padding-bottom: var(--e-4); }

/* ── a conversa no terminal ─────────────────────────────────────────────────────────────────────────────────────── */
.ch-terminal { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; padding: var(--e-4); }
.ch-terminal .o-grupo-rotulo { margin: var(--e-3) 0 0; }
.ch-estado-terminal { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-2) var(--e-3); border: 1px solid var(--linha); border-radius: var(--r); background: var(--painel-2); }
.ch-estado-terminal:has(> .o-btn) { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ch-estado-texto { display: flex; align-items: center; gap: var(--e-2); min-width: 0; color: var(--ink-2); font-size: var(--t-13); overflow-wrap: anywhere; }
.ch-compor--terminal { padding: 0; border-top: 0; background: none; }
.ch-teclas { gap: var(--e-1); }
.ch-nota { margin: 0; }

/* os ficheiros de uma conversa */
.ch-ficheiros { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--e-2); min-width: 0; }
.ch-ficheiro {
  display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; padding: var(--e-2);
  border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--painel); color: var(--ink); text-decoration: none;
}
.ch-ficheiro:hover { border-color: var(--accent-linha); }
.ch-ficheiro img, .ch-ficheiro-ext { width: 100%; height: 72px; border-radius: var(--r); object-fit: cover; background: var(--painel-2); }
.ch-ficheiro-ext { display: grid; place-items: center; color: var(--ink-3); font: 600 var(--t-13)/1 var(--mono); }
.ch-ficheiro-nome { font-size: var(--t-13); line-height: 1.3; overflow-wrap: anywhere; }

/* ── computador estreito: a gaveta mais estreita ─────────────────────────────────────────────────────────────────── */
@media (min-width: 53.8125em) and (max-width: 68.75em) {
  .ch-grelha { grid-template-columns: 236px minmax(0, 1fr); }
}

/* ── no computador (com rato), o chat ao vivo e a conversa nova numa moldura fixa, como a referência: o título da página
   fica à vista, a gaveta e a conversa vão até ao fundo do ecrã com a mesma altura, e as mensagens rolam por dentro, com
   o cabeçalho e a caixa de escrever sempre no sítio (revisão do fecho, 18/10: a conversa abria no fim da página, com o
   título fora do ecrã e as duas colunas a acabar a alturas diferentes). No toque, a conversa rola com a página (o dedo
   rola a página), e a do terminal também no computador (a roda passa do terminal para a página) ──────────────────────── */
@media (min-width: 53.8125em) and (pointer: fine) {
  .ch--moldura .ch-grelha {
    height: calc(100vh - var(--ch-grelha-topo, 140px) - var(--ch-fundo-pagina, 32px));
    height: calc(100dvh - var(--ch-grelha-topo, 140px) - var(--ch-fundo-pagina, 32px));
    min-height: 26rem; grid-template-rows: minmax(0, 1fr); align-items: stretch;
  }
  .ch--moldura .ch-gaveta { position: static; min-height: 0; max-height: none; }
  .ch--moldura .ch-painel { min-height: 0; overflow: hidden; }
  .ch--moldura .ch-painel-cab, .ch--moldura .ch-faixa { position: static; }
  .ch--moldura .ch-faixa { flex: none; }
  /* (relative: os nomes só para o leitor de ecrã, «Tu:» e «A IA:», que são absolute, ficam dentro do que rola; sem isto
     punham a página com milhares de píxeis de altura por baixo da moldura) */
  .ch--moldura .ch-mensagens { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .ch--moldura .ch-pergunta { scroll-margin-top: var(--e-3); }
  /* a conversa nova ao meio, sem nada que fique por cima quando não cabe (as margens automáticas encolhem) */
  .ch--moldura .ch-mensagens--nova { justify-content: flex-start; }
  .ch--moldura .ch-mensagens--nova > :first-child { margin-top: auto; }
  .ch--moldura .ch-mensagens--nova > :last-child { margin-bottom: auto; }
  .ch--moldura .ch-rodape { position: relative; bottom: auto; flex: none; }
}

/* ── telemóvel (o mesmo ponto de viragem do visual.css): uma coluna, a gaveta numa folha ─────────────────────────── */
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .ch-cabeca-pagina { margin-bottom: var(--e-4); }
  .ch-grelha { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ch-gaveta { display: none; }
  .ch-so-largo { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .ch-bt-terminal { width: var(--ctl); min-width: var(--ctl); padding: 0; }
  /* até ao fundo do ecrã (o --ch-fundo-pagina já conta a barra de baixo), sem passar: antes, os 90 px não contavam o
     cabeçalho da página e a conversa nova ficava 34 px mais alta do que o ecrã (abria rolada, com o título cortado) */
  .ch-painel { min-height: calc(100dvh - var(--ch-grelha-topo, 160px) - var(--ch-fundo-pagina, 84px)); }
  .ch-painel-cab { gap: var(--e-2); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-2); }
  /* no telemóvel, o modelo ao lado do estado e a conta inteira na linha de baixo (L04) */
  .ch-meta-linha { flex-wrap: wrap; row-gap: 2px; }
  .ch-meta { display: contents; }
  .ch-meta-modelo { flex: 1 1 0; }
  .ch-meta-conta { flex: 1 1 100%; min-width: 0; color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--mono); white-space: normal; overflow-wrap: anywhere; }
  .ch-meta-conta::before { content: none; }
  .ch-tags { padding: var(--e-2) var(--e-3); }
  .ch-faixa { margin: var(--e-2) var(--e-3) 0; }
  .ch-mensagens { padding: var(--e-4) var(--e-3) var(--e-3); }
  /* a conversa nova cabe no ecrã de um telemóvel (com o vazio alto, ficava uns 34 px mais alta do que ele) */
  .ch-mensagens--nova { padding-top: var(--e-2); }
  .ch-vazio--nova { padding: var(--e-4) var(--e-3) var(--e-3); }
  .ch-lista { gap: var(--e-4); }
  /* sem os quadrados «Tu»/«IA»: a tua à direita, numa caixa; a da IA à largura toda (o leitor de ecrã ouve quem é) */
  .ch-lista .o-msg > .o-quem, .ch-pendente > .o-quem { display: none; }
  .ch-lista .o-msg--eu { max-width: 88%; }
  /* sem os quadrados, a hora vai numa linha por cima da mensagem, do lado dela: à direita na tua (por cima da caixa, a
     largura toda da linha e o texto encostado à direita), à esquerda na da IA (o cabeçalho, só da altura da letra) */
  .ch-lista .o-msg--eu.ch-msg--hora { flex-wrap: wrap; row-gap: var(--e-1); }
  .ch-lista .o-msg > .ch-hora--msg { order: -1; flex: 1 0 100%; justify-content: flex-end; height: auto; }
  /* com o autor (22/10): o autor e a hora na linha de cima, encostados à direita, e a caixa por baixo (uma grelha: na
     fila com quebras, o autor e a hora não partilhavam a linha) */
  .ch-lista .o-msg--eu.ch-msg--autor {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "autor hora" "corpo corpo"; gap: var(--e-1) var(--e-2);
  }
  .ch-lista .o-msg--eu.ch-msg--autor > .o-msg-corpo { grid-area: corpo; justify-self: end; max-width: 100%; }
  .ch-lista .o-msg--eu.ch-msg--autor > .ch-hora--msg { grid-area: hora; }
  .ch-lista .o-msg--eu.ch-msg--autor > .ch-autor--msg { grid-area: autor; justify-self: end; height: auto; max-width: 100%; }
  .ch-msg-cab { min-height: 0; }
  .ch-acao-detalhe { margin-left: 0; }
  .ch-miniatura { width: 96px; height: 72px; }
  .ch-compor { padding: var(--e-2) var(--e-3) var(--e-3); }
  .ch-rodape > .ch-barra { margin: var(--e-2) var(--e-3); }
  .ch-opcoes-grelha { grid-template-columns: minmax(0, 1fr); }
  .ch-terminal { padding: var(--e-3); }
  /* o dedo rola a página: o código e as tabelas só rolam para o lado (sem altura máxima, nunca apanham o deslize de
     cima para baixo) */
  .ch-lista .o-codigo pre, .ch-lista .o-md pre { max-height: none; overflow-y: hidden; }
  .ch-acao-detalhe .o-ferramenta pre, .ch-pre { max-height: none; overflow-y: visible; }
  .ch-folha-gaveta .ch-conversa { min-height: 52px; }
  /* a conversa nova cabe no ecrã com a pergunta «Para quê» (22/10): no telemóvel, o vazio fica só com «O que
     precisas?» (o ícone e a frase de como escrever saem: a caixa de escrever e o «Começar conversa» já o dizem) */
  .ch-papel-nova { gap: var(--e-1); }
  .ch-vazio--nova > .o-ic, .ch-vazio--nova > .o-vazio-texto { display: none; }
  /* com a pesquisa, a folha das conversas tem altura para as sugestões (por cima da lista): com poucas conversas, a
     folha era mais baixa do que elas e cortava-as; assim nada cresce nem salta quando se toca no campo */
  .ch-folha-gaveta:has(.ch-procura:not([hidden])) { min-height: min(560px, calc(100% - var(--e-12))); }
  .ch-rodape > .ch-no-terminal { margin: var(--e-2) var(--e-3) 0; }
  /* a faixa dos ajudantes, numa linha: o texto e só os pontos (o nome de cada um ouve-se no rótulo da faixa) */
  .ch-faixa > span.ch-faixa-ajudantes { gap: var(--e-2); }
  .ch-faixa-ajudante-nome { display: none; }
}
/* no toque: as sugestões com 44 px, o campo da pesquisa com 16 px (o iPhone faz zoom com menos) e as ações do Local
   desta conversa com 44 px, também as que vêm da página Local (o Desligar, o ⋯) */
@media (max-width: 53.75em), (pointer: coarse) {
  /* as horas com 12 px, como a outra meta pequena da casa no toque (o .o-msg-meta) */
  .ch-hora, .ch-hora-junto, .ch-lista .o-msg > .ch-autor--msg { font-size: var(--t-12); }
  .ch-sugestao { min-height: var(--ctl); font-size: var(--t-14); }
  .ch-procura-texto { font-size: max(16px, var(--t-16)); }
  /* (19/10, a auditoria do ecrã) a caixa de escrever tem os 44 px do campo: era de 34 px, com 5 px de borda e enchimento
     de cada lado (o toque aí já a focava, pelo click do campo, mas o alvo da própria caixa, o que o leitor de ecrã e o
     comando por voz apontam, ficava abaixo dos 44 px). Estica-se por cima do enchimento com margens negativas, sem mexer
     na altura da linha nem no desenho do campo */
  .ch-procura-texto { min-height: var(--ctl-campo); margin-block: calc(-1px - var(--e-1)); }
  .ch-local-acoes .o-btn, .ch-local-acoes button:not(.o-interruptor) { min-height: var(--ctl); }
}
@supports (-webkit-touch-callout: none) {
  .ch-procura-texto { font-size: max(16px, var(--t-16)); }
}
/* com o teclado aberto no telemóvel: a caixa encosta-se ao teclado (o --ch-fundo é a altura dele) */
.ch--teclado .ch-rodape { border-radius: 0; }

/* ── movimento reduzido: o «ir ao fim» é logo (o resto vem do visual.css) ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ch-novas { box-shadow: none; }
  /* a linha de luz dos ajudantes fica parada, meio transparente; os passos novos entram sem deslizar */
  .ch-sub--vivo::before { width: 100%; transform: none; animation: none; opacity: .5; background: var(--accent); }
  .ch-sub-passo--novo { animation: none; }
}

/* ── a barra da caixa no telemóvel: numa só linha (anexar, ditar, o Local desta conversa, Parar e Enviar: o «Enviar» só
   com a seta, o nome para o leitor de ecrã; o «Parar» com a palavra ao lado do ícone, que um quadrado sozinho não diz o
   que faz). O modelo e o esforço saíram da caixa para o ⋯ da conversa (ronda 2) ─────────────────────────────────────── */
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .ch-enviar:not(.ch-enviar--nova) { width: var(--ctl); min-width: var(--ctl); padding: 0; }
  .ch-parar { flex: none; padding: 0 var(--e-3); }
  .ch-enviar-ja { padding: 0 var(--e-3); }
  .ch-enviar:not(.ch-enviar--nova) .ch-enviar-rotulo {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .ch-compor .o-compor-barra { flex-wrap: nowrap; }
}
/* (23/10) com a IA a trabalhar e texto na caixa, os três ao lado uns dos outros: «Parar», «Enviar já» e «Enviar» (o
   «Enviar já» ao lado, sem trocar de lugar com o «Parar»). No telemóvel ao alto não cabem as palavras: o «Parar» e o «Enviar
   já» ficam só com o ícone, de 44 px, o nome inteiro para o leitor de ecrã e no title, como o «Enviar» (deitado e no
   computador, com a palavra). Distinguem-se pela forma (o quadrado e a seta até à barra) e pela cor: o «Enviar já» com o
   ícone e o contorno do acento, da família do «Enviar»; o «Parar» neutro */
@media (max-width: 30em) {
  .ch-barra--ja .ch-parar, .ch-barra--ja .ch-enviar-ja { width: var(--ctl); min-width: var(--ctl); padding: 0; }
  .ch-barra--ja .ch-parar .ch-enviar-rotulo, .ch-barra--ja .ch-enviar-ja .ch-enviar-rotulo {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .ch-barra--ja .ch-enviar-ja { border-color: var(--accent-linha); color: var(--accent-texto); }
}
/* (23/10) com o «Local» na barra (a IA abriu uma página nesta conversa) e a IA a trabalhar, num telemóvel estreito não
   cabem todos numa linha (o «Enviar» ficava cortado, fora da caixa): o «Parar», o «Enviar já» e o «Enviar» passam juntos
   para a linha de baixo, à direita; o anexar, o ditado, o «Local» e o uso ficam em cima */
@media (max-width: 26em) {
  .ch-compor .o-compor-barra:has(> .ch-bt-local:not([hidden])):has(> .ch-parar:not([hidden])) { flex-wrap: wrap; }
  .ch-compor .o-compor-barra:has(> .ch-bt-local:not([hidden])):has(> .ch-parar:not([hidden]))::after {
    content: ''; order: 1; flex-basis: 100%; height: 0;
  }
  .ch-compor .o-compor-barra:has(> .ch-bt-local:not([hidden])):has(> .ch-parar:not([hidden])) > :is(.ch-parar, .ch-enviar-ja, .ch-enviar) { order: 2; }
  .ch-compor .o-compor-barra:has(> .ch-bt-local:not([hidden])):has(> .ch-parar:not([hidden])) > .ch-parar { margin-left: auto; }
  .ch-compor .o-compor-barra:has(> .ch-bt-local:not([hidden])):has(> .ch-parar:not([hidden])) > .ch-enviar { margin-left: 0; }
}
@media (max-width: 22.5em) { .ch-compor .o-compor-barra { gap: var(--e-1); } }

/* ── o Local ao lado: a pré-visualização ao vivo do projeto da conversa (o Local no Chat, 18/10) ────────────────────
   A pré-visualização é a da página Local (as classes lh- e previa- do gestao.css: o escudo no toque, «Mexer na página»);
   aqui, só o painel à direita da conversa (no computador, com rato, a partir de uns 1100 px), a folha (no telemóvel e
   num ecrã mais estreito), o «Ver ao vivo» do cabeçalho e junto às diferenças, e o aviso «A página mudou». */
.ch-bt-vivo { flex: none; }
.ch-bt-vivo > .o-ic { color: var(--accent-texto); }
.ch-vivo-previa { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--e-2); min-width: 0; min-height: 0; }
.ch-vivo-previa > .lh-mexer { margin: 0; }
.ch-vivo-estado { flex: none; }
.ch-vivo-estado .lh-motivo { margin: var(--e-2) 0 0; font-size: var(--t-12); }
.ch-vivo-nota { margin: 0; }
/* a página do projeto enche o que sobra (o escudo, por cima dela no toque, é o do gestao.css) */
.ch-vivo-lugar { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.ch-vivo-lugar > .previa-frame { flex: 1 1 auto; height: auto; min-height: 0; border-color: var(--linha-2); border-radius: var(--r-cartao); }
.ch-vivo-titulo { display: flex; align-items: center; gap: var(--e-2); min-width: 0; margin: 0; overflow-wrap: anywhere; }
.ch-vivo-titulo > .o-ic { flex: none; color: var(--accent-texto); }
.ch-vivo-pill { flex: none; }
.ch-vivo-construcao { border-color: var(--aviso-fundo); background: var(--aviso-fundo); color: var(--aviso); white-space: normal; overflow-wrap: anywhere; }
/* junto às diferenças de uma ação que mexeu num ficheiro de um projeto do Local */
.ch-vivo-acao { flex-wrap: nowrap; min-width: 0; }
.ch-vivo-acao > .o-btn { flex: none; }
.ch-vivo-acao > .o-linha-meta { min-width: 0; }
/* o aviso discreto, por cima da caixa de escrever: a página mudou (com a folha fechada) */
.ch-vivo-mudou { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2); min-width: 0; padding: var(--e-2) var(--e-4) 0;
  color: var(--ink-2); font-size: var(--t-13); }
.ch-vivo-mudou-texto { display: inline-flex; align-items: center; gap: var(--e-2); }
.ch-vivo-mudou-sep { color: var(--ink-3); }

/* o painel à direita da conversa: só no computador, com rato, a partir de uns 1100 px (a página fica mais larga e a
   grelha passa a três colunas: as conversas, a conversa e a página ao vivo, todas até ao fundo do ecrã) */
.ch-vivo { display: none; }
@media (min-width: 68.75em) and (pointer: fine) {
  .o-pagina[data-pagina="chat"]:has(.ch--vivo) { --largura: 1840px; }
  .ch--vivo .ch-grelha { grid-template-columns: 236px minmax(0, 1fr) minmax(0, 1fr); }
  .ch-vivo {
    display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; min-height: 0; padding: var(--e-3);
    border: 1px solid var(--linha-2); border-radius: var(--r-janela); background: var(--painel); overflow: hidden;
  }
  .ch-vivo-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); min-width: 0; }
  /* o nome numa linha (cortado com «…»), com o «Ao vivo» logo a seguir, que não salta quando diz «Atualizado» */
  .ch-vivo-nome { display: flex; flex: 1 1 12rem; align-items: center; gap: var(--e-2); min-width: 0; }
  .ch-vivo .ch-vivo-titulo { flex: 0 1 auto; color: var(--ink); font: 600 var(--t-14)/1.43 var(--sans); overflow-wrap: normal; }
  .ch-vivo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
  .ch-vivo-etiquetas { flex: 1 0 100%; }
  /* a conversa fica mais estreita: a dica das teclas sai (o texto da caixa já a diz); a 1120 px partia-se letra a letra
     por baixo do «Enviar» */
  .ch--vivo .ch-compor .o-compor-dica { display: none; }
}
@media (min-width: 85em) and (pointer: fine) {
  .ch--vivo .ch-grelha { grid-template-columns: 272px minmax(0, 1fr) minmax(0, 1.1fr); }
}

/* O contexto e os limites da conta (22/10), na barra da caixa: o lugar fica com o que sobra (nunca empurra o «Enviar»
   para outra linha) e o botão, encostado ao «Enviar», mostra a maior forma que cabe (o usoDaConversa escolhe); a
   amarelo acima de 80 % e a vermelho acima de 95 %, como as barras da janela dos pormenores */
.ch-uso-lugar { display: flex; flex: 1 1 0; justify-content: flex-end; min-width: 0; }
.ch-uso { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; gap: 0; padding: 0 var(--e-2); color: var(--ink-3);
  font: 400 var(--t-11)/1.4 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-uso[hidden] { display: none; }
.ch-uso:hover { color: var(--ink-2); }
.ch-uso-forma { display: none; align-items: center; gap: var(--e-1); }
.ch-uso[data-forma="longa"] > .ch-uso-forma--longa, .ch-uso[data-forma="media"] > .ch-uso-forma--media,
.ch-uso[data-forma="curta"] > .ch-uso-forma--curta { display: inline-flex; }
.ch-uso:not([data-forma]) > .ch-uso-forma--longa { display: inline-flex; }
.ch-uso-parte { display: inline-flex; align-items: center; gap: var(--e-1); }
.ch-uso-parte[data-nivel="aviso"] { color: var(--aviso); font-weight: 600; }
.ch-uso-parte[data-nivel="erro"] { color: var(--erro); font-weight: 600; }
.ch-uso-sep { color: var(--ink-3); }
/* o anel do contexto: quanto dele já está ocupado (a --v, de 0 a 100, vem por CSSOM, que a CSP deixa) */
.ch-uso-anel { flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: conic-gradient(currentColor calc(var(--v, 0) * 1%), var(--painel-3) 0); box-shadow: 0 0 0 1px var(--linha-2); }
/* a janela dos pormenores: uma linha por medida, com o valor, a barra e uma nota */
.ch-uso-lista { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; margin: var(--e-4) 0 0; }
.ch-uso-linha { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.ch-uso-linha > dt { color: var(--ink-2); font: 500 var(--t-13)/1.4 var(--sans); }
.ch-uso-linha > dd { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; margin: 0; }
.ch-uso-valor { color: var(--ink); font: 400 var(--t-13)/1.45 var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ch-uso-linha[data-nivel="aviso"] .ch-uso-valor { color: var(--aviso); }
.ch-uso-linha[data-nivel="erro"] .ch-uso-valor { color: var(--erro); }
/* a barra de uma medida folgada fica neutra (o acento da casa parecia um aviso); amarela e vermelha só nos níveis */
.ch-uso-linha .o-barra-valor { background: var(--ink-3); }
.ch-uso-linha[data-nivel="aviso"] .o-barra-valor { background: var(--aviso); }
.ch-uso-linha[data-nivel="erro"] .o-barra-valor { background: var(--erro); }
.ch-uso-nota { margin: var(--e-4) 0 0; }

/* «O Local desta conversa» (ronda 2, ponto 9): o botão na barra da caixa («Local · 2»; no telemóvel, só o ícone e o
   número), com o ponto verde quando alguma está ligada, e a folha com uma linha por página ou app */
.ch-bt-local { flex: none; gap: var(--e-1); min-width: var(--ctl); }
.ch-bt-local-n { font: 600 var(--t-12)/1 var(--mono); font-variant-numeric: tabular-nums; }
/* o ponto diz «ligado», como a pílula da folha: verde, com o pulso da casa */
.ch-bt-local > .o-ponto--ativo { margin-left: 2px; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-fundo); }
.ch-locais { display: flex; flex-direction: column; min-width: 0; margin: var(--e-3) 0 0; padding: 0; list-style: none; }
/* cada linha com o traço por cima (como o .o-sub--curto); o nome parte em linhas e a pílula vem logo a seguir a ele */
.ch-local { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; padding: var(--e-3) 0; border-top: 1px solid var(--linha); }
.ch-local:first-child { border-top: 0; padding-top: 0; }
.ch-local-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
.ch-local-nome { flex: 0 1 auto; min-width: 0; color: var(--ink); font: 600 var(--t-14)/1.4 var(--sans); overflow-wrap: anywhere; }
.ch-local-cab > .o-pill, .ch-local-cab > .o-chip { flex: none; }
.ch-local-meta { display: block; }
.ch-local-falta { color: var(--aviso); }
.ch-local-acoes { margin-top: var(--e-1); }
/* «Manter sempre ligado» (o gLocalSempre do Local) vem na fila das ações: uma linha inteira, com o interruptor encostado
   à direita, como no cartão da página Local (sem isto ficava da largura da dica, a meio da folha) */
.ch-local-acoes > .lh-sempre { flex: 1 0 100%; }
.ch-locais-vazio { margin-top: var(--e-3); }
.ch-locais-tudo { margin-top: var(--e-4); }
@media (min-width: 53.8125em) { .ch-folha-locais { width: min(480px, 100vw); } }

/* a folha: no telemóvel vem de baixo, quase do tamanho do ecrã; num ecrã mais estreito do computador, do lado direito */
.ch-vivo-folha-cab { gap: var(--e-2); }
.ch-vivo-corpo { display: flex; flex-direction: column; gap: var(--e-2); }
.ch-vivo-barra { flex: none; }
@media (min-width: 53.8125em) { .ch-folha-vivo { width: min(760px, 100vw); } }
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .ch-folha-vivo { height: calc(100% - var(--e-12)); }
  .ch-vivo-corpo { padding: var(--e-3) var(--e-3) calc(var(--e-3) + env(safe-area-inset-bottom, 0px)); }
  .ch-bt-vivo { width: var(--ctl); min-width: var(--ctl); padding: 0; }
  .ch-vivo-mudou { padding: var(--e-1) var(--e-3) 0; }
}

/* ── as Tarefas no Chat (a F6, 23/10; só com as Tarefas ligadas: sem elas, nada disto se desenha) ──────────────────────
   A referência é a da segunda volta (4-construcao/referencia/chat/parte.css), com o prefixo da casa: a linha da tarefa
   em cada conversa e em cada agente, o filtro «Tarefa: … ✕», o chip da tarefa no cabeçalho da conversa, as linhas do
   OS, o comentário de uma pessoa, a janela «Ligar a uma tarefa» (no telemóvel, uma folha de baixo), a pergunta do
   projeto e o ponto aceso do «Ver na conversa». Só as fichas do visual.css. */
/* a linha da tarefa num cartão do painel: calma (repete-se em muitos cartões), o ícone e a palavra no cinzento do meta,
   o título um degrau mais claro; fica dentro do botão da conversa (só informa) */
.ch-tarefa-linha {
  display: flex; align-items: center; gap: var(--e-1); min-width: 0; margin-top: var(--e-1);
  color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--sans);
}
.ch-tarefa-linha > .o-ic { flex: none; }
.ch-tarefa-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-tarefa-nome { color: var(--ink-2); }
.ch-conversa[aria-current="true"] .ch-tarefa-linha, .ch-subitem[aria-current="true"] .ch-tarefa-linha { color: var(--ink-2); }
.ch-conversa[aria-current="true"] .ch-tarefa-nome, .ch-subitem[aria-current="true"] .ch-tarefa-nome { color: var(--ink); }
/* a conversa com o nome da tarefa: só o ícone, na linha do estado */
.ch-tarefa-icone { display: inline-flex; flex: none; align-items: center; color: var(--ink-3); }
.ch-conversa[aria-current="true"] .ch-tarefa-icone { color: var(--ink-2); }

/* o filtro de quem vem da tarefa: o filtro ligado da casa, com o ✕ que o tira, por baixo da procura */
.ch-filtro-linha { display: flex; min-width: 0; }
.ch-filtro-tarefa { max-width: 100%; min-width: 0; gap: var(--e-2); cursor: pointer; }
.ch-filtro-tarefa > .o-ic { flex: none; }
.ch-filtro-tarefa-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* o chip da tarefa no cabeçalho da conversa (abre a tarefa): só o ícone, ao lado do estado, quando a conversa tem o nome
   dela; com outro nome, «Tarefa: <título> ›» numa linha própria, por baixo do título */
.ch-cab--tarefa { flex-wrap: wrap; row-gap: var(--e-2); }
.ch-cab-tarefa { display: flex; flex: 1 0 100%; min-width: 0; }
.ch-chip-tarefa {
  position: relative; display: inline-flex; align-items: center; gap: var(--e-2); max-width: 100%; min-width: 0; min-height: 28px;
  padding: 2px var(--e-2) 2px var(--e-3); border: 1px solid var(--linha-2); border-radius: var(--r-pilula);
  background: var(--painel-2); color: var(--ink); font: 500 var(--t-13)/1.3 var(--sans); text-decoration: none;
  transition: border-color var(--dur), background-color var(--dur);
}
.ch-chip-tarefa:hover { border-color: var(--linha-campo); background: var(--painel-3); }
.ch-chip-tarefa > .o-ic { flex: none; }
.ch-chip-tarefa > .o-ic:first-child { color: var(--accent-texto); }
.ch-chip-tarefa > .o-ic:last-child { color: var(--ink-3); }
.ch-chip-tarefa-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-chip-tarefa-rotulo { color: var(--ink-3); font-weight: 400; }
.ch-chip-tarefa--icone { flex: none; min-height: 20px; padding: 2px var(--e-2); }
.ch-chip-tarefa--icone > .o-ic:first-child { color: var(--accent-texto); }
.ch-chip-tarefa-toque, .ch-chip-tarefa--icone > .ch-chip-tarefa-seta { display: none; }

/* a linha do OS: mais pequena e cinzenta do que a resposta da IA, com o ícone das tarefas (lê-se, mas não chama) */
.ch-os { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.ch-lista > .ch-os { max-width: 760px; padding-left: calc(28px + var(--e-3)); }
.ch-os-linha {
  display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0; margin: 0;
  color: var(--ink-3); font: 400 var(--t-13)/1.5 var(--sans); overflow-wrap: break-word;
}
.ch-os-linha > .o-ic { flex: none; height: 1.5em; }
.ch-os-linha > span { min-width: 0; }
.ch-os-nome { color: var(--ink-2); }
.ch-os-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); padding-left: calc(16px + var(--e-2)); }

/* o comentário de uma pessoa na tarefa: o avatar e o nome dela, de onde vem e as palavras dela com o traço das citações.
   Nunca o balão do «Tu» nem o texto da IA */
.ch-comentario > .o-avatar { flex: none; width: 28px; height: 28px; }
.ch-comentario-corpo { display: flex; flex: 1; flex-direction: column; gap: var(--e-1); min-width: 0; padding-top: calc((28px - 1.5 * var(--t-13)) / 2); }
.ch-comentario-cab { margin: 0; color: var(--ink-3); font: 400 var(--t-13)/1.5 var(--sans); overflow-wrap: break-word; }
.ch-comentario-cab > b { color: var(--ink); font-weight: 600; }
.ch-comentario-texto {
  margin: 0; padding: 2px 0 2px var(--e-3); border-left: 2px solid var(--linha-campo);
  color: var(--ink); font: 400 var(--t-msg)/1.6 var(--sans); overflow-wrap: break-word;
}
.ch-comentario-nota { margin: 0; }
.ch-comentario-corpo > .ch-fila { margin-top: 0; }
/* (a segunda revisão da F6) a mensagem do OS com as linhas dele à frente ou vários comentários: o mesmo espaço da lista */
.ch-msg-tarefa { display: flex; flex-direction: column; gap: var(--e-5); min-width: 0; }

/* a janela «Ligar a uma tarefa» */
.ch-ligar-procurar { margin: 0 0 var(--e-3); }
.ch-ligar-lista { flex-direction: column; flex-wrap: nowrap; }
.ch-ligar-lista > .o-escolha { flex: none; width: 100%; min-width: 0; }
.ch-ligar-lista .o-escolha-titulo { align-items: center; flex-wrap: wrap; row-gap: 2px; }
.ch-ligar-lista .o-escolha-titulo > .o-pill { flex: none; }
.ch-escolha-nome { min-width: 0; overflow-wrap: anywhere; }
.ch-escolha-nova { border-style: dashed; background: none; }
.ch-escolha-nova .o-escolha-titulo > .o-ic { flex: none; color: var(--accent-texto); }
.ch-escolha-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2); min-width: 0; margin-top: 2px;
  color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--mono);
}
.ch-escolha-projeto { display: inline-flex; align-items: center; gap: var(--e-1); min-width: 0; color: var(--ink-2); }
.ch-escolha-projeto > .o-ic { flex: none; color: var(--ink-3); }
.o-escolha[aria-checked="true"] .ch-escolha-meta, .o-escolha[aria-checked="true"] .ch-escolha-projeto > .o-ic { color: var(--ink-2); }
.o-escolha[aria-checked="true"] .ch-escolha-projeto { color: var(--ink); }
.ch-ligar-erro { margin: var(--e-3) 0 0; color: var(--erro); }
.ch-ligar > .o-folha-pega { display: none; }

/* a pergunta do projeto: não para o trabalho, por isso a superfície calma do painel, com a linha-2 */
.ch-pergunta--sem-parar { border-color: var(--linha-2); background: var(--painel); }
.ch-perg-dica { margin-top: var(--e-3); }
.ch-perg-projeto.ch-pergunta--feita .o-pergunta-titulo { align-items: flex-start; }
.ch-perg-projeto.ch-pergunta--feita .o-pergunta-titulo > .o-ic { height: 1.4em; }

/* o «Ver na conversa»: o ponto aceso uns segundos */
.ch-lista > .ch-aceso { border-radius: var(--r); box-shadow: 0 0 0 2px var(--accent-linha); background: var(--accent-fundo); transition: box-shadow var(--dur), background-color var(--dur); }

/* o telemóvel (o mesmo ponto de viragem do visual.css) */
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .ch-cab-tarefa { padding-left: calc(var(--ctl) + var(--e-2)); }
  .ch-chip-tarefa { min-height: 32px; font-size: var(--t-14); }
  .ch-chip-tarefa::before { content: ''; position: absolute; inset: -6px 0; }
  .ch-chip-tarefa--icone { min-height: 20px; }
  .ch-chip-tarefa--icone::before { inset: -12px -6px; }
  /* a «Conta: …» sai do cabeçalho para o ⋯ (lá, com o modelo inteiro) */
  .ch-cab--tarefa .ch-meta-conta { display: none; }
  .ch-cab--tarefa .ch-meta-modelo { display: none; }
  .ch-os-linha { font-size: var(--t-14); }
  .ch-lista > .ch-os { padding-left: 0; }
  .ch-comentario > .o-avatar { font-size: var(--t-12); }
  .ch-comentario-cab { font-size: var(--t-14); }
  .ch-comentario-corpo { padding-top: calc((28px - 1.5 * var(--t-14)) / 2); }
  .o-veu > .o-janela.ch-ligar {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: calc(100% - var(--e-12)); margin: 0;
    padding: var(--e-2) var(--margem-d) calc(var(--e-4) + env(safe-area-inset-bottom, 0px)) var(--margem-e);
    border-width: 1px 0 0; border-radius: var(--r-janela) var(--r-janela) 0 0; overflow-y: auto; overscroll-behavior: contain;
    animation: o-entra-baixo var(--dur-2) ease-out;
  }
  .ch-ligar > .o-folha-pega { display: block; margin: 0 auto var(--e-4); }
}
/* no toque com o ecrã largo: o mesmo alvo de 44 × 44 no chip só com o ícone */
@media (pointer: coarse) {
  .ch-chip-tarefa--icone::before { content: ''; position: absolute; inset: -12px -6px; }
}
/* no toque e no telemóvel, o chip só com o ícone diz «Tarefa ›» (o title não aparece no toque) */
@media (max-width: 53.75em), (pointer: coarse) {
  .ch-chip-tarefa--icone { gap: var(--e-1); }
  .ch-chip-tarefa--icone .ch-chip-tarefa-toque { display: inline; color: var(--ink-2); font: 500 var(--t-12)/1 var(--sans); }
  .ch-chip-tarefa--icone > .ch-chip-tarefa-seta { display: inline-block; }
}
/* ── fim das Tarefas no Chat ─────────────────────────────────────────────────────────────────────────────────────── */

/* (23/10) a conversa de outra pessoa onde quem vê pode escrever (o direito de Pessoas): uma linha fina por cima da caixa
   («Conversa de Rita: o que escreveres fica com o teu nome.»), colada a ela (a caixa perde o traço de cima) */
.ch-de-outro { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; padding: var(--e-2) var(--e-4) 0;
  border-top: 1px solid var(--linha); background: var(--painel); color: var(--ink-3); font-size: var(--t-12); line-height: 1.45;
  overflow-wrap: anywhere; }
.ch-de-outro > .o-ic { flex: none; margin-top: 2px; }
.ch-de-outro + .ch-compor { border-top: 0; }
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .ch-de-outro { padding: var(--e-2) var(--e-3) 0; }
}

/* ── a voz (o Whisper, local): o áudio na conversa, a mensagem à espera do texto e o ditado ───────────────────────── */
/* o áudio de uma mensagem: o leitor (o botão de ouvir de 44 px, a barra e o tempo), o nome com «Descarregar» e, por
   baixo, o estado ou a transcrição num tom mais calmo */
.ch-vozes { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; white-space: normal; }
.ch-voz { display: flex; flex-direction: column; gap: var(--e-1); width: 22rem; max-width: 100%; min-width: 0; }
.ch-voz-leitor { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.ch-voz-tocar {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--accent-linha); border-radius: 50%; background: var(--accent-fundo); color: var(--accent-texto);
  transition: border-color var(--dur), background-color var(--dur);
}
.ch-voz-tocar:hover { border-color: var(--accent); }
.ch-voz-tocar:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 2px; }
.ch-voz-tocar > svg { width: 20px; height: 20px; }
.ch-voz-leitor--erro .ch-voz-tocar, .ch-voz-leitor--sem-som .ch-voz-tocar { border-color: var(--linha-2); background: var(--painel-3); color: var(--ink-3); }
.ch-voz-leitor--sem-som .ch-voz-barra { cursor: default; opacity: .55; }
/* a barra: o que já se ouviu no acento (o --ch-voz-pct, posto pelo CSSOM), o resto na linha */
.ch-voz-barra {
  flex: 1; min-width: 3rem; height: 24px; margin: 0; padding: 0; border: 0; border-radius: var(--r);
  -webkit-appearance: none; appearance: none; background: transparent; font-size: 16px; cursor: pointer;
}
.ch-voz-barra:focus { outline: none; }
.ch-voz-barra:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 2px; }
.ch-voz-barra::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--r-pilula);
  background: linear-gradient(90deg, var(--accent) var(--ch-voz-pct, 0%), var(--linha-2) var(--ch-voz-pct, 0%));
}
.ch-voz-barra::-webkit-slider-thumb {
  width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.ch-voz-barra::-moz-range-track { height: 4px; border-radius: var(--r-pilula); background: var(--linha-2); }
.ch-voz-barra::-moz-range-progress { height: 4px; border-radius: var(--r-pilula); background: var(--accent); }
.ch-voz-barra::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); }
.ch-voz-tempo {
  flex: none; min-width: 2.75rem; color: var(--ink-2); font: 500 var(--t-12)/1.3 var(--mono);
  font-variant-numeric: tabular-nums; text-align: right;
}
.ch-voz-ficheiro { display: flex; align-items: center; gap: var(--e-2); min-width: 0; padding-left: calc(44px + var(--e-2)); }
.ch-voz-nome { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-3); font: 400 var(--t-11)/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.ch-voz-descarregar { flex: none; }
.ch-voz-zona { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); min-width: 0; }
.ch-voz-zona:empty { display: none; }
.ch-voz-estado { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.45; }
.ch-voz-estado > svg { flex: none; height: 1.45em; }
.ch-voz-estado > .o-ponto { margin-top: calc((1.45em - 8px) / 2); }
.ch-voz-estado--falhou { color: var(--aviso); }
.ch-voz-transcricao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); width: 100%; min-width: 0;
  padding-top: var(--e-2); border-top: 1px solid var(--linha); }
.ch-voz-rotulo { margin: 0; color: var(--ink-3); font: 600 var(--t-11)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ch-voz-idioma { font-weight: 500; letter-spacing: 0; text-transform: none; }
.ch-voz-texto { margin: 0; color: var(--ink-2); white-space: break-spaces; overflow-wrap: anywhere; }
.ch-voz-texto--curto { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; }
.ch-voz-ver, .ch-voz-repetir { margin-left: calc(-1 * var(--e-1)); }
/* a mensagem que o servidor segura até o áudio estar em texto (a seguir à conversa, como as da fila): o mesmo desenho
   das tuas mensagens da lista (fora dela: a lista é só uma, .ch-lista) */
.ch-voz-esperas { gap: var(--e-5); }
.ch-voz-esperas:empty { display: none; }
.ch-voz-esperas .o-msg--eu { flex-direction: row-reverse; align-self: flex-end; max-width: min(640px, 92%); margin-left: auto; }
.ch-voz-esperas .o-msg--eu .o-msg-corpo { display: flex; flex-direction: column; gap: var(--e-2); }
.ch-voz-esperas .o-msg > .ch-hora--msg { display: flex; flex: none; align-items: center; height: 28px; }
.ch-voz-espera-meta { color: var(--ink-2); }

/* o ditado: carregar e manter (sem o menu do toque longo nem a seleção do texto); a gravar, o botão fica vermelho (do
   mesmo tamanho) e a linha por baixo da caixa diz o tempo, o que fazer e «Cancelar» */
.ch-mic--voz { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ch-mic--a-gravar, .ch-mic--a-gravar:where(:not(:disabled)):hover { border-color: var(--erro-linha); background: var(--erro-fundo); color: var(--erro); }
.ch-mic-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; margin: var(--e-2) 0 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.4; }
.ch-mic-ponto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--erro); box-shadow: 0 0 0 3px var(--erro-fundo); animation: ch-mic-pulso 1.2s ease-in-out infinite; }
.ch-mic-linha--a-transcrever .ch-mic-ponto { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-fundo); }
.ch-mic-tempo { flex: none; color: var(--ink); font: 500 var(--t-12)/1 var(--mono); font-variant-numeric: tabular-nums; }
.ch-mic-frase { flex: 1 1 7rem; min-width: 0; }
.ch-mic-cancelar { flex: none; margin-left: auto; }
@keyframes ch-mic-pulso { 50% { opacity: .35; } }

@media (max-width: 53.75em), (pointer: coarse) {
  .ch-voz-barra { height: 44px; }
  .ch-voz-nome { font-size: var(--t-12); }
}
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .ch-voz-esperas { gap: var(--e-4); }
  .ch-voz-esperas .o-msg > .o-quem { display: none; }
  .ch-voz-esperas .o-msg--eu { max-width: 88%; }
  .ch-voz-esperas .o-msg--eu.ch-msg--hora { flex-wrap: wrap; row-gap: var(--e-1); }
  .ch-voz-esperas .o-msg > .ch-hora--msg { order: -1; flex: 1 0 100%; justify-content: flex-end; height: auto; }
}
@media (max-width: 22.5em) {
  .ch-voz-ficheiro { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-voz-tocar { transition: none; }
  .ch-mic-ponto { animation: none; }
}
/* ── fim da voz ──────────────────────────────────────────────────────────────────────────────────────────────────── */