/* ═══════════════════════════════════════════════════════════════
   Apoio ao Cliente — ferramenta interna da equipa FormulaXN

   Usa os tokens da marca (cor, tipo, grelha de 4px) mas não é uma
   página de marketing: sem hero, sem H1 em caixa alta, sem watermark.
   Quem abre isto vem trabalhar — o ecrã tem de ser denso, legível e
   calmo. As fontes são locais, por isso a app funciona na mesma se o
   Google Fonts estiver inacessível.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fontes/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('fontes/Unbounded-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --red: #FB3B20;
  --black: #1A1A1A;
  --off-white: #F2F2F2;

  --fg-1: var(--black);
  --fg-2: #4A4A4A;
  /* O #8C8C8C do design system dá 3.36:1 sobre branco — abaixo do mínimo de
     4.5:1 para texto normal. Numa página de marketing passa, porque é texto
     decorativo; aqui é texto que a equipa lê o dia todo a 12-13px (datas,
     cabeçalhos de painel, as linhas de contexto do diff). #6B6B6B dá 5.18:1
     sobre branco e 4.63:1 sobre o fundo, e continua claramente abaixo do
     --fg-2 na hierarquia. */
  --fg-3: #6B6B6B;

  --bg: var(--off-white);
  --bg-raised: #FFFFFF;
  --bg-sunken: #EAEAEA;

  --border: rgba(26, 26, 26, 0.10);
  --border-hover: rgba(26, 26, 26, 0.18);

  --ok: #10B981;
  --aviso: #F59E0B;
  --perigo: #EF4444;
  --info: #5247F3;

  /* A escala do design system: 4/8/12/16/24/32/48. Salta de 16 para 24 — o
     20 não existe lá, e por isso deixou de se usar. Proibidos: 14, 22, 28 e
     36 como espaçamento (como tamanho de texto, 14px é legítimo). */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e6: 24px; --e8: 32px; --e12: 48px;

  --raio: 8px;
  --sombra: 0 1px 2px rgba(26,26,26,.06), 0 4px 12px rgba(26,26,26,.04);

  /* Tokens do design system (tokens.css do formulaxn-design), copiados
     porque a app não tem passo de build para os importar. */
  --pilula: 9999px;          /* --r-full */
  --vermelho-12: rgba(251, 59, 32, .12);
  --dur-rapida: 150ms;
  --dur-normal: 250ms;
  --mola: cubic-bezier(0.2, 0.9, 0.1, 1.0);  /* --ease-snappy */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; color: inherit; }

/* ─── Entrar ─────────────────────────────────────────────────── */

.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--e6);
}

.entrada-caixa {
  width: 100%;
  max-width: 380px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: var(--e8);
  box-shadow: var(--sombra);
}

.entrada-marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e6);
}

.entrada-marca img { width: 32px; height: 32px; }

/* Unbounded é SEMPRE em maiúsculas — é a regra da marca. A fonte é de
   statement: em caixa baixa perde o efeito e fica só a parecer estranha.
   Se um texto tem de ficar em minúsculas, a fonte certa é a Plus Jakarta. */
.entrada-marca span {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.campo { margin-bottom: var(--e4); }

.campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  margin-bottom: var(--e2);
}

/* Os campos seguem o forms.css do design system: borda de 1.5px, hover
   que escurece a borda, e o foco com a borda vermelha mais o anel suave a
   12% — em vez do outline afastado, que era invenção nossa. */
.campo input {
  width: 100%;
  padding: var(--e3) var(--e4);
  border: 1.5px solid var(--border);
  border-radius: var(--raio);
  background: var(--bg-raised);
  transition: border-color var(--dur-normal), box-shadow var(--dur-normal);
}

.campo input:hover { border-color: var(--border-hover); }

.campo input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--vermelho-12);
}

/* O btn--secondary do design system: Unbounded pequena em maiúsculas,
   pílula, preto que passa a vermelho no hover e levanta 2px. É o único
   primário que passa o contraste AA em repouso — texto claro sobre o
   vermelho dá 3.26:1, e isto é uma ferramenta que se usa o dia todo.
   (E nunca #000000: o preto da casa é o #1A1A1A.) */
.botao {
  font-family: 'Unbounded', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  width: 100%;
  padding: 14px var(--e6);
  background: var(--black);
  color: var(--off-white);
  border: 2px solid var(--black);
  border-radius: var(--pilula);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  transition: all var(--dur-normal) var(--mola);
}

.botao:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
}

.botao:active:not(:disabled) { transform: scale(.97); }
.botao:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.erro {
  background: #FEF2F2;
  border: 1px solid rgba(239, 68, 68, .3);
  color: #991B1B;
  padding: var(--e3) var(--e4);
  border-radius: var(--raio);
  font-size: 14px;
  margin-bottom: var(--e4);
}

/* ─── Estrutura ──────────────────────────────────────────────── */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) var(--e6);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}

.topo-marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  /* 13px e não 14: as maiúsculas ocupam mais largura, e 14 é um valor fora
     da escala do design system. */
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topo-marca img { width: 24px; height: 24px; }

.topo-dir {
  display: flex;
  align-items: center;
  gap: var(--e4);
  font-size: 13px;
  color: var(--fg-2);
}

.ligacao {
  background: none;
  border: none;
  color: var(--fg-2);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: 13px;
}

.ligacao:hover { color: var(--fg-1); }

/* O menu do topo é o padrão "tabs" do design system (navigation.css):
   Plus Jakarta em caixa normal, peso 600, e a vista activa a preto com a
   barra vermelha de 3px arredondada por baixo. As maiúsculas ficam para
   os badges e os rótulos — a navegação do DS não as usa. */
.topo-dir .ligacao {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-3);
  padding: var(--e2) 0;
  position: relative;
  transition: color var(--dur-normal);
}

.topo-dir .ligacao:hover { color: var(--fg-1); }

.topo-dir .ligacao.ativa { color: var(--fg-1); }

.topo-dir .ligacao.ativa::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--red);
  border-radius: 3px 3px 0 0;
}

/* O nome de quem está dentro: informação, não botão. O ícone de pessoa e
   o separador distinguem-no do menu à primeira vista. */
.topo-dir .quem {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: 13px;
  color: var(--fg-3);
  padding-left: var(--e4);
  border-left: 1px solid var(--border);
}

.topo-dir .quem svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.envolvente {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--e6);
}

.cabecalho-seccao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--e6);
}

/* Este h1 NÃO leva Unbounded, e é de propósito. Recebe conteúdo variável —
   assuntos de emails de clientes, que podem ser longos. Unbounded obrigava a
   maiúsculas (a regra da marca), e um assunto inteiro em maiúsculas fica
   ilegível e agressivo. Como manda a regra: se é para ficar em caixa baixa,
   a fonte é a Plus Jakarta Sans. */
.cabecalho-seccao h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

.contagem { font-size: 13px; color: var(--fg-3); }

.cabecalho-accoes {
  display: flex;
  align-items: center;
  gap: var(--e4);
}

/* O botão que corre o ciclo já. Enquanto trabalha, a seta roda — é o
   sinal de "estou a fazer", e o prefers-reduced-motion global desliga-a
   para quem pediu menos movimento. */
.botao.sincronizar {
  width: auto;
  padding: 10px 18px;   /* o btn--sm do DS */
  font-size: 11px;
}

.botao.sincronizar svg { width: 14px; height: 14px; }

@keyframes rodar { to { transform: rotate(360deg); } }

.botao.sincronizar:disabled svg { animation: rodar 1.2s linear infinite; }

/* A narração da corrida: a última linha do log, enquanto o ciclo
   trabalha. Monospace porque é literalmente uma linha de log. */
.narracao {
  margin: 0 0 var(--e4);
  font-family: ui-monospace, 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.narracao[hidden] { display: none; }

/* ─── Lista ──────────────────────────────────────────────────── */

.lista { display: flex; flex-direction: column; gap: var(--e3); }

/* ─── O quadro (kanban) ──────────────────────────────────────── */
/* Três colunas, três perguntas: "posso despachar já?", "isto precisa de
   mim?", "está com alguém?". A cor do ponto é status (verde/âmbar/azul),
   não marca — as mesmas três que as etiquetas já usam na lista.
   `align-items: start` é o que impede as três colunas de esticarem todas
   até à mais alta. */

/* minmax(0, 1fr) e não 1fr: com 1fr puro, uma coluna vazia encolhe e as
   cheias esticam — viu-se em produção com as três larguras diferentes. */
.quadro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e4);
  align-items: start;
}

.coluna {
  background: var(--bg-sunken);
  border-radius: var(--raio);
  padding: var(--e3);
}

.coluna-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e1) var(--e2) var(--e3);
}

/* Plus Jakarta e não Unbounded: título funcional, não statement — e a
   Unbounded a 12px em três colunas gritava. O tratamento é o mesmo dos
   h2 dos painéis. */
.coluna-titulo {
  font-family: 'Unbounded', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ponto.ok    { background: var(--ok); }
.ponto.aviso { background: var(--aviso); }
.ponto.info  { background: var(--info); }

.coluna-contagem {
  background: var(--bg-raised);
  border-radius: 999px;
  padding: 1px var(--e2);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

.coluna-vazia {
  margin: 0;
  padding: var(--e8) var(--e4);
  text-align: center;
  font-size: 12px;
  color: var(--fg-3);
  border: 1px dashed var(--border);
  border-radius: var(--raio);
}

/* Em ecrã estreito as colunas empilham. As etiquetas de cada cartão
   continuam a dizer o estado, por isso nada se perde. */
@media (max-width: 960px) {
  .quadro { grid-template-columns: 1fr; }
}

.cartao {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: var(--e4) var(--e6);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}

.cartao:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

/* Um email à espera para o qual o sistema não preparou resposta. Abre em
   modo consulta (vai-se buscar à caixa na hora); a barra à esquerda
   distingue-o sem gritar. */
.cartao.sem-proposta {
  border-left: 3px solid var(--bg-sunken);
}

.cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e2);
}

.cartao-de { font-weight: 600; font-size: 14px; }

.cartao-assunto {
  color: var(--fg-2);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-meta {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  margin-top: var(--e3);
}

/* ─── Etiquetas ──────────────────────────────────────────────── */

/* O badge do design system (badges.css): Unbounded 10px em maiúsculas,
   pílula, com a borda a marcar o estado. Uma diferença consciente: o DS
   pinta o texto com a cor viva (#10B981 e afins), que sobre o tint dá
   ~2.3:1 de contraste — bom numa landing, ilegível numa ferramenta que se
   lê o dia todo. Fica a forma do DS com os tons escuros que passam AA. */
.etiqueta {
  font-family: 'Unbounded', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 5px 10px;
  border-radius: var(--pilula);
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--bg-sunken);
  color: var(--fg-2);
  white-space: nowrap;
}

.etiqueta.alta   { background: rgba(16,185,129,.12); color: #047857; border-color: rgba(16,185,129,.3); }
.etiqueta.media  { background: rgba(245,158,11,.14); color: #92400E; border-color: rgba(245,158,11,.3); }
.etiqueta.baixa  { background: rgba(239,68,68,.12);  color: #991B1B; border-color: rgba(239,68,68,.3); }

.etiqueta.verificado     { background: rgba(16,185,129,.12); color: #047857; border-color: rgba(16,185,129,.3); }
.etiqueta.nao_verificado { background: rgba(245,158,11,.14); color: #92400E; border-color: rgba(245,158,11,.3); }
.etiqueta.suspeito       { background: rgba(239,68,68,.12);  color: #991B1B; border-color: rgba(239,68,68,.3); }

.etiqueta.reservada { background: rgba(82,71,243,.12); color: #3730A3; border-color: rgba(82,71,243,.3); }

.data { font-size: 12px; color: var(--fg-3); margin-left: auto; }

/* ─── Vazio ──────────────────────────────────────────────────── */

.vazio {
  text-align: center;
  padding: var(--e12) var(--e6);
  color: var(--fg-3);
  background: var(--bg-raised);
  border: 1px dashed var(--border);
  border-radius: var(--raio);
}

.vazio strong {
  display: block;
  color: var(--fg-1);
  font-weight: 700;
  margin-bottom: var(--e2);
}

/* ─── Detalhe ────────────────────────────────────────────────── */

/* Duas colunas: à esquerda o que o cliente escreveu (e o que já foi dito
   antes), à direita o trabalho do sistema — contexto, nota interna e a
   resposta. É a leitura natural de quem revê: o pedido de um lado, a
   proposta do outro, sem andar a rolar entre os dois. */
.detalhe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e4);
  align-items: start;
}

/* Os valores do contexto encostados à direita, como numa factura: o olho
   desce pela coluna dos números sem tropeçar nos rótulos. */
.painel.contexto .contexto-linha dd {
  margin-left: auto;
  text-align: right;
}

@media (max-width: 960px) {
  .detalhe { grid-template-columns: 1fr; }
}

.voltar {
  background: none;
  border: none;
  color: var(--fg-2);
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--e4);
  font-size: 13px;
}

.voltar:hover { color: var(--fg-1); }

.painel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: var(--e6);
  margin-bottom: var(--e4);
}

/* Rótulo de secção à maneira do DS (o h4 de rodapé, os kickers): Unbounded
   minúscula em tamanho, maiúscula em caixa, com respiro largo. */
.painel h2 {
  font-family: 'Unbounded', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--e3);
}

.original {
  white-space: pre-wrap;
  font-size: 14px;
  color: var(--fg-2);
  max-height: 260px;
  overflow-y: auto;
}

/* A nota interna vive num painel próprio, nunca dentro do texto do
   cliente. É a diferença que faz com que ela não possa ser enviada
   por engano — no rascunho da pasta Drafts ia dentro do corpo, numa
   moldura que a pessoa tinha de apagar à mão. */
.nota {
  background: #FFFBEB;
  border: 1px solid rgba(245, 158, 11, .35);
}

.nota h2 { color: #92400E; }
.nota .conteudo { font-size: 14px; white-space: pre-wrap; color: #78350F; }

.rascunho {
  width: 100%;
  /* Folgado de propósito: uma resposta de apoio tem 138 caracteres de
     mediana, e o que interessa é vê-la toda sem andar a arrastar a
     barra. Quem aprova tem de ler o fim — é onde está a assinatura. */
  min-height: 260px;
  padding: var(--e4);
  border: 1.5px solid var(--border);
  border-radius: var(--raio);
  background: var(--bg);
  resize: vertical;
  line-height: 1.6;
  transition: border-color var(--dur-normal), box-shadow var(--dur-normal);
}

.rascunho:hover:not([readonly]) { border-color: var(--border-hover); }

.rascunho[readonly] { color: var(--fg-2); cursor: default; }

/* Neutro, não azul. O azul (#5247F3) é o accent de um produto (MODO IA) e
   estava a competir com o âmbar da nota interna no mesmo ecrã — a regra da
   marca é um só accent por superfície. Isto é informação de estado, não
   marca: a barra preta à esquerda dá-lhe o peso sem gastar um accent.
   O azul fica reservado à etiqueta "está a tratar", que é permanente. */
.fase-aviso {
  display: flex;
  gap: var(--e3);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-left: 3px solid var(--black);
  border-radius: var(--raio);
  padding: var(--e4);
  font-size: 13px;
  color: var(--fg-2);
  margin-bottom: var(--e4);
}

.contexto-linha {
  display: flex;
  gap: var(--e3);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.contexto-linha:last-child { border-bottom: none; }
.contexto-linha dt { color: var(--fg-3); min-width: 130px; }
.contexto-linha dd { margin: 0; font-weight: 500; }

/* ─── Botão de copiar ────────────────────────────────────────── */
/* Enquanto a app não envia, é assim que a resposta chega ao cliente: a
   pessoa copia e cola no webmail. É um gesto que se repete dezenas de vezes
   por dia — tem de ser um clique e tem de dizer que resultou. */

.painel-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e3);
}

.painel-topo h2 { margin: 0; }

.copiar {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}

.copiar svg { width: 16px; height: 16px; }

.copiar:hover {
  border-color: var(--border-hover);
  color: var(--fg-1);
  background: var(--bg-raised);
}

/* Confirmação visível. Verde é status, não marca — é a mesma cor do
   "identidade verificada", e quer dizer a mesma coisa: correu bem. */
.copiar.feito {
  color: #047857;
  border-color: rgba(16, 185, 129, .4);
  background: rgba(16, 185, 129, .10);
}

.painel-accoes {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

/* O botão de enviar ao lado do de copiar: cheio, porque é a acção com
   consequências — tem de pesar mais. Tamanho btn--sm do DS. */
.botao.enviar {
  width: auto;
  padding: 10px 18px;
  font-size: 11px;
}

/* ─── Confirmar antes de enviar ──────────────────────────────── */
/* A última porta. O véu escurece o resto para a atenção ficar toda no que
   está prestes a sair — para quem, o quê, e os avisos. */

.veu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--e6);
  background: rgba(26, 26, 26, .5);
}

.dialogo {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-raised);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--e6);
}

.dialogo h2 {
  margin: 0 0 var(--e1);
  font-size: 16px;
  font-weight: 700;
}

.dialogo-linhas { margin: var(--e4) 0; }

/* O mesmo âmbar da nota interna: é a cor de "lê isto antes de agir". */
.dialogo-aviso {
  background: #FFFBEB;
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4);
  font-size: 13px;
  color: #78350F;
  margin-bottom: var(--e4);
}

.dialogo-aviso div + div { margin-top: var(--e2); }

/* A pré-visualização: o texto exactamente como vai sair, do primeiro
   "Olá" à assinatura. Quem confirma tem de o poder ler todo aqui. */
.dialogo-previa {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: var(--e4);
  max-height: 300px;
  overflow-y: auto;
}

.dialogo .erro { margin: var(--e4) 0 0; }
.dialogo .erro[hidden] { display: none; }

.dialogo-accoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--e3);
  margin-top: var(--e6);
}

.dialogo-accoes .botao { width: auto; }

/* ─── A conversa anterior ────────────────────────────────────── */
/* Fechado por omissão: na maior parte dos casos a conversa é nova e o
   histórico só ocupava espaço. Mas quando existe, é o que diz se a resposta
   preparada repete algo, contradiz algo, ou responde a uma pergunta que já
   tinha sido feita — e às vezes o que dissemos há meses já não é verdade. */

details.conversa summary {
  cursor: pointer;
  font-family: 'Unbounded', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  list-style-position: outside;
}

details.conversa[open] summary { margin-bottom: var(--e4); }

.fio { display: flex; flex-direction: column; gap: var(--e3); }

.msg {
  border-radius: var(--raio);
  padding: var(--e3) var(--e4);
  font-size: 13px;
}

/* O que o cliente escreveu à esquerda, o que nós respondemos recuado e mais
   claro. É o vaivém da conversa, sem precisar de o ler todo. */
.msg.deles { background: var(--bg-sunken); }

.msg.nossa {
  background: var(--bg);
  border: 1px solid var(--border);
  margin-left: var(--e6);
}

.msg-topo {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e2);
  font-size: 12px;
}

.msg-corpo {
  white-space: pre-wrap;
  color: var(--fg-2);
  max-height: 200px;
  overflow-y: auto;
}

/* ─── Foco visível ───────────────────────────────────────────── */
/* Isto é uma ferramenta de trabalho: passa-se o dia a saltar entre campos
   com o Tab. Nos campos, o foco é o do forms.css do DS (borda vermelha +
   anel suave); nos botões e ligações, o outline de 2px com afastamento,
   como no buttons.css. */

.rascunho:focus,
.campo-largo:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--vermelho-12);
  background: var(--bg-raised);
}

.botao:focus-visible,
.ligacao:focus-visible,
.voltar:focus-visible,
.copiar:focus-visible,
.interruptor:focus-visible,
details.painel summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ─── Definições ─────────────────────────────────────────────── */

.pequeno { font-size: 12px; color: var(--fg-3); }

.pendente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e2) 0;
  border-bottom: 1px solid rgba(245, 158, 11, .25);
}

.pendente:last-child { border-bottom: none; }

.campo-largo {
  width: 100%;
  padding: var(--e3) var(--e4);
  border: 1.5px solid var(--border);
  border-radius: var(--raio);
  background: var(--bg-raised);
  transition: border-color var(--dur-normal), box-shadow var(--dur-normal);
}

.campo-largo:hover { border-color: var(--border-hover); }

/* O antes e o depois lado a lado. Quem aprova tem de ver os dois sem
   trocar de ecrã — a comparação é a decisão. */
.comparar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e4);
}

.diff {
  margin: 0;
  padding: var(--e3);
  background: var(--bg-sunken);
  border-radius: var(--raio);
  font-family: ui-monospace, 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 420px;
  overflow-y: auto;
}

.diff.novo {
  background: rgba(16, 185, 129, .07);
  border: 1px solid rgba(16, 185, 129, .25);
}

/* O que mudou, linha a linha. Verde o que entra, vermelho o que sai — e só
   as linhas mexidas mais as vizinhas. Mostrar o texto todo parecia
   transparente mas escondia a mudança no meio do resto. */
.mudancas {
  font-family: ui-monospace, 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  overflow: hidden;
}

.mudancas .linha {
  display: flex;
  gap: var(--e2);
  padding: 1px var(--e3);
  white-space: pre-wrap;
  word-break: break-word;
}

.mudancas .sinal {
  flex: 0 0 12px;
  color: var(--fg-3);
  user-select: none;
}

.mudancas .igual { color: var(--fg-3); background: var(--bg-raised); }

.mudancas .acrescentada {
  background: rgba(16, 185, 129, .12);
  color: #065F46;
}
.mudancas .acrescentada .sinal { color: #059669; font-weight: 700; }

.mudancas .removida {
  background: rgba(239, 68, 68, .10);
  color: #991B1B;
  text-decoration: line-through;
  text-decoration-color: rgba(153, 27, 27, .35);
}
.mudancas .removida .sinal { color: #DC2626; font-weight: 700; }

.mudancas .salto {
  background: var(--bg-sunken);
  color: var(--fg-3);
  justify-content: center;
  padding: var(--e1) 0;
}

details.painel summary {
  cursor: pointer;
  font-family: 'Unbounded', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* O btn--outline do DS: transparente com borda preta, e no hover inverte. */
.botao.secundario {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--black);
}

.botao.secundario:hover:not(:disabled) {
  background: var(--black);
  color: var(--off-white);
  transform: translateY(-2px);
}

button.etiqueta { cursor: pointer; }

/* ─── Interruptor (o toggle do DS) ───────────────────────────── */
/* Ligar e desligar temas com o interruptor do forms.css: a pista fica
   vermelha quando está ligado e a bola desliza. Um badge a fazer de
   botão não dizia "isto muda de estado" — o interruptor diz. */

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  background: none;
  border: none;
  padding: var(--e1) 0;
  cursor: pointer;
  user-select: none;
}

.interruptor-pista {
  width: 40px;
  height: 22px;
  border-radius: var(--pilula);
  background: var(--border-hover);
  position: relative;
  flex-shrink: 0;
  transition: background var(--dur-normal);
}

.interruptor-pista::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform var(--dur-normal) var(--mola);
}

.interruptor.ligado .interruptor-pista { background: var(--red); }

.interruptor.ligado .interruptor-pista::after { transform: translateX(18px); }

.interruptor-rotulo {
  font-size: 13px;
  color: var(--fg-2);
}

.interruptor.ligado .interruptor-rotulo {
  color: var(--fg-1);
  font-weight: 600;
}

@media (max-width: 860px) {
  .comparar { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 640px) {
  .envolvente { padding: var(--e4); }
  .cartao-topo { flex-direction: column; align-items: flex-start; gap: var(--e1); }
}