/* ============================================================================
   BA Studio — wizard de fases
   ----------------------------------------------------------------------------
   Este arquivo só COMPÕE tokens de `colors_and_type.css` (design system oficial
   da Extreme Group). Nenhum hex, nenhuma fonte e nenhum px fora da escala 4px
   nascem aqui — quando você precisar de um valor, procure o token.

   Identidade do app (doutrina da E4.3): a marca é dark-first, mas o wizard é
   ferramenta de leitura e preenchimento longos. Então o escuro é MOLDURA
   (sidebar, barra) e o claro é ÁREA DE TRABALHO.

   Semântica de cor que não se negocia:
     azul  --xg-action    = interação padrão
     verde --xg-green-500 = avanço e GO, e nada mais (sinal, nunca decoração)
     --xg-danger  = NO_GO, negar, estado inválido
     --xg-warning = recusa informativa (bypass, fase bloqueada) — o usuário não
                    errou, o sistema explicou
   ============================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body.xg {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns var(--xg-dur) var(--xg-ease);
}
/* Modo foco: a faixa vira régua de ícones e a coluna do chat come a diferença. */
body.xg[data-faixa='mini'] { grid-template-columns: 260px minmax(0, 1fr) 56px; }
/* Página de entrada (/auth/entrada): sem a grade de três colunas do app, o conteúdo no centro. */
body.xg.entrada { display: flex; align-items: center; justify-content: center; overflow: auto; }
.entrada main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--xg-space-4);
  padding: var(--xg-space-6);
  text-align: center;
}

/* ── Sidebar de deals (moldura escura) ──────────────────────────────────── */

.sidebar {
  background: var(--xg-bg-inverse);
  color: var(--xg-fg-onDark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar__marca {
  display: flex;
  align-items: center;
  gap: var(--xg-space-3);
  padding: var(--xg-space-5);
  border-bottom: 1px solid var(--xg-border-onDark);
}
.sidebar__marca img { height: 22px; }
/* O logo já assina — o wordmark não repete "EDX" por extenso ao lado dele. */
.sidebar__titulo { display: flex; flex-direction: column; }
/* `nowrap` porque o nome do produto não se parte: quando faltar espaço, quem cede é a versão. */
.sidebar__wordmark { font: var(--xg-text-h4); color: var(--xg-fg-onDark); white-space: nowrap; }
/* Etiqueta de suporte, não parte do nome — por isso menor, apagada e na linha de baixo. */
.sidebar__versao { font-size: 11px; color: var(--xg-fg-onDarkMuted); }

/* A porta de entrada, acima da lista e separada dela por uma linha: é destino, não deal. */
.sidebar__fila {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--xg-border-onDark);
  padding: var(--xg-space-4) var(--xg-space-5);
  cursor: pointer;
  color: var(--xg-fg-onDark);
  font: var(--xg-text-small);
  font-weight: 600;
  transition: background var(--xg-dur-fast) var(--xg-ease);
}
.sidebar__fila:hover { background: var(--xg-neutral-900); }
.sidebar__fila[aria-current='true'] { background: var(--xg-neutral-900); border-left-color: var(--xg-action); }
.sidebar__fila:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }

.sidebar__busca { padding: var(--xg-space-3) var(--xg-space-4) 0; }
.sidebar__busca input {
  width: 100%;
  background: var(--xg-neutral-900);
  border: 1px solid var(--xg-neutral-700);
  color: var(--xg-fg-onDark);
  border-radius: var(--xg-radius-sm);
  padding: var(--xg-space-2) var(--xg-space-3);
  font: var(--xg-text-small);
  font-family: inherit;
}
.sidebar__busca input:focus { outline: none; border-color: var(--xg-action); }

.sidebar__secao {
  display: flex;
  align-items: center;
  gap: var(--xg-space-2);
  padding: var(--xg-space-4) var(--xg-space-4) var(--xg-space-2);
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--xg-tracking-label);
  color: var(--xg-fg-onDarkMuted);
}
.sidebar__recorte {
  margin-left: auto;
  display: flex;
  gap: 2px;
  background: var(--xg-neutral-900);
  border-radius: var(--xg-radius-pill);
  padding: 2px;
}
.sidebar__recorte button {
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  text-transform: uppercase;
  background: none;
  border: 0;
  color: var(--xg-fg-onDarkMuted);
  border-radius: var(--xg-radius-pill);
  padding: 2px var(--xg-space-2);
  cursor: pointer;
}
.sidebar__recorte button[aria-pressed='true'] { background: var(--xg-neutral-700); color: var(--xg-fg-onDark); }

.sidebar__lista { overflow-y: auto; padding: var(--xg-space-2) 0; flex: 1; }

/* Deal fechado ou parado: fica esmaecido em "Todos", com o motivo na linha de fase. Some
   em "Ativos" — mas some por FILTRO, e o contador do recorte ao lado diz quantos são. */
.deal--inativo { opacity: 0.6; }

.sidebar__rodape {
  border-top: 1px solid var(--xg-border-onDark);
  padding: var(--xg-space-4);
  font: var(--xg-text-caption);
  color: var(--xg-fg-onDarkMuted);
}
.sidebar__rodape strong { color: var(--xg-fg-onDark); font-weight: 600; }
/* A frase tem três contadores e a hora, então ela quebra em duas linhas: o ponto alinha pelo
   topo para não flutuar no meio do texto. */
.sync { display: flex; align-items: flex-start; gap: var(--xg-space-2); margin-top: var(--xg-space-2); }
.sync__ponto { width: 8px; height: 8px; border-radius: var(--xg-radius-pill); flex: none; margin-top: 0.4em; background: var(--xg-fg-subtle); }
/* A cor sai do SINAL, não do nome do estado: são três (em dia, trabalho a fazer, cego), e sete
   estados. Pendurar a cor no estado deixaria `fetch-falhou` cair no cinza por omissão — que é
   a cor certa, mas por acidente, e o próximo estado novo herdaria o acidente. */
.sync[data-sinal='verde'] .sync__ponto { background: var(--xg-success); }
.sync[data-sinal='atencao'] .sync__ponto { background: var(--xg-warning); }
.sync[data-sinal='cego'] .sync__ponto { background: var(--xg-fg-subtle); }
/* O gesto de git. Discreto de propósito: ele fica ao lado da identidade, não compete com
   "+ Novo deal", e só aparece quando há o que sincronizar. */
.sync__botao {
  margin-top: var(--xg-space-2);
  width: 100%;
  padding: var(--xg-space-2);
  border: 1px solid var(--xg-border-onDark);
  border-radius: var(--xg-radius-sm);
  background: transparent;
  color: var(--xg-fg-onDark);
  font: var(--xg-text-caption);
  cursor: pointer;
}
.sync__botao:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.sync__botao:disabled { opacity: 0.6; cursor: default; }

/* O modal do gesto: a lista do que vai é longa, então ele é mais largo que o de permissão.
 *
 * E ela é longa DE VERDADE: em 15/09/2026, com 22 arquivos, a lista empurrou o campo de
 * mensagem e os dois botões para fora da tela — o operador não tinha como confirmar nem
 * cancelar sem rolar a página inteira. Por isso nada aqui cresce sem teto (D1): o modal é uma
 * coluna de altura limitada, e o único pedaço que rola é o miolo. Cabeçalho, mensagem e botões
 * ficam onde estão, em qualquer altura de janela. */
.modal--largo {
  max-width: 46rem;
  width: 92vw;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
/* `min-height: 0` não é enfeite: sem ele, um filho de flex não encolhe abaixo do conteúdo, e
 * o `overflow-y` nunca chega a valer — o modal volta a crescer com a lista. */
.modal__miolo { overflow-y: auto; min-height: 0; margin: var(--xg-space-4) 0; }

.sync__responsavel { margin-bottom: var(--xg-space-5); }
.sync__responsavel > h4 {
  margin: 0 0 var(--xg-space-2);
  font: var(--xg-text-body-sm);
  color: var(--xg-fg-muted);
  border-bottom: 1px solid var(--xg-border);
  padding-bottom: var(--xg-space-1);
}
.sync__deal { margin-bottom: var(--xg-space-3); }
.sync__deal > label { display: flex; gap: var(--xg-space-2); align-items: baseline; cursor: pointer; }
.sync__resumo {
  margin: var(--xg-space-1) 0 0 var(--xg-space-5);
  font: var(--xg-text-body-sm);
  color: var(--xg-fg-muted);
}
.sync__arquivos { margin: var(--xg-space-1) 0 0 var(--xg-space-5); font: var(--xg-text-body-sm); }
.sync__arquivos > summary { cursor: pointer; color: var(--xg-fg-subtle); }
.sync__arquivos ul { list-style: none; padding: var(--xg-space-2) 0 0; margin: 0; }
/* Caminho longo quebra onde precisar, mas `break-all` partiria "orcamento" no meio por hábito.
 * `anywhere` só quebra quando a linha não cabe de outro jeito. */
.sync__arquivos li { font-family: var(--xg-font-mono); font-size: 0.75rem; overflow-wrap: anywhere; }
.sync__arquivos .mono { color: var(--xg-fg-subtle); margin-right: var(--xg-space-2); }

.sync__mensagem {
  width: 100%;
  margin-top: var(--xg-space-2);
  padding: var(--xg-space-2);
  border: 1px solid var(--xg-border);
  border-radius: var(--xg-radius-sm);
  font: var(--xg-text-mono-sm, monospace);
  resize: vertical;
}
.sync__passos { list-style: none; padding: 0; margin: var(--xg-space-3) 0; font: var(--xg-text-body-sm); }
.sync__passos li { margin-bottom: var(--xg-space-2); }
.sync__passos li[data-ok='false'] { color: var(--xg-danger); }

.deal {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  padding: var(--xg-space-3) var(--xg-space-5);
  cursor: pointer;
  color: inherit;
  font: var(--xg-text-small);
  transition: background var(--xg-dur-fast) var(--xg-ease);
}
.deal:hover { background: var(--xg-neutral-900); }
.deal[aria-current='true'] { background: var(--xg-neutral-900); border-left-color: var(--xg-action); }
.deal:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }

.deal__nome { display: block; font-weight: 600; color: var(--xg-fg-onDark); }
.deal__cliente { display: block; font: var(--xg-text-caption); color: var(--xg-fg-onDarkMuted); }
.deal__fase {
  display: block;
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--xg-tracking-label);
  color: var(--xg-fg-onDarkMuted);
  margin-top: var(--xg-space-1);
}

.pill-herdado {
  display: inline-block;
  margin-left: var(--xg-space-2);
  padding: 0 var(--xg-space-2);
  border: 1px solid var(--xg-border-onDark);
  border-radius: var(--xg-radius-pill);
  font: var(--xg-text-caption);
  color: var(--xg-fg-onDarkMuted);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Área central (trabalho, em claro) ──────────────────────────────────── */

/* A coluna central NÃO rola inteira: quem rola é o chat, por dentro. Era isso que fazia o
   campo de envio sair da tela conforme a conversa crescia — o instrumento de trabalho
   descendo junto com o histórico. */
.centro {
  background: var(--xg-paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--xg-border);
}
.centro__conteudo { padding: var(--xg-space-6); max-width: var(--xg-container); width: 100%; overflow-y: auto; }

.etapa__cabecalho { margin-bottom: var(--xg-space-6); }
.etapa__titulo { margin-top: var(--xg-space-2); }
.etapa__resumo { color: var(--xg-fg-muted); margin: var(--xg-space-2) 0 0; }

/* ── Cabeçalho de uma linha (bloco 2, item 1) ───────────────────────────── */

.cabecalho {
  border-bottom: 1px solid var(--xg-border);
  background: var(--xg-paper);
  /* Mesma disciplina das dobras: encolhe antes do chat, com a linha compacta como piso e
     rolagem própria quando expandido. TODO bloco acima do chat precisa ceder — basta um
     `flex: none` esquecido para a soma estourar os 100vh e o campo de envio sair da tela. */
  flex: 0 1 auto;
  min-height: 44px;
  max-height: 30vh;
  overflow-y: auto;
}
.cabecalho__compacto {
  display: flex;
  align-items: center;
  gap: var(--xg-space-3);
  width: 100%;
  padding: var(--xg-space-3) var(--xg-space-6);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  min-height: 44px;
}
.cabecalho__compacto:hover { background: var(--xg-bg-sunken); }
.cabecalho__compacto:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }
/* `.xg h1` da folha de tokens é (0,1,1) e ganharia de uma classe sozinha — o título viria em
   3rem e quebraria a linha de 44px em três. O seletor aqui empata em contexto e vence por
   ordem, sem `!important`. */
.cabecalho .cabecalho__nome {
  font: var(--xg-text-h4);
  letter-spacing: var(--xg-tracking-tight);
  margin: 0;
  white-space: nowrap;
}
.cabecalho__compacto .xg-eyebrow { white-space: nowrap; flex: none; }
.cabecalho__progresso { font: var(--xg-text-caption); font-family: var(--xg-font-mono); color: var(--xg-fg-subtle); flex: none; }
.cabecalho__retorno { font: var(--xg-text-caption); color: var(--xg-action); white-space: nowrap; }
.cabecalho__chevron {
  margin-left: auto;
  color: var(--xg-fg-subtle);
  font-size: 0.7rem;
  transition: transform var(--xg-dur-fast) var(--xg-ease);
}
body[data-cabecalho='1'] .cabecalho__chevron { transform: rotate(180deg); }
.cabecalho__detalhe { display: none; padding: 0 var(--xg-space-6) var(--xg-space-3); }
body[data-cabecalho='1'] .cabecalho__detalhe { display: block; }
/* Expandido, o cabeçalho aparece INTEIRO, como na primeira abertura (decisão do dono,
   05/09/2026): não cede e não rola por dentro. O conteúdo é banner + stepper + ações, uns
   200px; quem cede é o chat, que rola por dentro e tem o piso de 220px. O teto alto é só
   guarda contra estourar a coluna numa tela muito baixa. */
body[data-cabecalho='1'] .cabecalho { flex-shrink: 0; max-height: 60vh; }

/* O badge da versão da proposta. Derivado de `avancos[]`, nunca campo (D-M2.25). */
.badge-versao {
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  font-weight: 600;
  background: var(--xg-blue-50);
  color: var(--xg-blue-700);
  border: 1px solid var(--xg-blue-200);
  border-radius: var(--xg-radius-pill);
  padding: 0 var(--xg-space-2);
}

/* Só leitura (BA-66): a pílula da fila e o badge do cabeçalho. Tom de aviso, o mesmo do banner em
   #acoes; o texto fica na tinta porque o âmbar sobre branco não passa de 3:1. */
.marca-so-leitura {
  font: var(--xg-text-caption);
  font-weight: 600;
  color: var(--xg-fg);
  background: color-mix(in srgb, var(--xg-warning) 10%, var(--xg-paper));
  border: 1px solid var(--xg-warning);
  border-radius: var(--xg-radius-pill);
  padding: 0 var(--xg-space-2);
  white-space: nowrap;
  flex: none;
}

.banner-retorno {
  display: flex;
  align-items: center;
  gap: var(--xg-space-3);
  margin-top: var(--xg-space-3);
  padding: var(--xg-space-3) var(--xg-space-4);
  background: var(--xg-blue-50);
  border: 1px solid var(--xg-blue-200);
  border-radius: var(--xg-radius-sm);
  font: var(--xg-text-small);
  color: var(--xg-navy-500);
}

/* ── Dobras: fontes e trabalho da etapa ─────────────────────────────────── */

/* A dobra rola por DENTRO e tem teto: o painel da fase 7 tem nove linhas, e sem o teto ele
   empurrava o chat para fora da tela — que é exatamente o sintoma que abriu esta entrega,
   só que com o formulário no lugar do histórico. */
.dobra {
  border-bottom: 1px solid var(--xg-border);
  /* Encolhível (`flex-shrink: 1`) e com piso do próprio cabeçalho: é isto que faz a dobra
     CEDER antes do chat quando a coluna aperta. Com `flex: none` elas não cediam, a soma
     estourava os 100vh e quem saía da tela era o campo de envio — o oposto do que a entrega
     inteira existe para consertar. */
  flex: 0 1 auto;
  min-height: 2.75rem;
  max-height: 28vh;
  overflow-y: auto;
}
.dobra summary {
  display: flex;
  align-items: center;
  gap: var(--xg-space-2);
  padding: var(--xg-space-3) var(--xg-space-6);
  cursor: pointer;
  list-style: none;
  font: var(--xg-text-small);
  font-weight: 600;
  color: var(--xg-fg-muted);
  position: sticky;
  top: 0;
  background: var(--xg-paper);
}
.dobra summary::-webkit-details-marker { display: none; }
/* A seta fica à DIREITA, como o chevron do cabeçalho: mesma linguagem para "isto abre".
   O ▸ à esquerda era pequeno demais para ser lido como controle (primeiro deal, 05/09). */
.dobra summary::after {
  content: '▼';
  margin-left: auto;
  color: var(--xg-fg-subtle);
  font-size: 0.7rem;
  transition: transform var(--xg-dur-fast) var(--xg-ease);
}
.dobra[open] summary::after { transform: rotate(180deg); }
.dobra summary:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }
.dobra__contagem {
  background: var(--xg-neutral-100);
  border-radius: var(--xg-radius-pill);
  padding: 0 var(--xg-space-2);
  font: var(--xg-text-caption);
  color: var(--xg-fg-muted);
}
.dobra__corpo { padding: 0 var(--xg-space-6) var(--xg-space-4); }

/* A linha do avanço fica FORA da dobra: é o clique humano do AD-13. Sem o filete e a margem
   do `.acoes-da-etapa` original — aqui ela já é uma faixa separada por conta própria. */
.acoes { flex: none; padding: 0 var(--xg-space-6); }
.acoes:empty { display: none; }
.acoes .acoes-da-etapa { margin: var(--xg-space-3) 0; padding-top: 0; border-top: 0; }

/* Stepper 0–8 */
.stepper { display: flex; align-items: flex-start; margin: var(--xg-space-4) 0 var(--xg-space-2); }
.stepper__item { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.stepper__item::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--xg-neutral-200);
}
.stepper__item:first-child::before { display: none; }
.stepper__item[data-status='done']::before { background: var(--xg-success); }

.stepper__bola {
  width: 28px;
  height: 28px;
  border-radius: var(--xg-radius-pill);
  display: grid;
  place-items: center;
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  border: 2px solid var(--xg-neutral-300);
  color: var(--xg-fg-subtle);
  background: var(--xg-paper);
  position: relative;
  transition: background var(--xg-dur-fast) var(--xg-ease), border-color var(--xg-dur-fast) var(--xg-ease);
}
.stepper__item[data-status='done'] .stepper__bola {
  background: var(--xg-success);
  border-color: var(--xg-success);
  color: var(--xg-paper);
}
.stepper__item[data-status='doing'] .stepper__bola {
  background: var(--xg-action);
  border-color: var(--xg-action);
  color: var(--xg-action-fg);
}
/* Fase por onde o deal JÁ passou e para a qual voltou a ser `todo` depois de um retorno
   (D4). Contorno de concluída, preenchimento de pendente: esteve lá, não está mais feita. */
.stepper__item[data-status='visitada'] .stepper__bola {
  border-color: var(--xg-success);
  color: var(--xg-success);
  background: var(--xg-green-50);
}
/* Ícones Lucide inline: stroke, herdando a cor da bola. */
.stepper__bola svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

.stepper__rotulo {
  font: var(--xg-text-caption);
  color: var(--xg-fg-subtle);
  margin-top: var(--xg-space-2);
  text-align: center;
}
.stepper__item[data-status='doing'] .stepper__rotulo { color: var(--xg-fg); font-weight: 600; }

/* Formulário do discovery */
.campo { margin-bottom: var(--xg-space-5); }
.campo__rotulo { display: block; font: var(--xg-text-small); font-weight: 500; margin-bottom: var(--xg-space-1); }
.campo__obrigatorio { color: var(--xg-action); }
.campo__pergunta { font: var(--xg-text-caption); color: var(--xg-fg-muted); margin-bottom: var(--xg-space-2); }
.campo__linha { display: grid; grid-template-columns: 1fr 280px; gap: var(--xg-space-3); }

input[type='text'], textarea {
  width: 100%;
  font: var(--xg-text-small);
  padding: var(--xg-space-2) var(--xg-space-3);
  border: 1px solid var(--xg-border);
  border-radius: var(--xg-radius-sm);
  background: var(--xg-paper);
  color: var(--xg-fg);
  resize: vertical;
}
input[type='text']:focus, textarea:focus {
  outline: none;
  border-color: var(--xg-action);
  box-shadow: 0 0 0 3px var(--xg-focus-ring);
}
.campo--vazio input { border-color: var(--xg-border-strong); }

/* Botões */
.botao {
  font: var(--xg-text-small);
  font-weight: 600;
  padding: var(--xg-space-3) var(--xg-space-5);
  border-radius: var(--xg-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 40px;
  transition: background var(--xg-dur-fast) var(--xg-ease);
}
.botao:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--xg-focus-ring); }
.botao--acao { background: var(--xg-action); color: var(--xg-action-fg); }
.botao--acao:hover { background: var(--xg-action-hover); }
/* Link com cara de botão: `.xg a` (colors_and_type.css:189) pesa mais que `.botao--acao` e
   pintaria o texto da cor do fundo. */
.xg a.botao--acao { display: inline-block; color: var(--xg-action-fg); text-decoration: none; }
/* Verde é sinal, gasto em dois lugares no app inteiro: avançar e GO. */
.botao--avancar { background: var(--xg-green-500); color: var(--xg-ink); }
.botao--perigo { background: transparent; color: var(--xg-danger); border-color: var(--xg-danger); }
.botao--sutil { background: var(--xg-neutral-100); color: var(--xg-fg); }
/* Desabilitado perde TODA a cor de sinal, inclusive a borda: um NO_GO com contorno
   vermelho parece clicável mesmo sem estar, e prometer ação que não existe é pior que
   esconder a ação. */
.botao[disabled] {
  background: var(--xg-neutral-200);
  color: var(--xg-fg-subtle);
  border-color: transparent;
  cursor: not-allowed;
}

/* O "Registrar" de cada revisão fica à direita, longe do rótulo que ele registra. */
.criterio .botao { margin-left: auto; padding: var(--xg-space-1) var(--xg-space-3); min-height: 32px; }

.acoes-da-etapa {
  display: flex;
  gap: var(--xg-space-3);
  align-items: center;
  margin-top: var(--xg-space-6);
  padding-top: var(--xg-space-5);
  border-top: 1px solid var(--xg-border);
}

/* O cartão "Proposta em PPTX" (M2/E21), no fim do painel da fase 7. Vem depois do aceite das
   nove saídas porque é o que se faz DEPOIS delas — a proposta é a forma cliente-facing das
   saídas, e o cartão só habilita quando as nove estão aceitas. A régua à esquerda é o mesmo
   recurso do `.gate-card`: separar sem abrir uma caixa dentro de outra. */
.cartao-proposta {
  margin-top: var(--xg-space-6);
  padding: var(--xg-space-4) 0 0 var(--xg-space-4);
  border-top: 1px solid var(--xg-border);
  border-left: 2px solid var(--xg-action);
}
.cartao-proposta__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--xg-space-3);
  margin-bottom: var(--xg-space-3);
}
/* A régua troca de cor quando o deck ficou para trás do orçamento (E23): é o mesmo cartão, num
   estado em que gerar deixou de ser a ação óbvia. */
.cartao-proposta[data-desatualizada] { border-left-color: var(--xg-warning); }
.cartao-proposta__base { margin: 0 0 var(--xg-space-2); font: var(--xg-text-small); color: var(--xg-fg-subtle); }
.cartao-proposta[data-desatualizada] .cartao-proposta__base { color: var(--xg-warning); }
/* O tipo de proposta (E34) e a linha de onde os reais saem — a planilha, nunca o valor. */
.cartao-proposta__tipo { display: inline-flex; align-items: center; gap: var(--xg-space-1); }
.cartao-proposta__planilha { margin: 0 0 var(--xg-space-2); }
/* O botão de baixar é um `<a download>`, não um `<button>`: navegação, e o browser salva. */
.cartao-proposta a.botao { text-decoration: none; }
.cartao-proposta__telas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--xg-space-2); margin: var(--xg-space-2) 0; }
.cartao-proposta__tela { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cartao-proposta__tela img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--xg-bg-sunken); border: 1px solid var(--xg-border); }
.cartao-proposta__tela figcaption { display: flex; flex-direction: column; font: var(--xg-text-small); }
.cartao-proposta__sem-telas { margin: var(--xg-space-2) 0; color: var(--xg-fg-subtle); }
/* Sem isto o flex encolhe os dois e "Gerar proposta V1" quebra em duas linhas — o rótulo é
   mais longo que o dos outros botões de etapa porque carrega a versão, que é o que se assina. */
.cartao-proposta .acoes-da-etapa .botao { flex: none; }

/* A pasta do deal, na faixa direita (E16). Substituiu a lista de `input-files/` que vivia na
   dobra "Fontes recebidas" — a fonte recebida virou o primeiro nó desta árvore. */

.arvore, .arvore__filhos { list-style: none; margin: 0; padding: 0; }
/* O recuo é o ÚNICO sinal de hierarquia: o `rel` inteiro em cada linha não caberia na faixa,
   e é ele que vai no `title`, para quem precisa do caminho que o agente usa no `Read`. */
.arvore__filhos { padding-left: var(--xg-space-4); }
.arvore__pasta-do-deal { color: var(--xg-fg-subtle); margin: 0 0 var(--xg-space-2); }

.arvore__arquivo {
  display: flex;
  align-items: baseline;
  gap: var(--xg-space-2);
  padding: var(--xg-space-1) 0;
  font: var(--xg-text-small);
  color: var(--xg-fg);
  text-decoration: none;
}
.arvore__arquivo:hover { color: var(--xg-action); text-decoration: underline; }
.arvore__nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arvore__bytes, .arvore__contagem {
  flex: none;
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  color: var(--xg-fg-muted);
}
/* O status da comunicação (`· rascunho`, `· enviado`). Junto ao nome e não no fim da linha: é
   parte de como se lê o arquivo, não um número como o tamanho. */
.arvore__status {
  flex: none;
  font: var(--xg-text-caption);
  color: var(--xg-fg-muted);
}
/* O arquivo que mudou NESTE turno, até a próxima recarga. Um ponto, não um destaque: a marca
   responde "o que o agente acabou de gravar?" sem repintar a faixa inteira de novidade. */
.arvore__arquivo--novo .arvore__nome::after {
  content: '●';
  margin-left: var(--xg-space-2);
  color: var(--xg-action);
  font-size: 0.6em;
  vertical-align: middle;
}

.arvore__pasta > summary {
  display: flex;
  align-items: baseline;
  gap: var(--xg-space-2);
  padding: var(--xg-space-1) 0;
  cursor: pointer;
  list-style: none;
  font: var(--xg-text-small);
  font-weight: 600;
  color: var(--xg-fg-muted);
}
.arvore__pasta > summary::-webkit-details-marker { display: none; }
.arvore__pasta > summary::before {
  content: '▸';
  flex: none;
  color: var(--xg-fg-subtle);
  font-size: 0.7rem;
  transition: transform var(--xg-dur-fast) var(--xg-ease);
}
.arvore__pasta[open] > summary::before { transform: rotate(90deg); }
.arvore__pasta > summary:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }

.arvore__recarregar {
  float: right;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--xg-fg-subtle);
  font-size: 0.9rem;
  line-height: 1;
}
.arvore__recarregar:hover { color: var(--xg-action); }

/* Banner de recusa — tom informativo: o sistema explicando o processo */
.banner-recusa {
  border: 1px solid var(--xg-warning);
  background: color-mix(in srgb, var(--xg-warning) 10%, var(--xg-paper));
  border-radius: var(--xg-radius-md);
  padding: var(--xg-space-4) var(--xg-space-5);
  margin-bottom: var(--xg-space-5);
}
.banner-recusa__titulo { font: var(--xg-text-h4); margin-bottom: var(--xg-space-2); }
.banner-recusa ul { margin: var(--xg-space-2) 0 0; padding-left: var(--xg-space-5); }
.banner-recusa li { font: var(--xg-text-small); }
/* No composer o banner encosta no campo: mesma margem lateral da fila, sem o vão de baixo. */
.composer__claude { margin: var(--xg-space-3) var(--xg-space-6) 0; font: var(--xg-text-small); }

/* ── As duas abas do centro (M2/E20) ────────────────────────────────────── */

/* O deal é o palco e o chat é ferramenta: a aba Deal é sempre a primeira, e a última aberta
   NÃO é lembrada — é a D1 valendo em todo retorno ao deal. */
.abas {
  display: flex;
  gap: var(--xg-space-5);
  flex: none;
  padding: 0 var(--xg-space-6);
  background: var(--xg-paper);
  border-bottom: 1px solid var(--xg-border);
}
.abas__aba {
  display: flex;
  align-items: center;
  gap: var(--xg-space-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--xg-space-3) 0;
  min-height: 40px;
  cursor: pointer;
  font: var(--xg-text-small);
  font-weight: 600;
  color: var(--xg-fg-subtle);
  transition: color var(--xg-dur-fast) var(--xg-ease);
}
.abas__aba:hover { color: var(--xg-fg); }
.abas__aba[aria-selected='true'] { color: var(--xg-fg); border-bottom-color: var(--xg-action); }
.abas__aba:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }

/* Só acende o que ESPERA alguém: turno rodando, gate na fila, ou resposta que chegou com a
   aba fechada. Azul action; o warning fica para o gate, que é decisão parada esperando você. */
.abas__badge {
  min-width: 16px;
  height: 16px;
  padding: 0 var(--xg-space-1);
  border-radius: var(--xg-radius-pill);
  background: var(--xg-action);
  color: var(--xg-paper);
  font: var(--xg-text-caption);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.abas__badge--gate { background: var(--xg-warning); color: var(--xg-ink); }

/* A troca de aba não move DOM nenhum: o chat continua sendo a mesma `section#chat`, com o
   turno vivo e as mensagens chegando. A aba só decide o que está na tela. */
body[data-aba='chat'] #cabecalho,
body[data-aba='chat'] #dobra-etapa,
body[data-aba='chat'] #acoes,
body[data-aba='chat'] #deal-completo { display: none; }
body[data-aba='deal'] .chat { display: none; }

/* Na aba Deal quem rola é a COLUNA, e os tetos de altura dos blocos saem.
   Aqueles tetos (30vh no cabeçalho, 28vh na dobra, com rolagem por dentro) existem para
   proteger a altura do chat — sem eles a soma estoura os 100vh e o campo de envio sai da
   tela. Aqui não há campo de envio a proteger, e mantê-los escondia o botão "Salvar
   classificação" atrás de uma rolagem interna numa coluna com espaço sobrando. */
body[data-vista='etapa'][data-aba='deal'] .centro { overflow-y: auto; }
body[data-vista='etapa'][data-aba='deal'] #cabecalho,
body[data-vista='etapa'][data-aba='deal'] #dobra-etapa {
  flex: none;
  max-height: none;
  overflow: visible;
}
body[data-vista='etapa'][data-aba='deal'] #deal-completo { flex: none; overflow: visible; }

/* Linha de leitura confortável no formulário da etapa, como no de criar deal. */
#form-classificacao .campo { max-width: 62ch; }

/* ── Deal completo: a projeção em leitura (E20, Bloco 3) ────────────────── */

/* Toma o que sobra da coluna e rola por dentro, como o chat faz na outra aba — o que não pode
   é a coluna inteira rolar, que é o que tira o cabeçalho e o botão de avanço da tela. */
#deal-completo { flex: 1 1 0; min-height: 0; }
.deal-completo__vazio { color: var(--xg-fg-muted); }

/* Rótulo à esquerda, valor à direita, como a ficha imprime: é a mesma projeção, e ler as duas
   no mesmo formato é o que deixa claro que são o mesmo dado. */
.campo-lido {
  display: flex;
  gap: var(--xg-space-4);
  padding: var(--xg-space-2) 0;
  border-bottom: 1px solid var(--xg-neutral-100);
  font: var(--xg-text-small);
}
.campo-lido:last-child { border-bottom: 0; }
.campo-lido__rotulo { width: 200px; flex: none; font: var(--xg-text-caption); color: var(--xg-fg-subtle); }
.campo-lido__valor { flex: 1; }

/* Tabela larga não quebra a coluna: rola por dentro. */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font: var(--xg-text-small); }
.tabela th {
  text-align: left;
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--xg-tracking-label);
  color: var(--xg-fg-subtle);
  padding: 0 var(--xg-space-3) var(--xg-space-2);
  border-bottom: 1px solid var(--xg-border);
  white-space: nowrap;
}
.tabela td { padding: var(--xg-space-2) var(--xg-space-3); border-bottom: 1px solid var(--xg-neutral-100); vertical-align: top; }
.tabela .dir { text-align: right; }
.tabela .num { font-family: var(--xg-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela tr.grupo td {
  background: var(--xg-bg-sunken);
  font: var(--xg-text-caption);
  font-weight: 700;
  color: var(--xg-fg);
  text-transform: none;
  letter-spacing: 0;
}
.tabela tr.grupo .soma { float: right; font-family: var(--xg-font-mono); color: var(--xg-fg-subtle); font-weight: 500; }
/* O total do projeto leva as duas classes, como no documento — sem regra própria, porque a
   diferença entre ele e os outros totais é de posição, não de peso. */
.tabela tr.total td { border-top: 2px solid var(--xg-ink); border-bottom: 0; font-weight: 700; }

.item-lido {
  display: flex;
  gap: var(--xg-space-3);
  padding: var(--xg-space-3) 0;
  border-bottom: 1px solid var(--xg-neutral-100);
  font: var(--xg-text-small);
}
.item-lido:last-child { border-bottom: 0; }
.item-lido__corpo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-lido__meta { font: var(--xg-text-caption); color: var(--xg-fg-subtle); margin-top: var(--xg-space-1); }
.etiqueta-lida {
  flex: none;
  height: fit-content;
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  padding: 2px var(--xg-space-2);
  border-radius: var(--xg-radius-pill);
  background: var(--xg-neutral-100);
  color: var(--xg-fg-muted);
  border: 1px solid var(--xg-border);
}
.etiqueta-lida--numero { background: var(--xg-blue-50); color: var(--xg-blue-700); border-color: var(--xg-blue-200); }
.etiqueta-lida--alta { color: var(--xg-danger); }
.etiqueta-lida--media { color: var(--xg-warning); }

/* Calibrado × rascunho em COR DE TEXTO, como as marcas dos critérios na faixa: é status, e
   status aqui nunca vira fundo verde — o verde de sinal continua sendo só Avançar e GO. */
.selo-lido { font: var(--xg-text-caption); font-family: var(--xg-font-mono); margin-left: var(--xg-space-2); }
.selo-lido--calibrado { color: var(--xg-success); }
.selo-lido--rascunho { color: var(--xg-warning); }

.deal-completo__mais {
  background: none;
  border: 0;
  padding: var(--xg-space-2) 0;
  cursor: pointer;
  font: var(--xg-text-caption);
  color: var(--xg-action);
}
.deal-completo__mais:focus-visible { outline: 2px solid var(--xg-action); outline-offset: 2px; }

/* ── Novo deal (M2/E9) ──────────────────────────────────────────────────── */

/* Irmã da fila, e pelo mesmo motivo: sem deal aberto não há chat de etapa nem painel de
   estado para preencher — a coluna de trabalho ocupa a largura toda. */
body.xg[data-vista='novo'] { grid-template-columns: 260px minmax(0, 1fr); }
body[data-vista='novo'] .chat,
body[data-vista='novo'] .faixa { display: none; }

/* Os mesmos tokens do `.sidebar__fila`, que é o botão irmão: os dois vivem na moldura escura
   e navegam. O que os distingue é o traço tracejado — criar deal nunca é a ação principal da
   tela, e o verde continua reservado ao Avançar, que é o clique que move o pipeline (AD-13). */
.sidebar__novo {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px dashed var(--xg-border-onDark);
  padding: var(--xg-space-3) var(--xg-space-5);
  cursor: pointer;
  color: var(--xg-fg-onDark);
  font: var(--xg-text-small);
  font-weight: 600;
  transition: background var(--xg-dur-fast) var(--xg-ease);
}
.sidebar__novo:hover { background: var(--xg-neutral-900); }
.sidebar__novo[aria-current='true'] { background: var(--xg-neutral-900); border-left-color: var(--xg-action); }
.sidebar__novo:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }

.novo-deal__titulo { font: var(--xg-text-h3); margin: var(--xg-space-1) 0 var(--xg-space-2); }
.novo-deal__intro { color: var(--xg-fg-muted); margin-bottom: var(--xg-space-6); max-width: 62ch; }
#novo-deal .campo { max-width: 62ch; }
.novo-deal__opcionais { max-width: 62ch; margin-bottom: var(--xg-space-6); }
.campo__erro { font: var(--xg-text-caption); color: var(--xg-danger, #b3261e); margin-top: var(--xg-space-1); }

/* ── Configurações (M3/E24) ─────────────────────────────────────────────── */

/* Quarta vista, e irmã das outras duas sem deal: sem chat de etapa e sem painel de estado, a
   coluna de trabalho ocupa a largura toda. */
body.xg[data-vista='config'] { grid-template-columns: 260px minmax(0, 1fr); }
body[data-vista='config'] .chat,
body[data-vista='config'] .faixa { display: none; }

/* O mesmo botão do "+ Novo deal", no rodapé: ele navega, e navega para uma tela de consulta. */
.sidebar__config {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  border-top: 1px solid var(--xg-border-onDark);
  padding: var(--xg-space-3) var(--xg-space-4);
  cursor: pointer;
  color: var(--xg-fg-onDarkMuted);
  font: var(--xg-text-caption);
  transition: background var(--xg-dur-fast) var(--xg-ease);
}
.sidebar__config:hover { background: var(--xg-neutral-900); color: var(--xg-fg-onDark); }
.sidebar__config[aria-current='true'] { background: var(--xg-neutral-900); color: var(--xg-fg-onDark); border-left-color: var(--xg-action); }
.sidebar__config:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }

/* Encerrar a sessão do login (BA-38). Só existe no modo de login; no local não há sessão. */
.sidebar__sair {
  margin-top: var(--xg-space-2);
  width: 100%;
  padding: var(--xg-space-2);
  border: 1px solid var(--xg-border-onDark);
  border-radius: var(--xg-radius-sm);
  background: transparent;
  color: var(--xg-fg-onDarkMuted);
  font: var(--xg-text-caption);
  cursor: pointer;
  transition: background var(--xg-dur-fast) var(--xg-ease);
}
.sidebar__sair:hover:not(:disabled) { background: var(--xg-neutral-900); color: var(--xg-fg-onDark); }
.sidebar__sair:disabled { cursor: default; color: var(--xg-fg-subtle); }
.sidebar__sair:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }

/* A conexão com o Claude (BA-36): mesmo tom do rodapé do operador, logo abaixo dele. O ponto
   reaproveita `.sync`, com o sinal `ok` no verde. */
.sidebar__claude {
  padding: 0 var(--xg-space-4) var(--xg-space-4);
  font: var(--xg-text-caption);
  color: var(--xg-fg-onDarkMuted);
}
.sidebar__claude:empty { display: none; }
.sidebar__claude .sync { margin-top: 0; }
.sync[data-sinal='ok'] .sync__ponto { background: var(--xg-success); }
.sidebar__claude-conta {
  margin-top: var(--xg-space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar__claude-aviso { margin-top: var(--xg-space-1); color: var(--xg-warning); }
/* O campo do código no modal de login: o mesmo do modal de sincronia, com folga até os botões. */
.login-claude__codigo { margin-bottom: var(--xg-space-4); }

.config__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--xg-space-4);
  margin-bottom: var(--xg-space-5);
}
.config__topo h2 { font: var(--xg-text-h3); margin: var(--xg-space-1) 0; }
.config__topo .xg-small { max-width: 68ch; color: var(--xg-fg-muted); }
.config__select { font: var(--xg-text-small); font-family: inherit; padding: var(--xg-space-1) var(--xg-space-2); max-width: 44rem; }

/* Uma variável por linha: nome, valor, procedência e a descrição — nessa ordem, porque é a
   ordem em que a pergunta aparece ("o que é isso?" vem depois de "o que está valendo?"). */
.config__var {
  display: grid;
  grid-template-columns: minmax(12rem, auto) minmax(0, 1fr);
  gap: var(--xg-space-1) var(--xg-space-3);
  padding: var(--xg-space-2) 0;
  border-bottom: 1px solid var(--xg-border);
}
.config__valor { word-break: break-all; }
.config__descricao { grid-column: 1 / -1; color: var(--xg-fg-subtle); }
/* Caminho que não existe, ou recurso que não abriu. Vermelho porque é o que trava uma
   capacidade inteira — o deck-base ausente apaga o botão de gerar proposta. */
.config__var[data-ruim] .config__valor { color: var(--xg-danger); }
.config__problema { grid-column: 1 / -1; color: var(--xg-danger); }
/* Capacidade degradada que NÃO trava nada: o CLI não respondeu a consulta de modelos e o
   catálogo caiu para a tabela local. Amarelo e não vermelho — a instância funciona, e o que
   mudou foi de onde a lista veio (E29). */
.config__degradado { color: var(--xg-warning); }

.config__peso { display: flex; align-items: center; gap: var(--xg-space-3); padding: var(--xg-space-1) 0; }
.config__peso .barra { flex: 1; max-width: 22rem; }
.config__peso[data-ruim] .barra__cheio { background: var(--xg-danger); }

.config__skill { padding: var(--xg-space-3) 0; border-bottom: 1px solid var(--xg-border); }
.config__skill-topo {
  display: flex;
  align-items: baseline;
  gap: var(--xg-space-3);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--xg-fg);
  font: var(--xg-text-small);
}
.config__skill-topo:hover { color: var(--xg-action); }
.config__carga {
  font: var(--xg-text-caption);
  padding: 0 var(--xg-space-2);
  border-radius: var(--xg-radius-pill);
  border: 1px solid var(--xg-border);
}
.config__carga[data-carga='automatica'] { border-color: var(--xg-action); color: var(--xg-action); }
/* O `SKILL.md` inteiro, só leitura. Rola por dentro: a doutrina da fase 7 tem 5 mil caracteres,
   e aberta por inteiro ela empurraria as outras quatorze skills para fora da tela. */
.config__skill-corpo {
  margin: var(--xg-space-2) 0 0;
  padding: var(--xg-space-3);
  max-height: 24rem;
  overflow: auto;
  background: var(--xg-paper);
  border: 1px solid var(--xg-border);
  border-radius: var(--xg-radius-sm);
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  white-space: pre-wrap;
}

.config__fase { padding: var(--xg-space-2) 0; border-bottom: 1px solid var(--xg-border); }
.config__fase summary { cursor: pointer; }
.config__tabela { width: 100%; border-collapse: collapse; margin-top: var(--xg-space-2); font: var(--xg-text-caption); }
.config__tabela th, .config__tabela td { text-align: left; padding: var(--xg-space-1) var(--xg-space-2); border-bottom: 1px solid var(--xg-border); }
.config__tabela th { color: var(--xg-fg-subtle); font-weight: 600; }
/* A cor diz a decisão, e ela é a mesma em toda a tela: liberado, pergunta, nega. */
.config__tabela td[data-decisao='autonomo'] { color: var(--xg-success); }
.config__tabela td[data-decisao='gate-humano'],
.config__tabela td[data-decisao='pergunta-ao-usuario'] { color: var(--xg-warning); }
.config__tabela td[data-decisao='negar'] { color: var(--xg-danger); }
.config__lista { color: var(--xg-fg-subtle); line-height: 1.7; }

/* ── Fila de trabalho (Radar sobre a coleção) ───────────────────────────── */

/* Na fila não há deal, então não há chat de etapa nem painel de estado para preencher.
   A área de trabalho ocupa a largura toda em vez de emoldurar duas colunas vazias. */
body.xg[data-vista='fila'] { grid-template-columns: 260px minmax(0, 1fr); }
body[data-vista='fila'] .chat,
body[data-vista='fila'] .faixa { display: none; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--xg-space-3);
  margin-bottom: var(--xg-space-6);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-1);
  text-align: left;
  padding: var(--xg-space-4);
  background: var(--xg-paper);
  border: 1px solid var(--xg-border);
  border-radius: var(--xg-radius-md);
  cursor: pointer;
  color: inherit;
  transition: border-color var(--xg-dur-fast) var(--xg-ease);
}
.tile:hover { border-color: var(--xg-border-strong); }
.tile[aria-pressed='true'] { border-color: var(--xg-action); }
.tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--xg-focus-ring); }

.tile__numero { font: var(--xg-text-h2); font-family: var(--xg-font-mono); }
.tile__rotulo { font: var(--xg-text-caption); color: var(--xg-fg-muted); }
/* Zero continua na tela — sumir com o tile faria o layout dançar a cada mudança de recorte,
   e "nenhum" é informação. Só o peso muda. */
.tile--zero .tile__numero { color: var(--xg-fg-subtle); }

.fila__recorte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xg-space-4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--xg-border);
  margin-bottom: var(--xg-space-4);
}

.abas { display: flex; gap: var(--xg-space-1); }
.aba {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--xg-space-3) var(--xg-space-3);
  cursor: pointer;
  color: var(--xg-fg-muted);
  font: var(--xg-text-small);
}
.aba[aria-selected='true'] { color: var(--xg-fg); border-bottom-color: var(--xg-action); font-weight: 600; }
.aba:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }
.aba__contador { color: var(--xg-fg-subtle); }

.fila__dono { display: flex; gap: var(--xg-space-2); padding-bottom: var(--xg-space-2); }
.chip {
  background: none;
  border: 1px solid var(--xg-border);
  border-radius: var(--xg-radius-pill);
  padding: var(--xg-space-1) var(--xg-space-3);
  cursor: pointer;
  font: var(--xg-text-caption);
  color: var(--xg-fg-muted);
}
.chip[aria-pressed='true'] { border-color: var(--xg-action); color: var(--xg-fg); }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--xg-focus-ring); }

.fila__recorte-ativo {
  display: flex;
  align-items: center;
  gap: var(--xg-space-3);
  font: var(--xg-text-small);
  margin: 0 0 var(--xg-space-4);
}

.fila__lista { list-style: none; margin: 0; padding: 0; }

.linha {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--xg-paper);
  border: 0;
  border-bottom: 1px solid var(--xg-border);
  padding: var(--xg-space-4) var(--xg-space-2);
  cursor: pointer;
  color: inherit;
  font: var(--xg-text-body);
}
.linha:hover { background: var(--xg-bg-sunken); }
.linha:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }

.linha__topo { display: flex; align-items: baseline; gap: var(--xg-space-3); }
.linha__nome { font-weight: 600; }
.linha__cliente { font: var(--xg-text-caption); color: var(--xg-fg-muted); flex: 1; }
.linha__quando { font: var(--xg-text-caption); color: var(--xg-fg-subtle); }

.linha__meio {
  display: flex;
  align-items: center;
  gap: var(--xg-space-3);
  margin: var(--xg-space-2) 0;
}
.linha__fase {
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  letter-spacing: var(--xg-tracking-label);
  color: var(--xg-fg-muted);
  flex: none;
  min-width: 180px;
}
.linha__dono { font: var(--xg-text-caption); color: var(--xg-fg-muted); flex: none; }

.linha__baixo { display: flex; align-items: center; gap: var(--xg-space-2); color: var(--xg-fg-subtle); }

/* Barra de completude. Neutra de propósito: verde aqui seria decoração, e verde neste app
   é sinal de avanço e GO. O que a barra diz é "quanto andou", não "está bom". */
.barra {
  display: block;
  flex: 1;
  height: 4px;
  background: var(--xg-neutral-200);
  border-radius: var(--xg-radius-pill);
  overflow: hidden;
}
.barra__cheio { display: block; height: 100%; background: var(--xg-fg-subtle); }

.pill-sinal {
  border: 1px solid var(--xg-border-strong);
  border-radius: var(--xg-radius-pill);
  padding: 0 var(--xg-space-2);
  font: var(--xg-text-caption);
  color: var(--xg-fg-muted);
  white-space: nowrap;
}

/* ── Faixa direita, recolhível (bloco 2 item 4, bloco 3) ────────────────── */

.faixa {
  background: var(--xg-bg-sunken);
  border-left: 1px solid var(--xg-border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--xg-space-3) var(--xg-space-5) var(--xg-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-2);
}
.faixa__toggle {
  align-self: flex-end;
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--xg-radius-sm);
  background: var(--xg-neutral-100);
  color: var(--xg-fg-muted);
  cursor: pointer;
}
.faixa__toggle:hover { background: var(--xg-neutral-200); }
.faixa__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--xg-focus-ring); }

body[data-faixa='mini'] .faixa { padding: var(--xg-space-3) var(--xg-space-2); align-items: center; }
body[data-faixa='mini'] .faixa__blocos { display: none; }
body[data-faixa='mini'] .faixa__toggle { align-self: center; transform: rotate(180deg); }

/* A régua de ícones do modo foco. Só existe recolhida — e o badge é o que impede o modo
   foco de esconder que há um gate esperando alguém. */
.faixa-mini { display: none; flex-direction: column; gap: var(--xg-space-2); align-items: center; margin-top: var(--xg-space-2); }
body[data-faixa='mini'] .faixa-mini { display: flex; }
.faixa-mini__item {
  position: relative;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--xg-radius-sm);
  background: var(--xg-paper);
  cursor: pointer;
  font-size: 1rem;
}
.faixa-mini__item:hover { background: var(--xg-neutral-100); }
.faixa-mini__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--xg-radius-pill);
  background: var(--xg-warning);
  color: var(--xg-paper);
  font: var(--xg-text-caption);
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Toda seção da faixa é `details` (E16/D8). O `summary` fechado leva o título e o número que
   resume a seção — é ele que responde "preciso abrir isto?" sem ocupar altura para responder.
   O chevron é o mesmo da dobra da área central (E8): uma linguagem só para "isto abre". */
.painel__secao { margin-bottom: var(--xg-space-5); }
.painel__secao > summary {
  display: flex;
  align-items: baseline;
  gap: var(--xg-space-2);
  cursor: pointer;
  list-style: none;
  padding: var(--xg-space-1) 0;
}
.painel__secao > summary::-webkit-details-marker { display: none; }
.painel__secao > summary::after {
  content: '▼';
  margin-left: auto;
  color: var(--xg-fg-subtle);
  font-size: 0.6rem;
  transition: transform var(--xg-dur-fast) var(--xg-ease);
}
.painel__secao[open] > summary::after { transform: rotate(180deg); }
.painel__secao > summary:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }
/* O caption já era o rótulo da seção; dentro do summary ele perde só a margem de baixo. */
.painel__secao > summary .painel__caption { margin-bottom: 0; }
.painel__resumo { font: var(--xg-text-caption); font-family: var(--xg-font-mono); color: var(--xg-fg-muted); }
.painel__corpo { padding-top: var(--xg-space-2); }
/* Caption mono uppercase: o rótulo de seção do app. Vale no painel e na área central —
   por isso o seletor é compartilhado, e não duplicado com outro nome. */
.painel__caption,
.secao__caption {
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--xg-tracking-label);
  color: var(--xg-fg-subtle);
  margin-bottom: var(--xg-space-3);
}

/* Export da ficha: os dois modos lado a lado, em sutil. Não é avanço nem GO — sem verde. */
.painel__acoes { display: flex; gap: var(--xg-space-2); margin: var(--xg-space-3) 0; }
.painel__acoes .botao { flex: 1; padding: var(--xg-space-2) var(--xg-space-3); min-height: 36px; }
.ficha__destino { color: var(--xg-fg-subtle); word-break: break-word; }

.criterio { display: flex; gap: var(--xg-space-2); margin-bottom: var(--xg-space-3); font: var(--xg-text-small); }
.criterio__marca { flex: none; width: 16px; font-family: var(--xg-font-mono); }
.criterio--ok .criterio__marca { color: var(--xg-success); }
.criterio--falta .criterio__marca { color: var(--xg-fg-subtle); }
.criterio--manual .criterio__marca { color: var(--xg-warning); }
.criterio__motivo { font: var(--xg-text-caption); color: var(--xg-fg-muted); display: block; }
.criterio__via {
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  color: var(--xg-fg-subtle);
}

/* Valores numéricos em mono, no app inteiro */
.mono { font-family: var(--xg-font-mono); }
.custo__valor { font: var(--xg-text-h3); font-family: var(--xg-font-mono); }
.custo__fonte { font: var(--xg-text-caption); color: var(--xg-fg-muted); }
/* Custo com fonte de assinatura perde o destaque: `US$ 0,0000` em corpo de título ao lado
   de 14 turnos mina a confiança em vez de informar. Com fonte medida, volta ao `.custo__valor`. */
.custo__linha { font: var(--xg-text-caption); color: var(--xg-fg-subtle); }

/* Par chave/valor da Ficha e do Estado. */
.kv { display: flex; justify-content: space-between; gap: var(--xg-space-3); font: var(--xg-text-small); padding: 2px 0; }
.kv dt { color: var(--xg-fg-muted); }
.kv dd { margin: 0; font-weight: 500; text-align: right; }

/* O Gate na faixa só existe quando trava algo AGORA, e sempre com dono nomeado — é o que
   mata a incoerência "gate pendente + Avançar liberado". Ele usa o mesmo tom de recusa
   informativa do resto do app: o sistema explicando o processo, não alarme. */
.gate-card {
  border: 1px solid var(--xg-warning);
  background: color-mix(in srgb, var(--xg-warning) 10%, var(--xg-paper));
  border-radius: var(--xg-radius-sm);
  padding: var(--xg-space-3) var(--xg-space-4);
  font: var(--xg-text-small);
}
.gate-card ul { margin: var(--xg-space-2) 0 0; padding-left: var(--xg-space-5); }
.gate-card__dono { display: flex; align-items: center; gap: var(--xg-space-2); margin-top: var(--xg-space-3); font-weight: 600; }
.avatar {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--xg-radius-pill);
  background: var(--xg-navy-500);
  color: var(--xg-fg-onDark);
  display: grid;
  place-items: center;
  font: var(--xg-text-caption);
  font-weight: 700;
}

.proxima-acao {
  background: var(--xg-green-50);
  border: 1px solid var(--xg-green-200);
  border-radius: var(--xg-radius-sm);
  padding: var(--xg-space-3) var(--xg-space-4);
  font: var(--xg-text-small);
}
.pendencia { display: flex; gap: var(--xg-space-2); align-items: baseline; font: var(--xg-text-small); padding: var(--xg-space-1) 0; }
.pendencia__quem { font: var(--xg-text-caption); color: var(--xg-fg-subtle); font-family: var(--xg-font-mono); }
.pendencia--respondida { opacity: 0.6; }
.versoes { font: var(--xg-text-caption); color: var(--xg-fg-subtle); margin-top: var(--xg-space-2); }

.decisao { font: var(--xg-text-small); margin-bottom: var(--xg-space-3); }
.decisao__meta { font: var(--xg-text-caption); color: var(--xg-fg-subtle); font-family: var(--xg-font-mono); }
.decisao--bloqueio { border-left: 2px solid var(--xg-warning); padding-left: var(--xg-space-3); }

.vazio { font: var(--xg-text-small); color: var(--xg-fg-muted); }

/* Lacunas do Radar do deal. Severidade alta ganha a barra de atenção — é a mesma família do
   `.decisao--bloqueio`: o sistema apontando o que trava, sem alarme. */
.lacunas { list-style: none; margin: var(--xg-space-2) 0 0; padding: 0; }
.lacuna { font: var(--xg-text-small); margin-bottom: var(--xg-space-3); }
.lacuna[data-severidade='alta'] { border-left: 2px solid var(--xg-warning); padding-left: var(--xg-space-3); }
.lacuna__meta { display: block; color: var(--xg-fg-subtle); font-family: var(--xg-font-mono); }

/* ── Chat da etapa ──────────────────────────────────────────────────────── */

/* O chat é o PALCO: ele toma toda a altura que sobra e rola por dentro. `min-height: 0` é o
   que faz um filho de flex poder encolher abaixo do conteúdo — sem ele, a área de mensagens
   empurra o composer para fora da tela conforme a conversa cresce, que era o sintoma que
   abriu esta entrega. */
/* O chat toma toda a altura que sobra, e `min-height: 0` é o que permite a ele ENCOLHER
   abaixo do conteúdo — sem isso, a área de mensagens empurra o composer para fora da tela
   conforme a conversa cresce, que é o sintoma que abriu esta entrega.
   Quem garante que "o que sobra" é bastante são os tetos das dobras acima: um piso aqui
   pareceria mais direto e produzia o oposto, porque as dobras não encolhem e a soma
   estourava a coluna — aí quem saía da tela era o campo de envio. */
/* Base ZERO, não `auto`: com `auto` a base do chat é a altura do histórico inteiro, e a
   negociação de encolhimento do flex é proporcional à base — conforme a conversa cresce, o
   chat esmaga cabeçalho e dobras até o piso delas (o cabeçalho expandido virava uma tira de
   10px com rolagem própria; primeiro deal real, 05/09/2026). Com base zero o chat pega o que
   SOBRA depois de os blocos acima tomarem o seu tamanho, limitado pelos tetos deles. */
.chat { display: flex; flex-direction: column; flex: 1 1 0; min-height: 220px; }
.chat__mensagens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--xg-space-4) var(--xg-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-3);
}

/* Colapsável desde a E16 (D9): fechada é UMA linha — "Sessão · <título> · <meta>" — e é ela
   que devolve altura ao palco em todo turno. Os dois botões só aparecem aberta, porque são
   gesto ocasional; o que é DADO (qual conversa, quantos turnos) fica visível fechada. */
.chat__barra {
  border-top: 1px solid var(--xg-border);
  border-bottom: 1px solid var(--xg-border);
  flex: none;
}
.chat__barra > summary {
  display: flex;
  align-items: baseline;
  gap: var(--xg-space-3);
  padding: var(--xg-space-2) var(--xg-space-6);
  cursor: pointer;
  list-style: none;
}
.chat__barra > summary::-webkit-details-marker { display: none; }
.chat__barra > summary::after {
  content: '▼';
  margin-left: auto;
  color: var(--xg-fg-subtle);
  font-size: 0.6rem;
  transition: transform var(--xg-dur-fast) var(--xg-ease);
}
.chat__barra[open] > summary::after { transform: rotate(180deg); }
.chat__barra > summary:focus-visible { outline: 2px solid var(--xg-action); outline-offset: -2px; }
/* O título da conversa é o que sobra quando tudo o mais recolhe — ele não pode quebrar linha
   nem empurrar o `meta` para fora: a barra fechada vale por ter exatamente uma linha. */
.sessoes__titulo {
  font: var(--xg-text-small);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat__barra-corpo {
  display: flex;
  align-items: center;
  gap: var(--xg-space-3);
  padding: 0 var(--xg-space-6) var(--xg-space-3);
}
.chat__barra .botao { min-height: 30px; padding: var(--xg-space-1) var(--xg-space-3); white-space: nowrap; flex: none; }
.chat__barra select { max-width: 20rem; }

/* Bolhas (M2/E15, D6): quem falou se lê pela POSIÇÃO, não por um rótulo que se perde numa
   conversa de trinta turnos. O operador à direita com fundo azul claro — o azul é interação no
   app, e aqui ele marca a entrada de quem opera; o agente à esquerda sem fundo, porque a
   resposta é o corpo do documento e não um cartão.

   Só `.msg` vira bolha. Cartão de saída, linha de ferramenta, extrato de gravações, custo e
   pedido de gate continuam na LARGURA TODA: eles são do sistema, não de um dos dois lados da
   conversa, e encaixotá-los faria o operador procurar autor em algo que não tem. */
/* A posição sai de `margin`, e não de `align-self`: `acrescentar()` embrulha cada mensagem num
   div anônimo, então `.msg` NÃO é filho direto do flex container — `align-self` não se aplica, e
   a bolha do operador ficava à esquerda com a regra certa escrita. */
.msg {
  margin-bottom: var(--xg-space-4);
  font: var(--xg-text-body);
  max-width: 75%;
}
.msg--eu {
  margin-left: auto;
  white-space: pre-wrap;
  background: var(--xg-blue-50);
  color: var(--xg-fg);
  border-radius: var(--xg-radius-md);
  padding: var(--xg-space-2) var(--xg-space-3);
}
.msg--agente p { margin: 0 0 var(--xg-space-2); }
.msg--agente h3, .msg--agente h4, .msg--agente h5, .msg--agente h6 { margin: var(--xg-space-3) 0 var(--xg-space-1); font: var(--xg-text-body); font-weight: 600; }
.msg--agente ul, .msg--agente ol { margin: 0 0 var(--xg-space-2); padding-left: var(--xg-space-5, 1.5em); }
.msg--agente li { margin-bottom: 2px; }
.msg--agente code { font-family: var(--xg-font-mono); font-size: 0.92em; }
.msg--agente pre { overflow-x: auto; font-family: var(--xg-font-mono); font-size: 0.9em; padding: var(--xg-space-2); border: 1px solid var(--xg-border, currentColor); }
.msg--agente table { border-collapse: collapse; margin: 0 0 var(--xg-space-2); font-size: 0.95em; display: block; overflow-x: auto; }
.msg--agente th, .msg--agente td { border: 1px solid var(--xg-border, currentColor); padding: 2px var(--xg-space-2); text-align: left; vertical-align: top; }
.msg--agente th { font-weight: 600; }
.msg__quem {
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--xg-tracking-label);
  color: var(--xg-fg-subtle);
  display: block;
  margin-bottom: var(--xg-space-1);
}
.msg__ferramenta {
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  color: var(--xg-fg-subtle);
  padding: var(--xg-space-1) 0;
}
.msg__raciocinio {
  display: none;
  font: var(--xg-text-caption);
  font-style: italic;
  color: var(--xg-fg-subtle);
  white-space: pre-wrap;
  border-left: 2px solid var(--xg-border, currentColor);
  padding: var(--xg-space-1) var(--xg-space-2);
  margin: var(--xg-space-1) 0;
}
body[data-raciocinio='1'] .msg__raciocinio { display: block; }
.composer__campo--check { flex-direction: row; align-items: center; gap: var(--xg-space-1); }
.msg__custo { font: var(--xg-text-caption); font-family: var(--xg-font-mono); color: var(--xg-fg-subtle); }

/* Fim de turno: o que ele gravou no deal (M2/E12). Discreto quando gravou — é o esperado —,
   e `--xg-warning` quando não gravou nada: o operador não errou, o sistema está explicando que
   o turno terminou sem deixar registro. Um turno estéril terminando igual a um produtivo foi o
   que fez um turno inteiro de leitura paga virar texto no chat sem ninguém notar. */
.msg__gravacoes {
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  color: var(--xg-fg-subtle);
  padding: var(--xg-space-1) 0;
}
.msg__gravacoes--zero {
  color: var(--xg-warning);
  border-left: 2px solid var(--xg-warning);
  padding-left: var(--xg-space-2);
}

/* Cartão de saída inline no chat (bloco 2, item 3): a saída aparece NO PONTO em que foi
   gerada, para ser lida antes de aceita. Verde é o único sinal de "produzido e íntegro"
   que o app tem, e aqui ele qualifica a saída — não é decoração de fundo.

   Dois tipos, com ações diferentes de propósito:
   · saída PROPOSTA (fase 7) — tem "Aceitar", porque existe promoção assinada no estado;
   · ARQUIVO gerado           — tem só "Abrir", porque aceite de arquivo não existe no SAD,
     e um botão que não muda estado é o mecanismo decorativo da D-M2.8 com outro nome. */
.cartao-saida {
  align-self: flex-start;
  max-width: 82%;
  background: var(--xg-green-50);
  border: 1px solid var(--xg-green-200);
  border-radius: var(--xg-radius-md);
  padding: var(--xg-space-3) var(--xg-space-4);
  font: var(--xg-text-small);
}
.cartao-saida--arquivo { background: var(--xg-bg-sunken); border-color: var(--xg-border); }
.cartao-saida__topo { display: flex; align-items: center; gap: var(--xg-space-2); margin-bottom: var(--xg-space-2); }
.cartao-saida__nome { font-weight: 600; }
.cartao-saida__estado {
  margin-left: auto;
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  color: var(--xg-fg-muted);
}
.cartao-saida__resumo { color: var(--xg-fg-muted); margin-bottom: var(--xg-space-3); white-space: pre-wrap; }
/* O corpo da saída proposta rola por dentro: o cartão tem teto, o texto não é cortado. */
.cartao-saida__corpo { white-space: normal; color: var(--xg-fg); max-height: 18rem; overflow-y: auto; padding-right: var(--xg-space-2); }
.cartao-saida__acoes { display: flex; gap: var(--xg-space-2); flex-wrap: wrap; }
.cartao-saida .botao { min-height: 30px; padding: var(--xg-space-1) var(--xg-space-3); font: var(--xg-text-caption); font-weight: 600; }

/* Barra de sessões: fica no topo do chat, acima das mensagens, porque ela QUALIFICA o que
   está sendo lido — qual conversa, de que fase e de que versão da proposta. */
.sessoes__seletor { display: flex; align-items: center; gap: var(--xg-space-2); min-width: 0; }
.sessoes__seletor select {
  font: var(--xg-text-small);
  border: 1px solid var(--xg-border);
  border-radius: var(--xg-radius-sm);
  background: var(--xg-paper);
  color: var(--xg-fg);
  padding: var(--xg-space-1) var(--xg-space-2);
  max-width: 22rem;
}
.sessoes__meta {
  margin-left: auto;
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  color: var(--xg-fg-subtle);
}

.composer {
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-2);
  padding: var(--xg-space-3) var(--xg-space-6) var(--xg-space-4);
  border-top: 1px solid var(--xg-border);
  background: var(--xg-paper);
  flex: none;
}
/* O atributo `hidden` volta a valer. A regra `[hidden] { display: none }` vive na folha do
   AGENTE, e qualquer `display` de origem autor a vence — independente de especificidade. Foi
   o que deixou `.composer__fila` (display: flex) permanentemente na tela apesar do `hidden`.
   Global de propósito: corrigir só a classe afetada deixaria a armadilha armada para o
   próximo elemento que ganhar `display` e `hidden` ao mesmo tempo. */
[hidden] { display: none !important; }

.composer__linha { display: flex; gap: var(--xg-space-3); align-items: flex-end; }
/* Auto-expansível até ~5 linhas (a altura é calculada no JS, com o teto aqui) e depois
   rola por dentro: a caixa cresce com o pensamento e para de crescer antes de comer o chat. */
.composer__linha textarea {
  flex: 1;
  border-radius: var(--xg-radius-md);
  resize: none;
  min-height: 42px;
  max-height: 132px;
  overflow-y: auto;
  line-height: 1.5;
  padding: var(--xg-space-3);
}
.composer__linha .botao { min-height: 42px; }
.composer__clipe { padding-inline: var(--xg-space-3); line-height: 1; }

/* Marcador de contexto: anel ao lado do Enviar, detalhe em balão acima dele. */
.composer__linha { position: relative; }
.contexto { background: none; border: 0; padding: 0 var(--xg-space-1); min-height: 42px; cursor: pointer; display: flex; align-items: center; }
.contexto svg { transform: rotate(-90deg); }
.contexto__trilho { fill: none; stroke: var(--xg-neutral-200); stroke-width: 3; }
.contexto__arco { fill: none; stroke: var(--xg-action); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 50.27; stroke-dashoffset: 50.27; transition: stroke-dashoffset 300ms; }
.contexto[data-nivel='alto'] .contexto__arco { stroke: var(--xg-warning); }
.contexto[data-nivel='cheio'] .contexto__arco { stroke: var(--xg-danger); }
.contexto__detalhe {
  position: absolute; right: 0; bottom: calc(100% + var(--xg-space-2)); min-width: 260px;
  background: var(--xg-paper); border: 1px solid var(--xg-neutral-200); border-radius: var(--xg-radius-md);
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%); padding: var(--xg-space-3); font: var(--xg-text-caption); z-index: 5;
}
.contexto__linha { display: flex; justify-content: space-between; gap: var(--xg-space-3); }
.contexto__linha strong { font-family: var(--xg-font-mono); font-weight: 600; }
.contexto__barra { height: 4px; background: var(--xg-neutral-200); border-radius: 2px; margin: var(--xg-space-1) 0 var(--xg-space-2); overflow: hidden; }
.contexto__barra-cheia { height: 100%; background: var(--xg-action); width: 0; transition: width 300ms; }
.contexto[data-nivel='alto'] ~ .contexto__detalhe .contexto__barra-cheia { background: var(--xg-warning); }
.contexto[data-nivel='cheio'] ~ .contexto__detalhe .contexto__barra-cheia { background: var(--xg-danger); }

.composer__controles {
  display: flex;
  align-items: center;
  gap: var(--xg-space-4);
  flex-wrap: wrap;
}
.composer__campo { display: flex; align-items: center; gap: var(--xg-space-2); }
.composer__campo select {
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  border: 1px solid var(--xg-border);
  border-radius: var(--xg-radius-sm);
  background: var(--xg-paper);
  color: var(--xg-fg);
  padding: var(--xg-space-1) var(--xg-space-2);
}
/* Preferência que a instância NÃO oferta, vinda de outra máquina por git (AD-9): o seletor
   mostra o que de fato vai rodar e a marca amarela diz que houve queda para o padrão. É o
   achado #7 fechado na tela — o servidor já mandava `ignorado`, e ninguém o lia. */
.composer__campo[data-ignorado='1'] select { border-color: var(--xg-warning); }
.composer__ignorado { font: var(--xg-text-caption); color: var(--xg-warning); }
/* Não é a mesma classe de aviso do `ignorado`: ali houve queda, e o deal roda outra coisa.
   Aqui o modelo escolhido roda exatamente como escolhido — o que falta é a linha de preço na
   tabela local, e por isso a cor é a de informação, não a de recusa (E29, D2). */
.composer__sem-preco { font: var(--xg-text-caption); color: var(--xg-fg-subtle); }
.composer__estado {
  margin-left: auto;
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  color: var(--xg-fg-subtle);
}

/* Estado do agente. Cinza quando ocioso, tinta cheia quando trabalhando — NÃO verde: verde é
   sinal e existe em dois botões no app inteiro, "Avançar" e "GO". */
.composer__estado[data-estado='trabalhando'] { color: var(--xg-fg); }
/* Sem conexão nada sai deste navegador até a recarga: é a única linha que pede um gesto. */
.composer__estado[data-estado='sem-conexao'] { color: var(--xg-warning); }
/* Sem conexão com o Claude o Enter também não leva a nada, até um novo login (BA-36). */
.composer__estado[data-estado='claude-desconectado'] { color: var(--xg-warning); }

/* A fila fica ACIMA do campo: enfileirar não pode parecer perder. */
.composer__fila {
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-1);
  padding: var(--xg-space-3) var(--xg-space-6) 0;
  border-top: 1px dashed var(--xg-border);
}
.fila__item {
  display: flex;
  align-items: center;
  gap: var(--xg-space-2);
  font: var(--xg-text-caption);
  color: var(--xg-fg-muted);
}
.fila__ordem { color: var(--xg-fg-subtle); }
.fila__texto { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__tirar {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--xg-fg-subtle);
  font-size: 1rem;
  line-height: 1;
  padding: 0 var(--xg-space-1);
}
.fila__tirar:hover { color: var(--xg-fg); }

/* A política da fase: informação, não controle (R2). Discreta de propósito — ela informa o
   enquadramento, não pede ação. */
.chat__politica {
  flex: none;
  margin: 0;
  padding: var(--xg-space-2) var(--xg-space-6);
  font: var(--xg-text-caption);
  font-family: var(--xg-font-mono);
  color: var(--xg-fg-subtle);
  border-bottom: 1px solid var(--xg-border);
}

/* ── Modal do gate de permissão ─────────────────────────────────────────── */

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(11, 12, 16, 0.55);
  display: grid;
  place-items: center;
  z-index: 10;
}
.modal {
  background: var(--xg-paper);
  border-radius: var(--xg-radius-lg);
  box-shadow: var(--xg-shadow-lg);
  padding: var(--xg-space-6);
  max-width: 560px;
  width: 100%;
}
/* O modal de confirmação com lista longa (E31). Mesma mecânica de `.modal--largo`, sem mexer
 * na largura: o miolo rola e as ações ficam visíveis. */
.modal--rolavel {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.modal__entrada {
  font-family: var(--xg-font-mono);
  font-size: 0.8125rem;
  background: var(--xg-bg-sunken);
  border-radius: var(--xg-radius-sm);
  padding: var(--xg-space-3);
  margin: var(--xg-space-4) 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.modal__acoes { display: flex; gap: var(--xg-space-3); justify-content: flex-end; }

/* Pill de falha classificada */
.falha { display: flex; gap: var(--xg-space-2); align-items: baseline; margin-bottom: var(--xg-space-3); }
.falha__codigo {
  font-family: var(--xg-font-mono);
  font-size: 0.75rem;
  padding: 0 var(--xg-space-2);
  border-radius: var(--xg-radius-pill);
  border: 1px solid currentColor;
}
.falha--processo { color: var(--xg-warning); }
.falha--integridade { color: var(--xg-danger); }

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

/* Arquivo de deal que não abre. Sem borda de sinal e sem cursor: não é destino, é aviso. */
.deal--ilegivel { border-left-color: var(--xg-warning); cursor: default; opacity: 0.75; }

/* A decisão do gate também fora da tabela (a linha da ferramenta observada na fase). */
.config__fase [data-decisao='autonomo'] { color: var(--xg-success); }
.config__fase [data-decisao='gate-humano'],
.config__fase [data-decisao='pergunta-ao-usuario'] { color: var(--xg-warning); }
.config__fase [data-decisao='negar'] { color: var(--xg-danger); }