/* Identidade visual do app (D22 · direção E · Cartões). Carregada depois do estilo embutido no index.html:
   remapeia as variáveis que o app já usa para a paleta aprovada, troca as fontes pelas embutidas em
   public/fontes/ e transforma as colunas em cartões claros sobre a página grafite. As telas de pontos,
   histogramas e a história do trem entram nas etapas seguintes. */

:root, :root:is(*) {
  /* paleta aprovada (fixa: o app não segue o modo escuro do sistema — a página já é escura) */
  --pagina: #1d1b1b;
  --pagina-texto: #efeeec;
  --pagina-suave: #9b9894;
  --device: #ececea;
  --lcd: #0e0e0e;
  --brilho: #ff6200;

  --bg: #e2e2df;
  --painel: #ececea;
  --borda: #d6d6d2;
  --texto: #171717;
  --suave: #6e6e6a;
  --primaria: #ff6200;
  --primaria-fundo: #ffe6d6;
  --ok: #ff7a24;
  --ok-fundo: #171717;
  --alerta: #5a2300;
  --alerta-fundo: #ffc59c;
  --erro: #e3372c;
  --erro-fundo: #fbe3e1;
  --msg-voce: #ff6200;
  --msg-voce-texto: #ffffff;
  --msg-orq: #dfdfdc;

  --font-display: 'Stack Sans Headline', 'Stack Sans Text', system-ui, sans-serif;
  --font-sans: 'Stack Sans Text', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --raio: 12px;
  --raio-cartao: 26px;

  /* ---------- tokens do padrão visual (docs/padrao-visual.md) — use sempre estes, nunca a cor/medida solta ---------- */
  /* neutros claros (cartões, controles) */
  --branco: #fff;
  --sup: #f6f6f4;          /* superfície de cartão, botão */
  --sup-2: #ececea;        /* superfície selecionada, faixa, gaveta */
  --sup-hover: #e8e8e5;    /* hover em superfície clara */
  --sup-3: #dfdfdc;        /* trilho das abas internas */
  --linha: #e4e4e0;        /* divisória fina */
  --borda-ctl: #cacac6;    /* borda de campo e botão */
  --cinza-claro: #cfcfcb;  /* bloco parado, ligações */
  --cinza-medio: #b9b9b5;  /* bloco rascunho/neutro, contorno tracejado */
  --cinza: #8a8784;        /* LED apagado, rótulo em tela escura */
  --lcd-rotulo: var(--cinza);
  /* texto sobre claro */
  --tinta: #171717;        /* texto principal e fundo escuro de bloco */
  --texto-2: #3b3b38;      /* texto de apoio */
  /* escuros (topo, telas, balões) */
  --escuro-1: #1d1d1d;
  --escuro-2: #262626;     /* controles do topo, trilho escuro */
  --escuro-linha: #2c2c2c; /* borda fina em tela escura */
  --escuro-borda: #3e3d3a; /* borda de controle escuro */
  --lcd-texto: #f2f2f0;
  --lcd-texto-2: #d8d6d2;  /* código em tela escura */
  --lcd-texto-3: #bdbab6;  /* texto secundário em tela escura */
  /* estados */
  --erro-lcd: #ff6b61;     /* vermelho para texto sobre fundo escuro */
  --erro-escuro: #c92d23;  /* hover de ação de perigo */
  --erro-texto: #7a1d16;   /* texto de aviso vermelho sobre --erro-fundo */
  --atencao: #f2a33a;
  --atencao-fundo: #ffe9c7;
  --atencao-texto: #5a3500;
  --atencao-sobre: #2a1600; /* texto sobre --atencao */
  /* espaço, raio, altura de controle */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px;
  --raio-ctl: 12px; --raio-tela: 18px; --raio-pilula: 999px;
  --ctl-p: 28px; --ctl: 36px; --ctl-g: 46px;
  --gaveta: 460px; --gaveta-larga: 800px; /* largura das gavetas de detalhe (padrão · com cartão grande, ex. Aprovações) */
  /* escala de texto e de blocos (rodada 3, D52): nome de cartão, título de gaveta/diálogo, marca; números grandes em 4 tamanhos */
  --nome: 20px; --titulo: 22px; --marca: 28px;
  --num-p: 26px; --num-m: 40px; --num-g: 68px; --num-xg: 76px;
  /* bloco da sigla: raio sempre 25% do lado; --bloco-g só no cartão grande do orquestrador */
  --bloco-p: 40px; --bloco: 64px; --bloco-g: 104px;
}

/* ---------- base ---------- */
body { font: 14px/1.5 var(--font-sans); background: var(--pagina); color: var(--pagina-texto); }
code, pre, kbd, .mono, .valor.mono, .passo .det pre.valor, .passo.aprovacao pre.valor, .aguardando-banner pre,
.linha-tempo .hora, .cartao .nome, .detalhe-agente .chips .chip, dialog input, .msg code { font-family: var(--font-mono); }
::selection { background: var(--brilho); color: var(--branco); }

/* ---------- topo: marca + abas em pílula ---------- */
header { background: transparent; border-bottom: 0; padding: 14px 20px 12px; gap: var(--esp-4); color: var(--pagina-texto); }
header h1 { font: 600 28px/1 var(--font-display); letter-spacing: -.045em; }
header h1 b { color: var(--brilho); }
.etiqueta { background: var(--escuro-2); color: var(--pagina-suave); border-radius: var(--raio-pilula); font-size: 11px; letter-spacing: .04em; }
.abas { gap: var(--esp-1); padding: 3px; height: var(--ctl); align-items: center; border-radius: var(--raio-pilula); background: var(--escuro-2); margin-left: 8px; }
.abas button { height: 30px; display: inline-flex; align-items: center; border-radius: var(--raio-pilula); padding: 0 16px; color: var(--pagina-suave); font-weight: 500; }
.abas button:hover { color: var(--pagina-texto); }
.abas button.sel { background: var(--device); color: var(--texto); }
.conta { color: var(--pagina-suave); }
.conta .ok { color: var(--brilho); }
.conta button { height: var(--ctl); padding: 0 14px; border-radius: var(--raio-pilula); background: var(--escuro-2); border-color: var(--escuro-borda); color: var(--pagina-texto); }

/* ---------- botões, campos, selos ---------- */
button { font: inherit; font-weight: 500; border: 1px solid var(--borda-ctl); border-radius: var(--raio); background: var(--sup); color: var(--texto); padding: 6px 14px; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button:hover { border-color: var(--brilho); }
button.primario { background: var(--primaria); border-color: var(--primaria); color: var(--branco); font-weight: 600; }
button.primario:hover { background: #ff7424; }
textarea, dialog input, dialog select, .aguardando-banner .motivo {
  background: var(--branco); border-color: var(--borda-ctl); border-radius: 14px; color: var(--texto); font-family: var(--font-sans);
}
dialog input { font-family: var(--font-mono); }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--brilho); outline-offset: 1px; border-color: transparent; }
.status, .chip, .selo-ambiente { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.status { display: inline-flex; align-items: center; gap: 5px; }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; }
.status.ocioso::before, .status.desativado::before, .status.cancelada::before { box-shadow: none; }
.chip { border-radius: var(--raio-pilula); background: var(--sup); }
.chip.mais { background: var(--primaria-fundo); color: #7a2900; }

/* ---------- conversa: as três colunas viram cartões claros sobre a página grafite ---------- */
main { gap: 14px; padding: 0 16px 16px; }
nav.historico, .chat, aside.rede {
  background: var(--device); color: var(--texto); border: 0; border-radius: var(--raio-cartao); overflow: hidden;
}
.chat { border-right: 0; }
form { background: transparent; border-top: 1px solid var(--borda); }
aside.rede { background: var(--device); }
aside h2 { font-family: var(--font-sans); letter-spacing: .1em; }
nav.historico li { border-radius: var(--raio); }
nav.historico li.atual { background: var(--primaria-fundo); }
nav.historico li:hover { background: var(--bg); }
.msg { border-radius: 16px; }
.msg.voce { border-bottom-right-radius: 4px; }
.msg.orq { border-bottom-left-radius: 4px; }
.msg.agente { background: var(--sup); }
.no { background: var(--sup); border-radius: var(--raio-tela); }
.no.ativo { border-color: var(--brilho); box-shadow: 0 0 0 3px var(--primaria-fundo); }
.vazio-chat { color: var(--suave); }

/* ---------- catálogo e integrações: cartões claros na página grafite ---------- */
.catalogo-lista, .integracoes-pagina { color: var(--pagina-texto); }
.integracoes-pagina .intro, .integracoes-pagina h2.secao { color: var(--pagina-suave); }
.cartao, .integracao, .chamadas details { border-radius: 22px; background: var(--device); color: var(--texto); border-color: transparent; }
.cartao:hover, .cartao.sel { border-color: var(--brilho); }
.detalhe-agente { background: var(--device); color: var(--texto); border-left: 0; border-radius: var(--raio-cartao) 0 0 var(--raio-cartao); }
.detalhe-agente[hidden] { display: none; } /* o display:flex do estilo embutido venceria o hidden */
.integracao.desligada { border-color: var(--erro); }

/* ---------- diálogos ---------- */
dialog { border: 0; border-radius: var(--raio-cartao); background: var(--device); color: var(--texto); box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
dialog::backdrop { background: rgba(10, 9, 9, .7); }
dialog h3 { font: 600 var(--titulo)/1.1 var(--font-display); letter-spacing: -.03em; }
dialog a.botao { background: var(--primaria); border-radius: var(--raio); }

/* ======================= etapa 2 · Conversa ======================= */
:root {
  /* grade apagada das telas de pontos: o mesmo cubo do pixel único (8px a cada 11px, D54) */
  --grade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Crect x='1' y='1' width='12' height='12' fill='%23262626'/%3E%3C/svg%3E");
  --grade-leitura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Crect x='1' y='1' width='12' height='12' fill='%231a1a1a'/%3E%3C/svg%3E");
  /* a faixa do cartão de aprovação (trem/letreiro) segue no pixel de 8px a cada 11px: com 12/15 o letreiro não cabe (D55) */
  --grade-faixa-leitura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Crect x='1' y='1' width='8' height='8' fill='%231a1a1a'/%3E%3C/svg%3E");
  /* pixel único de todas as telas de pontos = o quadradinho da --grade (12px a cada 15px, D55); exceções: ícone dos blocos, faixa do cartão de aprovação e mini do trem */
  --pixel: 12px; --pixel-passo: 15px; --pixel-faixa: 8px; --pixel-faixa-passo: 11px; --pixel-icone: 6px; --pixel-icone-passo: 8px; --pixel-mini: 4px; --pixel-mini-passo: 6px;
  --balao: #181818;
  --balao-borda: #3e3d3a;
  --balao-texto: #e6e5e2;
}

/* o chat é um cartão: tela de pontos em cima, campo e Enviar na faixa de baixo */
.chat { padding: 10px; gap: 10px; }
.mensagens { background: var(--lcd) var(--grade-leitura); border-radius: 22px; padding: 22px; gap: 18px; color: var(--balao-texto); }
form { border-top: 0; padding: 0 6px 4px; align-items: flex-end; }
form textarea { border-radius: 14px; }

/* balões: o seu claro à direita; o do orquestrador escuro com fosso + borda; sem rótulos */
.msg .autor { display: none; }
.msg { max-width: 72%; font-size: 15px; line-height: 1.55; }
.msg.voce { background: var(--device); color: var(--texto); }
.msg.orq { background: var(--balao); color: var(--balao-texto); border: 1px solid var(--balao-borda); box-shadow: 0 0 0 6px var(--lcd); }
.msg.orq.erro { background: #2c1110; color: #ffb3ab; border-color: #5a1f1b; }
.msg code { background: rgba(255, 255, 255, .08); color: var(--lcd-texto-2); }
.msg.voce code { background: rgba(0, 0, 0, .07); color: var(--texto); }

/* trabalho do agente: pílula (nome · status · tempo) e os passos num balão escuro */
.msg.agente { background: transparent; border: 0; padding: 0; width: auto; max-width: 78%; color: var(--balao-texto); }
.cab-exec { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; margin: 0; border-radius: var(--raio-pilula); background: var(--balao); border: 1px solid var(--balao-borda); box-shadow: 0 0 0 6px var(--lcd); color: var(--cinza); font-size: 13px; }
.cab-exec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brilho); box-shadow: 0 0 6px var(--brilho); }
.cab-exec b { color: var(--balao-texto); }
.passos, .passos-vazio { margin-top: 12px; padding: 10px 14px; border-left: 0; border-radius: 14px; background: var(--balao); border: 1px solid var(--balao-borda); box-shadow: 0 0 0 6px var(--lcd); color: var(--lcd-texto-3); }
.passos-vazio { display: inline-block; font-size: 12px; }
.passo { font-family: var(--font-mono); font-size: 12px; padding-left: 0; }
.passo summary code, .passo code { color: var(--lcd-texto-2); }
.passo .dur { color: var(--suave); }
.passo.ok .icone { color: var(--brilho); }
.passo.texto { color: var(--pagina-suave); font-family: var(--font-sans); font-style: normal; }
.passo .det pre.valor, .passo.aprovacao pre.valor { background: var(--lcd); color: var(--lcd-texto-2); border: 1px solid var(--escuro-2); }
.passo .det .rotulo { color: var(--cinza); }
.passo .sub { background: #121212; border-color: var(--escuro-linha); }
.passo.decisao { background: rgba(255, 98, 0, .14); color: #ffd9c2; font-family: var(--font-sans); }
.passo.pergunta, .passo.aprovacao { background: rgba(255, 197, 156, .1); color: #f3e6dc; font-family: var(--font-sans); }
.passo.pergunta .resposta { color: var(--pagina-suave); }
.final { border-top-color: var(--escuro-linha); color: var(--balao-texto); }
details.final > summary { color: var(--cinza); }
.chamada { background: rgba(255, 98, 0, .1); border-color: var(--brilho); color: #f0c9b0; }
.aviso-integracao { background: rgba(227, 55, 44, .12); border-color: var(--erro); color: #ffd5d0; }

/* conversa vazia: texto claro e sugestões como pílulas escuras */
.vazio-chat { color: var(--pagina-suave); }
.vazio-chat .sugestoes button { background: var(--balao); color: var(--balao-texto); border-color: var(--balao-borda); border-radius: 14px; }
.vazio-chat .sugestoes button:hover { border-color: var(--brilho); }

/* cartão de pontos (orquestrador): número do dia + histograma por hora + faixa com bloco e ficha */
.cartao-pontos { padding: 10px; border: 0; border-radius: var(--raio-cartao); background: var(--sup); display: flex; flex-direction: column; gap: 10px; }
.cartao-pontos.ativo { box-shadow: 0 0 0 3px var(--brilho); }
.tela-pontos { background: var(--lcd) var(--grade); color: var(--lcd-texto); border-radius: var(--raio-tela); padding: 16px 18px 14px; display: flex; flex-direction: column; min-height: 160px; }
.tela-pontos .rotulo { font: 500 14px/1.2 var(--font-sans); }
.tela-pontos .numero { margin-top: 4px; font: 600 var(--num-m)/.86 var(--font-display); letter-spacing: -.045em; }
.tela-pontos .numero small { font-size: 1em; color: var(--brilho); }
.hist { contain: layout style; margin-top: auto; padding-top: 12px; display: grid; grid-template-columns: repeat(var(--colunas), var(--pixel)); grid-auto-rows: var(--pixel); gap: calc(var(--pixel-passo) - var(--pixel)); justify-content: start; }
.hist i { width: var(--pixel); height: var(--pixel); border-radius: 1px; transition: background .2s; }
.hist i.aceso { background: var(--brilho); box-shadow: 0 0 5px color-mix(in srgb, var(--brilho) 45%, transparent); }
.hist i.pico { background: color-mix(in srgb, var(--brilho) 50%, var(--branco)); box-shadow: 0 0 8px var(--brilho); }
.faixa-cartao { display: grid; grid-template-columns: var(--bloco) minmax(0, 1fr); gap: var(--esp-3); align-items: center; }
.faixa-cartao .bloco { width: var(--bloco); height: var(--bloco); border-radius: calc(var(--bloco) / 4); background: var(--primaria); color: var(--branco); display: flex; align-items: flex-end; padding: 7px 9px; font: 700 30px/.8 var(--font-display); letter-spacing: -.05em; }
.faixa-cartao .ficha { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.faixa-cartao .ficha .status { align-self: flex-start; }
.faixa-cartao .nome { font: 600 var(--nome)/1 var(--font-display); letter-spacing: -.03em; color: var(--texto); }
.faixa-cartao .desc { font-size: 12px; color: var(--suave); margin: 0; }
.ligacao { background: var(--cinza-claro); }

/* pílula do agente abre/fecha os passos (recolhidos depois que ele termina) */
.msg.agente > .corpo > .cab-exec { cursor: pointer; user-select: none; white-space: nowrap; max-width: 100%; }
.msg.agente > .corpo > .cab-exec::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--cinza); border-bottom: 1.5px solid var(--cinza); transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.msg.agente.recolhido > .corpo > .cab-exec::after { transform: rotate(-45deg); }
.msg.agente.recolhido .passos, .msg.agente.recolhido .passos-vazio, .msg.agente.recolhido .final { display: none; }
.cab-exec .resumo { color: var(--pagina-suave); max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ======================= etapa 3 · Aprovação e perguntas ======================= */
/* o espaço do aviso vira o cartão do protótipo (public/aprovacao.js) */
.aguardando-banner { display: block; padding: 0; border: 0; background: none; font-size: 14px; }
.aguardando-banner.aprovacao { background: none; }
.aguardando-banner[hidden] { display: none; }

.spec { background: var(--sup); color: var(--texto); border-radius: var(--raio-cartao); padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.spec .tela { background: var(--lcd) var(--grade-faixa-leitura); color: var(--lcd-texto); border-radius: 20px; padding: 18px 18px 14px; display: flex; flex-direction: column; }
.spec .rotulo { font: 500 14px/1.35 var(--font-sans); }
.spec .rotulo b { font-weight: 700; }
.recorte { align-self: flex-start; max-width: 100%; background: var(--balao); border: 1px solid var(--balao-borda); box-shadow: 0 0 0 6px var(--lcd); border-radius: 16px; padding: 10px 14px; }
.spec.aprovacao-spec pre { margin: 10px 0 0; max-height: 140px; overflow: auto; font: 13px/1.6 var(--font-mono); color: var(--lcd-texto); white-space: pre-wrap; background: none; border: 0; padding: 0; }
.spec .base { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-3); align-items: center; }
.spec .tile { border-radius: 14px; background: var(--cor-tile, var(--primaria)); color: var(--cor-tile-texto, var(--branco)); transition: background .25s; }
.spec .ficha { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 2px; min-width: 0; }
.spec .kicker { display: flex; align-items: center; gap: 7px; font: 700 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.spec .kicker::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--cor-status, var(--cinza)); box-shadow: 0 0 5px var(--cor-status, transparent); }
.spec.aprovacao-spec:not(.aprovado):not(.recusado) .kicker::before, .spec.pergunta-spec .kicker::before { animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .25; box-shadow: none; } }
.decidir { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.decidir input { flex: 1; min-width: 160px; height: var(--ctl); border: 1px solid var(--borda-ctl); border-radius: var(--raio-ctl); background: var(--branco); padding: 0 12px; font: 14px var(--font-sans); color: var(--texto); }
.decidir input.confirmacao { font-family: var(--font-mono); letter-spacing: .06em; }
.decidir button { height: var(--ctl); }
.decidir button[hidden] { display: none; }

/* estados: espera na cor do tema; vermelho só na recusa */
.spec.aprovacao-spec { --cor-tile: var(--primaria); --cor-tile-texto: var(--branco); --cor-status: var(--brilho); }
.spec.aprovacao-spec.aprovado { --cor-tile: var(--tinta); --cor-tile-texto: var(--brilho); }
.spec.aprovacao-spec.recusado { --cor-tile: var(--erro); --cor-tile-texto: var(--branco); --cor-status: var(--erro); }
.spec.pergunta-spec { --cor-tile: var(--tinta); --cor-tile-texto: var(--brilho); --cor-status: var(--brilho); }
.spec.pergunta-spec p { margin: 8px 0 0; font-size: 15px; color: var(--balao-texto); white-space: pre-wrap; }
.spec.pergunta-spec .dica { font-size: 13px; color: var(--suave); }

/* faixa de pontos (história do Trem e sequência vermelha) */
.faixa { margin: 22px 0 6px; display: block; } /* a faixa é um <canvas> (public/aprovacao.js): cores e brilho por sprite */
.faixa .faixa-tela { display: block; }
.faixa.erro { animation: tremer .3s; }
@keyframes tremer { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* bloco com o "!" / ✓ / caveira / ✗ / proibido em matriz de pontos (92 × 92) */
.tile.matriz { width: 92px; height: 92px; display: grid; grid-template-columns: repeat(var(--cols, 3), var(--pixel-icone)); grid-auto-rows: var(--pixel-icone); gap: calc(var(--pixel-icone-passo) - var(--pixel-icone)); place-content: center; padding: 0; }
.tile.matriz i { width: var(--pixel-icone); height: var(--pixel-icone); border-radius: 1px; transform-origin: center; will-change: opacity, transform; }
.tile.matriz i.on { background: var(--cor-tile-texto); box-shadow: 0 0 6px rgba(255, 255, 255, .5); }
@media (prefers-reduced-motion: reduce) { .faixa.erro, .spec .kicker::before { animation: none !important; } }

/* ======================= etapa 4 · Catálogo ======================= */
.hist i.fraco { background: color-mix(in srgb, var(--brilho) 26%, transparent); }
#grade { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--esp-4); }
.cartao-agente { cursor: pointer; outline: none; transition: transform .12s, box-shadow .12s; }
.cartao-agente:hover { transform: translateY(-2px); }
.cartao-agente:focus-visible { box-shadow: 0 0 0 3px var(--pagina), 0 0 0 5px var(--sup); }
/* cartão com o detalhe aberto na gaveta: contorno aceso (mesmo do cartão de gatilho selecionado) */
.cartao-agente.sel { box-shadow: 0 0 0 3px var(--brilho); }
.cartao-agente.rodando { box-shadow: 0 0 0 3px var(--brilho); }
.cartao-agente .tela-pontos { min-height: 190px; }
.cartao-agente .topo-tela { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-2); }
.cartao-agente .total-tela { font: 600 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
.cartao-agente .kicker { font: 700 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.cartao-agente .exts { font: 400 11px var(--font-mono); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-agente .nome { font-size: var(--nome); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* estados: laranja ativo, vermelho sem integração, cinza rascunho, apagado desativado */
.cartao-agente.est-ativo .kicker { color: var(--primaria-escura); }
.cartao-agente.est-sem-integracao .bloco { background: var(--erro, #d4351c); }
.cartao-agente.est-sem-integracao .kicker { color: var(--erro, #d4351c); }
.cartao-agente.est-sem-integracao .hist i.aceso { background: #8a8a86; box-shadow: none; }
.cartao-agente.est-rascunho .bloco { background: var(--cinza-medio); color: var(--escuro-2); }
.cartao-agente.est-rascunho .hist i.aceso, .cartao-agente.est-desativado .hist i.aceso { background: #5a5a57; box-shadow: none; }
.cartao-agente.est-desativado { opacity: .6; }
.cartao-agente.est-desativado .bloco { background: var(--tinta); color: var(--cinza); }
.cartao-agente.est-rascunho .numero, .cartao-agente.est-desativado .numero { color: var(--cinza); }
.cartao-agente.est-sem-integracao .hist i.fraco, .cartao-agente.est-rascunho .hist i.fraco, .cartao-agente.est-desativado .hist i.fraco { background: #34332f; }

/* ======================= etapa 5 · Integrações ======================= */
/* diálogos no padrão dos cartões: título numa tela de pontos, passos numerados em blocos */
dialog { padding: 10px 10px 20px; width: min(540px, calc(100vw - 32px)); }
dialog > :not(h3) { margin-left: 16px; margin-right: 16px; }
dialog h3 { margin: 0 0 18px; padding: 22px 22px 40px; border-radius: var(--raio-tela); background: var(--lcd) var(--grade); color: var(--lcd-texto); font-size: var(--titulo); }
dialog h3::after { content: '.'; color: var(--brilho); }
dialog p { color: var(--suave); }
dialog ol { list-style: none; padding-left: 0; counter-reset: passo; gap: var(--esp-4); }
dialog ol > li { counter-increment: passo; position: relative; padding-left: 42px; min-height: 30px; font-size: 14px; }
dialog ol > li::before { content: counter(passo); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 9px; background: var(--primaria); color: var(--branco); display: flex; align-items: flex-end; padding: 0 0 4px 6px; font: 700 17px/.8 var(--font-display); }
dialog input, dialog select { height: var(--ctl); background: var(--branco); border-color: var(--borda-ctl); border-radius: var(--raio); padding: 0 12px; font-family: var(--font-mono); font-size: 13px; }
dialog input:focus, dialog select:focus { outline: none; border-color: var(--brilho); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brilho) 25%, transparent); }
dialog .erro:not([hidden]) { display: block; background: var(--erro-fundo); color: #9c1b12; border-radius: var(--raio); padding: 10px 12px; }
dialog .dica { background: var(--sup-hover); border-radius: 10px; padding: 8px 10px; }
dialog a.botao { padding: 9px 16px; font-weight: 600; }
dialog .acoes { padding-top: 6px; }

/* ======================= revisão 17/10 · sem emoji, cartões mais limpos ======================= */
/* LED: o único indicador de estado da tela (no lugar de ✔ ✘ ⛔ e emoji) */
.led { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--suave); }
.led.ok, .passo.ok > details > summary .led, .evento.ok .led, .final .led { background: var(--brilho); box-shadow: 0 0 5px color-mix(in srgb, var(--brilho) 60%, transparent); }
.led.erro, .passo.erro > details > summary .led, .passo.bloqueado > details > summary .led, .evento.erro .led, .final.erro .led { background: var(--erro); box-shadow: 0 0 5px rgba(227, 55, 44, .6); }
.passo.rodando > details > summary .led, .evento.rodando .led { background: var(--brilho); animation: pulsar 1.2s ease-in-out infinite; }

/* passos do agente: LED · AÇÃO · alvo · tempo, numa linha limpa */
.passos { display: flex; flex-direction: column; gap: 2px; }
.passo summary { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.passo summary b { flex: none; min-width: 62px; font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
.passo summary code { background: none; padding: 0; font: 12px var(--font-mono); color: var(--lcd-texto-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passo summary .dur { margin-left: auto; flex: none; font: 11px var(--font-mono); color: var(--suave); }
.passo .det { padding: 2px 0 8px 16px; }
.passo .det pre.valor { border-radius: 10px; }
.passo.texto { font: 13px/1.55 var(--font-sans); color: var(--lcd-texto-3); padding: 4px 0 6px 16px; white-space: pre-wrap; }
.passo.texto code { background: rgba(255, 255, 255, .06); }

/* decisão, aprovação e pergunta: bloco com rótulo em mono e LED, sem ícones */
.passo.evento { margin: 6px 0; padding: 10px 12px; border-radius: var(--raio-ctl); background: rgba(255, 255, 255, .03); border: 1px solid var(--escuro-linha); color: var(--balao-texto); font-family: var(--font-sans); white-space: normal; }
.passo.evento.rodando { border-color: color-mix(in srgb, var(--brilho) 60%, var(--escuro-linha)); }
.rotulo-evento { display: flex; align-items: center; gap: var(--esp-2); font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
.texto-evento { margin-top: 6px; font-size: 14px; line-height: 1.45; }
.passo.evento pre.valor { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--lcd); border: 1px solid var(--escuro-2); color: var(--lcd-texto-2); font: 12px/1.5 var(--font-mono); white-space: pre-wrap; }
.passo.evento .resposta { margin-top: 8px; color: var(--lcd-texto-3); font-size: 13px; }
.passo.evento .resposta span { display: block; font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); margin-bottom: 2px; }

/* resposta do agente: pílula que abre um balão escuro (mesmo balão do orquestrador) */
.final { margin-top: 14px; padding: 0; border: 0; white-space: normal; }
details.final > summary { display: inline-flex; align-items: center; gap: var(--esp-2); list-style: none; cursor: pointer; padding: 6px 14px 6px 12px; border-radius: var(--raio-pilula); background: var(--balao); border: 1px solid var(--balao-borda); box-shadow: 0 0 0 6px var(--lcd); font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
details.final > summary::-webkit-details-marker { display: none; }
details.final > summary::after { content: ''; width: 5px; height: 5px; border-right: 1.5px solid var(--cinza); border-bottom: 1.5px solid var(--cinza); transform: rotate(-45deg); transition: transform .15s; }
details.final[open] > summary::after { transform: translateY(-2px) rotate(45deg); }
.texto-final { margin-top: 14px; padding: 12px 16px; border-radius: 16px; background: var(--balao); border: 1px solid var(--balao-borda); box-shadow: 0 0 0 6px var(--lcd); font: 15px/1.55 var(--font-sans); color: var(--balao-texto); white-space: pre-wrap; }
.final.erro { padding: 10px 14px; border-radius: 14px; background: #2c1110; border: 1px solid #5a1f1b; color: #ffb3ab; box-shadow: 0 0 0 6px var(--lcd); }
.final.erro .rotulo-evento { color: var(--erro-lcd); margin-bottom: 4px; }

/* integrações: cartão baixo e limpo — bloco, estado, nome, uma linha; o resto na dica */
.integracoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
@media (max-width: 520px) { .integracoes { grid-template-columns: 1fr; } }
.integracao { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 12px 14px 12px 12px; border: 0; border-radius: 22px; background: #f6f6f4; cursor: default; }
.integracao.desligada, .integracao.parcial { border: 0; }
.integracao .bloco { grid-row: 1; width: 56px; height: 56px; border-radius: 14px; background: var(--primaria); color: #fff; display: flex; align-items: flex-end; padding: 6px 8px; font: 700 24px/.8 var(--font-display); letter-spacing: -.05em; }
.integracao .ficha { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.integracao .ficha .kicker { display: flex; align-items: center; gap: 7px; font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.integracao .ficha .nome { font: 600 19px/1.1 var(--font-display); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.integracao .ficha .linha { font-size: 12px; color: var(--suave); }
.integracao .acoes { grid-row: 1; grid-column: 3; display: flex; gap: 6px; align-items: center; }
.integracao .acoes button { height: 34px; padding: 0 14px; font-size: 13px; white-space: nowrap; border-radius: 10px; }
.integracao .acoes button.discreto { background: transparent; border-color: transparent; color: var(--suave); padding: 0 8px; }
.integracao .acoes button.discreto:hover { color: var(--texto); background: #e6e6e3; }
.integracao .alerta-linha, .integracao .conferencia { grid-column: 1 / -1; }
.integracao .alerta-linha { font-size: 12px; color: #9a5a00; background: #fbecd6; border-radius: 10px; padding: 7px 10px; }
.integracao.est-off .alerta-linha { color: #9c1b12; background: var(--erro-fundo); }
.integracao .conferencia { background: var(--lcd); color: #e6e5e2; border-radius: 12px; padding: 10px 12px; font: 12px/1.7 var(--font-mono); }
.integracao .conferencia .led { margin-right: 8px; vertical-align: middle; }
.integracao .conferencia .erro { color: #ff8a80; }
.integracao.est-ok .kicker .led { background: var(--brilho); box-shadow: 0 0 5px color-mix(in srgb, var(--brilho) 60%, transparent); }
.integracao.est-parcial .bloco { background: #f2a33a; color: #2a1600; }
.integracao.est-parcial .kicker .led { background: #f2a33a; }
.integracao.est-off .bloco { background: var(--erro); }
.integracao.est-off .kicker .led { background: var(--erro); }
.integracao.est-neutro .bloco { background: #b9b9b5; color: #2a2a28; }
.integracao.est-neutro { opacity: .75; }

/* excluir conversa: X desenhado, não caractere */
nav.historico .excluir svg { display: block; }
.integracao { align-content: center; }
.integracao .ficha .nome { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* duas ações (ex.: Mover para o cofre + Desconectar) descem para uma linha própria e não espremem o nome */

/* ======================= coluna da direita: só o orquestrador + quem ele está chamando ======================= */
aside.rede { padding: 10px; gap: 0; display: flex; flex-direction: column; overflow-y: auto; }
.cartao-grande { gap: var(--esp-3); }
.cartao-grande .tela-pontos { min-height: 260px; padding: 18px 18px 14px; }
.cartao-grande .tela-pontos .rotulo { font-size: 16px; }
.cartao-grande .tela-pontos .numero { font-size: var(--num-xg); margin-top: 6px; }
.cartao-grande .faixa-cartao { grid-template-columns: var(--bloco-g) minmax(0, 1fr); gap: var(--esp-4); padding: 0 4px 6px 0; }
.cartao-grande .faixa-cartao .bloco { width: var(--bloco-g); height: var(--bloco-g); border-radius: calc(var(--bloco-g) / 4); font-size: 46px; padding: 10px 12px; }
.cartao-grande .faixa-cartao .nome { font-size: var(--marca); } /* cartão grande do orquestrador: exceção, junto do número --num-xg */
.cartao-grande .kicker, .no-chamado .kicker { display: flex; align-items: center; gap: 7px; font: 700 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.cartao-grande .exts, .no-chamado .exts { font: 11px var(--font-mono); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kicker.estado-pensando .led, .kicker.estado-aguardando .led { background: var(--brilho); box-shadow: 0 0 5px var(--brilho); animation: pulsar 1.2s ease-in-out infinite; }
.kicker.estado-ocioso .led { background: var(--cinza); }
.kicker.estado-erro .led { background: var(--erro); }

/* seta de pontos: desce do orquestrador até o agente chamado; os pontos acendem em sequência */
.seta-pontos { display: flex; flex-direction: column; align-items: center; gap: var(--esp-1); padding: 8px 0 6px; }
.seta-pontos > i { width: 5px; height: 5px; border-radius: 1px; background: var(--borda-ctl); }
.seta-pontos > b { display: grid; grid-template-columns: repeat(3, 5px); grid-template-rows: repeat(2, 5px); gap: var(--esp-1); }
.seta-pontos > b i { width: 5px; height: 5px; border-radius: 1px; background: var(--borda-ctl); }
.seta-pontos > b i:nth-child(1) { grid-area: 1 / 1; } .seta-pontos > b i:nth-child(2) { grid-area: 1 / 3; } .seta-pontos > b i:nth-child(3) { grid-area: 2 / 2; }
.chamando:not(.apagado) .seta-pontos i { animation: correr 1.1s linear infinite; }
.chamando:not(.apagado) .seta-pontos > i:nth-child(2) { animation-delay: .12s; } .chamando:not(.apagado) .seta-pontos > i:nth-child(3) { animation-delay: .24s; }
.chamando:not(.apagado) .seta-pontos > i:nth-child(4) { animation-delay: .36s; } .chamando:not(.apagado) .seta-pontos > i:nth-child(5) { animation-delay: .48s; }
.chamando:not(.apagado) .seta-pontos > b i { animation-delay: .6s; }
@keyframes correr { 0%, 40%, 100% { background: var(--borda-ctl); box-shadow: none; } 15% { background: var(--brilho); box-shadow: 0 0 6px var(--brilho); } }
@media (prefers-reduced-motion: reduce) { .chamando .seta-pontos i { animation: none !important; } }

/* cartão de quem está sendo chamado */
.no-chamado { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--esp-3); align-items: center; padding: 10px; border-radius: 22px; background: var(--sup); cursor: pointer; }
.no-chamado .bloco { width: var(--bloco); height: var(--bloco); border-radius: calc(var(--bloco) / 4); background: var(--primaria); color: var(--branco); display: flex; align-items: flex-end; padding: 7px 9px; font: 700 30px/.8 var(--font-display); letter-spacing: -.05em; }
.no-chamado .ficha { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.no-chamado .nome { font: 600 var(--nome)/1.1 var(--font-display); letter-spacing: -.03em; }
.no-chamado.est-ativo { box-shadow: 0 0 0 3px var(--brilho); }
.no-chamado.est-ativo .led { background: var(--brilho); box-shadow: 0 0 5px var(--brilho); animation: pulsar 1.2s ease-in-out infinite; }
.no-chamado.aguardando_aprovacao .led, .no-chamado.aguardando_usuario .led { background: var(--atencao); box-shadow: none; }
.no-chamado.erro .bloco, .no-chamado.nao_executada .bloco { background: var(--erro); }
.chamando.apagado .no-chamado { opacity: .55; }
.chamando.apagado .no-chamado .bloco { background: var(--cinza-medio); color: var(--escuro-2); }

/* botão que abre a rede em tela cheia */
.expandir-rede { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; height: var(--ctl); border-radius: var(--raio-ctl); border: 0; background: var(--tinta); color: var(--lcd-texto); font: 600 14px var(--font-sans); }
.chamando:not(:empty) + .expandir-rede { margin-top: 18px; }
.expandir-rede:hover { background: var(--escuro-2); }
.icone-rede { width: 15px; height: 15px; background:
  radial-gradient(circle, var(--brilho) 0 2.5px, transparent 3px) 50% 50% / 15px 15px no-repeat,
  linear-gradient(var(--lcd-texto), var(--lcd-texto)) 0 0 / 4px 4px no-repeat, linear-gradient(var(--lcd-texto), var(--lcd-texto)) 100% 0 / 4px 4px no-repeat,
  linear-gradient(var(--lcd-texto), var(--lcd-texto)) 0 100% / 4px 4px no-repeat, linear-gradient(var(--lcd-texto), var(--lcd-texto)) 100% 100% / 4px 4px no-repeat; }

/* rede em tela cheia: canvas na tela de pontos + painel de atividade e histórico */
dialog.dlg-rede { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 10px; border-radius: 0; background: var(--pagina); gap: 10px; grid-template-columns: minmax(0, 1fr) 400px; }
dialog.dlg-rede[open] { display: grid; }
dialog.dlg-rede > * { margin: 0; }
.rede-tela { position: relative; border-radius: 22px; background: var(--lcd) var(--grade); overflow: hidden; display: flex; flex-direction: column; }
.rede-topo { display: flex; align-items: center; gap: 18px; padding: 16px 18px; color: var(--lcd-texto); }
.rede-topo .rotulo { font: 600 22px var(--font-display); letter-spacing: -.03em; }
.rede-topo .rotulo::after { content: '.'; color: var(--brilho); }
.rede-topo .legenda { display: flex; align-items: center; gap: var(--esp-2); font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
.rede-topo .legenda i { width: 6px; height: 6px; border-radius: 1px; margin-left: 8px; }
.rede-topo .legenda .ida { background: var(--brilho); box-shadow: 0 0 6px var(--brilho); }
.rede-topo .legenda .volta { background: var(--lcd-texto); }
.rede-botoes { margin-left: auto; display: flex; gap: var(--esp-2); }
.rede-botoes button { background: var(--escuro-1); border-color: var(--escuro-borda); color: var(--balao-texto); }
.rede-botoes button:hover { border-color: var(--brilho); }
#rede-canvas { flex: 1; width: 100%; min-height: 0; display: block; }
.rede-painel { background: var(--sup); border-radius: var(--raio-cartao); padding: 12px 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.rede-painel .painel-rede[hidden] { display: none; }
.painel-rede .ab-tabs { margin-bottom: 12px; }
@media (max-width: 900px) { dialog.dlg-rede { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 40vh; } }

/* integrações: página mais larga (nomes cabem numa linha), cada cartão na própria altura, nada vaza */
.integracoes-pagina { max-width: 1120px; }
.integracoes { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); align-items: start; }
.integracao .ficha .nome { white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.integracao > * { min-width: 0; }
.integracao .conferencia, .integracao .alerta-linha { overflow-wrap: anywhere; }
.integracao .conferencia .andamento { margin-top: 6px; padding-top: 6px; border-top: 1px solid #2a2a2a; color: #f2f2f0; }
.integracao .conferencia .andamento .led { animation: pulsar 1.2s ease-in-out infinite; }

/* agente chamado = cartão de pontos com a animação dele (como os agentes do protótipo) */
.no-chamado.cartao-pontos { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.no-chamado .tela-pontos { min-height: 112px; padding: 12px 14px 10px; }
.no-chamado .topo-tela { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-2); }
.no-chamado .tela-pontos .rotulo { font-size: 13px; }
.no-chamado .total-tela { font: 600 10px var(--font-mono); letter-spacing: .06em; opacity: .6; }
.no-chamado .faixa-cartao { grid-template-columns: var(--bloco) minmax(0, 1fr); }
.no-chamado .faixa-cartao .bloco { width: var(--bloco); height: var(--bloco); font-size: 30px; border-radius: calc(var(--bloco) / 4); padding: 7px 9px; }
.no-chamado .faixa-cartao .nome { font-size: var(--nome); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chamando.apagado .no-chamado { opacity: 1; }
.chamando.apagado .no-chamado .faixa-cartao .bloco { background: var(--cinza-medio); color: var(--escuro-2); }
.chamando.apagado .no-chamado .hist i.aceso { background: var(--cinza); box-shadow: none; }
.chamando.apagado .no-chamado .hist i.pico { background: #d8d8d4; box-shadow: none; }
/* a seta corre sempre; parada, mais devagar e em cinza claro */
.chamando.apagado .seta-pontos i { animation: correr-parado 2.4s linear infinite; }
.chamando.apagado .seta-pontos > i:nth-child(2) { animation-delay: .25s; } .chamando.apagado .seta-pontos > i:nth-child(3) { animation-delay: .5s; }
.chamando.apagado .seta-pontos > i:nth-child(4) { animation-delay: .75s; } .chamando.apagado .seta-pontos > i:nth-child(5) { animation-delay: 1s; }
.chamando.apagado .seta-pontos > b i { animation-delay: 1.25s; }
@keyframes correr-parado { 0%, 40%, 100% { background: var(--borda-ctl); } 15% { background: var(--suave); } }
.no-chamado.cartao-pontos { align-items: stretch; }

/* agente chamado = mesmo cartão grande do orquestrador */
.no-chamado.cartao-grande .tela-pontos { min-height: 260px; padding: 18px 18px 14px; }
.no-chamado.cartao-grande .faixa-cartao { grid-template-columns: var(--bloco-g) minmax(0, 1fr); gap: var(--esp-4); }
.no-chamado.cartao-grande .faixa-cartao .bloco { width: var(--bloco-g); height: var(--bloco-g); border-radius: calc(var(--bloco-g) / 4); font-size: 46px; padding: 10px 12px; }
.no-chamado.cartao-grande .faixa-cartao .nome { font-size: var(--marca); line-height: 1.05; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chamando.apagado .no-chamado .numero { color: var(--cinza-medio); }

/* cadeia em linha: quem chamou → quem foi chamado, lado a lado (seta horizontal entre os cartões) */
.cadeia-linha { display: flex; align-items: center; gap: 2px; }
.cadeia-linha > .no-chamado { flex: 1 1 0; min-width: 0; }
.cadeia-linha.varios { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
.cadeia-linha.varios > .no-chamado { min-width: 150px; scroll-snap-align: start; padding: 8px; gap: var(--esp-2); border-radius: 22px; }
.seta-pontos.horizontal { flex: none; flex-direction: row; padding: 0 3px; }
.seta-pontos.horizontal > b { transform: rotate(-90deg); }
/* com mais de um agente, o cartão grande encolhe mantendo o mesmo desenho */
.cadeia-linha.varios .no-chamado.cartao-grande .tela-pontos { min-height: 150px; padding: 11px 11px 9px; border-radius: 15px; }
.cadeia-linha.varios .no-chamado .tela-pontos .rotulo { font-size: 12px; }
.cadeia-linha.varios .no-chamado .tela-pontos .numero { font-size: var(--num-m); margin-top: 4px; }
.cadeia-linha.varios .no-chamado .hist { padding-top: 8px; }
.cadeia-linha.varios .no-chamado.cartao-grande .faixa-cartao { grid-template-columns: 1fr; gap: 6px; }
.cadeia-linha.varios .no-chamado.cartao-grande .faixa-cartao .bloco { width: var(--bloco-p); height: var(--bloco-p); border-radius: calc(var(--bloco-p) / 4); font-size: 18px; padding: 4px 6px; }
.cadeia-linha.varios .no-chamado.cartao-grande .faixa-cartao .nome { font-size: var(--nome); }
.cadeia-linha.varios .no-chamado .kicker { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cadeia-linha.varios .no-chamado .kicker .led { margin-right: 6px; vertical-align: 1px; }
.cadeia-linha.varios .no-chamado .exts { font-size: 10px; }
.cadeia-linha { align-items: stretch; }
.seta-pontos.horizontal { align-self: center; }

/* histórico de conversas fora da tela: gaveta que abre pelo botão "Conversas" do topo; o chat ganha a largura */
#tela-conversa { position: relative; grid-template-columns: minmax(0, 1fr) 400px; }
@media (max-width: 1100px) { #tela-conversa { grid-template-columns: minmax(0, 1fr); } }
#tela-conversa nav.historico { display: flex; position: absolute; z-index: 30; top: 8px; bottom: 16px; left: 16px; width: min(var(--gaveta), calc(100vw - 32px)); height: auto; margin: 0;
  background: var(--sup); padding: 12px 14px 18px; gap: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6); transform: translateX(calc(-100% - 24px)); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
#tela-conversa.historico-aberto nav.historico { transform: none; visibility: visible; transition: transform .22s ease; }
nav.historico .acoes { display: flex; align-items: center; gap: var(--esp-2); padding: 0; }
nav.historico .acoes .titulo-gaveta { margin-right: auto; }
nav.historico .acoes button { width: auto; }
nav.historico .acoes button.primario { height: var(--ctl); }
#tela-conversa nav.historico ul { padding: 0; }
.titulo-gaveta { font: 600 var(--titulo) var(--font-display); letter-spacing: -.03em; }
.acoes-conversa { display: flex; gap: var(--esp-2); margin-left: auto; }
.acoes-conversa[hidden] { display: none; }
.acoes-conversa:not([hidden]) + .conta { margin-left: 12px; }
.acoes-conversa button { height: var(--ctl); border-radius: var(--raio-pilula); padding: 0 16px; display: inline-flex; align-items: center; gap: var(--esp-2); }
#abrir-conversas { background: var(--escuro-2); border-color: var(--escuro-borda); color: var(--balao-texto); }
#abrir-conversas[aria-expanded="true"] { border-color: var(--brilho); }
.icone-lista { width: 12px; height: 10px; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
@media (prefers-reduced-motion: reduce) { #tela-conversa nav.historico { transition: none; } }

/* rede em tela cheia: o grafo ocupa tudo; atividade e histórico abrem pelo botão */
dialog.dlg-rede { grid-template-columns: minmax(0, 1fr); }
dialog.dlg-rede .rede-painel { display: none; }
dialog.dlg-rede.com-painel { grid-template-columns: minmax(0, 1fr) 380px; }
dialog.dlg-rede.com-painel .rede-painel { display: flex; }
#rede-painel-botao[aria-expanded="true"] { border-color: var(--brilho); }
@media (max-width: 900px) { dialog.dlg-rede.com-painel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 40vh; } }

/* catálogo no mesmo grid da página de Integrações: conteúdo centralizado em 1120px, padding igual */
.catalogo-lista { padding: var(--esp-2) 20px 24px; align-items: center; } /* mesmo começo das outras telas (8 px abaixo do topo) */
.catalogo-lista > * { width: min(1120px, 100%); }
#grade { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }

/* balão do agente: status em mono com LED, chamada aninhada sem pílulas soltas, markdown legível */
.cab-exec .estado-exec { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
.cab-exec .estado-exec.rodando .led, .cab-exec .estado-exec.aguardando_usuario .led, .cab-exec .estado-exec.aguardando_aprovacao .led { background: var(--brilho); animation: pulsar 1.2s ease-in-out infinite; }
.cab-exec .estado-exec.concluida .led { background: var(--brilho); }
.cab-exec .estado-exec.erro .led, .cab-exec .estado-exec.nao_executada .led, .cab-exec .estado-exec.cancelada .led { background: var(--erro); }
.cab-exec .estado-exec.erro, .cab-exec .estado-exec.nao_executada { color: var(--erro-lcd); }
.cab-exec .dur { font: 11px var(--font-mono); color: var(--suave); }
.cab-exec .dur:empty { display: none; }
/* a pílula do agente já tem LED de status: sem o ponto extra */
.msg.agente .cab-exec::before { display: none; }
/* chamada a outro agente, dentro do passo: uma linha discreta + os passos dele (ou o motivo de não ter rodado) */
.passo .sub { margin-top: 6px; padding: 10px 12px; border-radius: var(--raio-ctl); background: rgba(255, 255, 255, .03); border: 1px solid var(--escuro-linha); }
.passo .sub .cab-exec { display: flex; padding: 0; margin: 0 0 6px; border: 0; background: none; box-shadow: none; cursor: default; }
.passo .sub .cab-exec::after { display: none; }
.passo .sub .passos { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.passos-vazio { font: 12px var(--font-mono); }
.passo .sub .passos-vazio { display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--cinza); }
.passos-vazio.erro { color: var(--erro-lcd); }
.passo .det .rotulo { font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.passo .det pre.valor { white-space: pre-wrap; word-break: break-word; }
/* markdown: tabela, título e lista */
.md-tabela { overflow-x: auto; margin: 6px 0 10px; border: 1px solid var(--escuro-linha); border-radius: var(--raio-ctl); }
.md-tabela table { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 1.45; white-space: normal; }
.md-tabela th { text-align: left; font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); background: rgba(255, 255, 255, .04); }
.md-tabela th, .md-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--escuro-2); vertical-align: top; }
.md-tabela tr:last-child td { border-bottom: 0; }
.md-titulo { display: inline-block; font: 600 17px var(--font-display); letter-spacing: -.02em; color: var(--lcd-texto); margin-top: 4px; }
.md-item { display: inline-block; position: relative; padding-left: 16px; }
.md-item::before { content: ''; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 1px; background: var(--brilho); }
.texto-final code, .passo.texto code { word-break: break-all; }

/* rede abaixo do topo: o header continua à vista */
dialog.dlg-rede { position: fixed; inset: auto; top: var(--topo, 64px); left: 0; z-index: 50; width: 100vw; height: calc(100vh - var(--topo, 64px)); padding: 0 16px 16px; }

/* chat menor, fluxo de agentes maior (a coluna da direita ganha quase metade da tela) */
#tela-conversa { grid-template-columns: minmax(480px, 1.15fr) minmax(420px, 1fr); }
@media (max-width: 1100px) { #tela-conversa { grid-template-columns: minmax(0, 1fr); } }
.cadeia-linha.varios > .no-chamado { min-width: 200px; }
/* histogramas dos cartões grandes com altura fixa: a coluna larga não estica os pontos */
.cartao-grande .tela-pontos, .no-chamado.cartao-grande .tela-pontos { min-height: 0; }
/* coluna larga: na cadeia, bloco e ficha voltam a ficar lado a lado */
.cadeia-linha.varios .no-chamado.cartao-grande .faixa-cartao { grid-template-columns: var(--bloco-p) minmax(0, 1fr); gap: 10px; align-items: center; }

/* detalhe do agente (catálogo) no padrão dos cartões */
.detalhe-agente { margin: 0 16px 16px 0; border-radius: var(--raio-cartao); padding: 12px 14px 18px; gap: 14px; background: var(--sup); }
.faixa-detalhe { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center; }
.faixa-detalhe .bloco { width: var(--bloco); height: var(--bloco); border-radius: calc(var(--bloco) / 4); background: var(--primaria); color: var(--branco); display: flex; align-items: flex-end; padding: 7px 9px; font: 700 30px/.8 var(--font-display); letter-spacing: -.05em; }
.faixa-detalhe.est-sem-integracao .bloco { background: var(--erro); }
.faixa-detalhe.est-rascunho .bloco { background: var(--cinza-medio); color: var(--escuro-2); }
.faixa-detalhe.est-desativado .bloco { background: var(--tinta); color: var(--cinza); }
.faixa-detalhe .ficha { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.faixa-detalhe .kicker { display: flex; align-items: center; gap: 7px; font: 700 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.faixa-detalhe.est-ativo .kicker .led { background: var(--brilho); }
.faixa-detalhe.est-sem-integracao .kicker { color: var(--erro); } .faixa-detalhe.est-sem-integracao .kicker .led { background: var(--erro); }
.faixa-detalhe h3 { margin: 0; font: 600 var(--titulo)/1.1 var(--font-display); letter-spacing: -.03em; }
.faixa-detalhe .exts { font: 11px var(--font-mono); color: var(--suave); }
.fechar-detalhe { align-self: start; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 10px; border-color: transparent; background: transparent; color: var(--suave); }
.fechar-detalhe:hover { background: var(--sup-hover); color: var(--texto); }
.descricao-detalhe { font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.numeros-detalhe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px; border-radius: 16px; background: var(--lcd) var(--grade); color: var(--lcd-texto); }
.numeros-detalhe > div { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }
.numeros-detalhe .rotulo { font: 600 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
.numeros-detalhe b { font: 600 var(--num-p)/1 var(--font-display); letter-spacing: -.04em; }
.numeros-detalhe b small { color: var(--brilho); font-size: 1em; }
.numeros-detalhe b.data { font-size: 13px; letter-spacing: 0; line-height: 1.3; }
.detalhe-agente .bloco h4 { font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin-bottom: 8px; }
.detalhe-agente .bloco ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--esp-1); font-size: 13px; }
.detalhe-agente .bloco li { position: relative; padding-left: 14px; }
.detalhe-agente .bloco li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 1px; background: var(--brilho); }
.detalhe-agente .chips .chip { background: var(--sup-hover); border-color: transparent; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; }
/* selos de risco: a cor do tema (brilho) só aparece sobre fundo escuro, nunca sobre o claro (ficava ilegível) */
.detalhe-agente .chips .chip.risco-leitura { background: var(--escuro-1); color: var(--brilho); }
.detalhe-agente .chips .chip.risco-dev { background: var(--atencao-fundo); color: var(--atencao-texto); }

/* seletor no padrão da tela (public/seletor.js) no lugar da lista nativa */
.seletor-nativo { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px; }
.seletor { position: relative; display: inline-block; min-width: 0; }
dialog .seletor { display: block; margin-top: 6px; }
.seletor-botao { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); width: 100%; height: var(--ctl); padding: 0 14px; border-radius: var(--raio); border: 1px solid var(--borda-ctl); background: var(--branco); color: var(--texto); font: 500 14px var(--font-sans); white-space: nowrap; }
.seletor-botao:hover, .seletor.aberto .seletor-botao { border-color: var(--brilho); }
.seletor-botao:focus-visible { outline: none; border-color: var(--brilho); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brilho) 25%, transparent); }
.seletor-botao i { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; opacity: .7; }
.seletor.aberto .seletor-botao i { transform: translateY(2px) rotate(-135deg); }
.seletor-lista { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: var(--sup); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .06); }
.seletor-lista li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font: 500 14px var(--font-sans); color: var(--texto); cursor: pointer; white-space: nowrap; }
.seletor-lista li .led { background: transparent; }
.seletor-lista li.foco { background: var(--sup-hover); }
.seletor-lista li[aria-selected="true"] { font-weight: 600; }
.seletor-lista li[aria-selected="true"] .led { background: var(--brilho); box-shadow: 0 0 5px var(--brilho); }

/* Conversa: 70% chat, 30% fluxo de agentes */
#tela-conversa { grid-template-columns: minmax(0, 7fr) minmax(360px, 3fr); }
@media (max-width: 1100px) { #tela-conversa { grid-template-columns: minmax(0, 1fr); } }
.cadeia-linha.varios > .no-chamado { min-width: 170px; }

/* histórico de chamadas (painel da rede): cartão limpo; o estilo do cartão não vaza para os passos de dentro */
.chamadas { gap: var(--esp-2); }
.chamadas > details.registro { border: 0; border-radius: 16px; background: var(--sup); font-size: 13px; }
.chamadas > details.registro.filho { margin-left: 18px; position: relative; }
.chamadas > details.registro.filho::before { content: ''; position: absolute; left: -11px; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(var(--borda-ctl) 0 4px, transparent 4px 8px); }
.chamadas > details.registro > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; list-style: none; cursor: pointer; }
.chamadas > details.registro > summary::-webkit-details-marker { display: none; }
.chamadas > details.registro > summary .quem { grid-row: 2; grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--suave); }
.chamadas > details.registro > summary .quem b { color: var(--texto); font-weight: 600; }
.seta-quem { width: 14px; height: 2px; background: currentColor; position: relative; opacity: .6; }
.seta-quem::after { content: ''; position: absolute; right: -1px; top: -3px; width: 5px; height: 5px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.chamadas > details.registro > summary .estado-exec { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.chamadas > details.registro > summary .estado-exec.concluida .led { background: var(--brilho); }
.chamadas > details.registro > summary .estado-exec.rodando .led { background: var(--brilho); animation: pulsar 1.2s ease-in-out infinite; }
.chamadas > details.registro > summary .estado-exec.erro, .chamadas > details.registro > summary .estado-exec.nao_executada { color: var(--erro); }
.chamadas > details.registro > summary .estado-exec.erro .led, .chamadas > details.registro > summary .estado-exec.nao_executada .led { background: var(--erro); }
.chamadas > details.registro > summary .meta { grid-row: 1; grid-column: 2; font: 11px var(--font-mono); color: var(--suave); white-space: nowrap; }
.chamadas > details.registro > .detalhes { border-top: 1px solid var(--bg); padding: 12px; display: flex; flex-direction: column; gap: var(--esp-3); }
.campo-registro .rotulo { font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin-bottom: 6px; }
.texto-registro { max-height: 220px; overflow-y: auto; padding: 10px 12px; border-radius: var(--raio-ctl); background: var(--lcd); color: var(--balao-texto); font: 13px/1.55 var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.texto-registro code { background: rgba(255, 255, 255, .08); color: var(--lcd-texto-2); }
.passos-registro { padding: 6px 10px; border-radius: var(--raio-ctl); background: var(--lcd); }
.passos-registro .passos { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ids-registro { font: 10px var(--font-mono); color: var(--suave); overflow-wrap: anywhere; }
.chamadas > details.registro > summary { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-1); }
.chamadas > details.registro > summary .meta { white-space: normal; }
.texto-registro .md-tabela { white-space: normal; }
.texto-registro .md-tabela table { min-width: 560px; }
.cadeia-linha.varios > .no-chamado { min-width: 0; }

/* ======================= tema (só cor) — public/tema.js troca --primaria e --brilho ======================= */
:root {
  --primaria-fundo: color-mix(in srgb, var(--primaria) 14%, #fff);
  --primaria-escura: color-mix(in srgb, var(--primaria) 78%, #000);
}
button.primario:hover { background: color-mix(in srgb, var(--primaria) 88%, var(--branco)); border-color: color-mix(in srgb, var(--primaria) 88%, var(--branco)); }
.chip.mais { color: var(--primaria-escura); }
.passo.decisao { background: color-mix(in srgb, var(--brilho) 14%, transparent); color: color-mix(in srgb, var(--brilho) 25%, var(--branco)); }
.cartao-agente.est-ativo .kicker { color: var(--primaria-escura); }

/* botão e painel de cores no topo */
.tema-topo { position: relative; }
#abrir-tema { height: var(--ctl); border-radius: var(--raio-pilula); padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: var(--esp-2); background: var(--escuro-2); border-color: var(--escuro-borda); color: var(--balao-texto); }
#abrir-tema[aria-expanded="true"] { border-color: var(--brilho); }
.amostra-tema { width: 14px; height: 14px; border-radius: 4px; background: var(--primaria); box-shadow: inset 0 0 0 3px var(--brilho), 0 0 6px color-mix(in srgb, var(--brilho) 60%, transparent); }
.painel-tema { position: absolute; z-index: 70; top: calc(100% + 8px); right: 0; width: 280px; padding: 12px; border-radius: var(--raio-tela); background: var(--sup); color: var(--texto); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.painel-tema[hidden] { display: none; }
.rotulo-tema { display: block; margin: 2px 4px 10px; font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.cores-tema { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cores-tema button { display: flex; align-items: center; gap: 10px; height: var(--ctl); padding: 0 10px; border-radius: var(--raio-ctl); border: 1px solid transparent; background: transparent; color: var(--texto); font: 500 13px var(--font-sans); text-align: left; }
.cores-tema button:hover { background: var(--sup-hover); }
.cores-tema button[aria-pressed="true"] { border-color: var(--tinta); font-weight: 600; }
.cores-tema i { flex: none; width: 22px; height: 22px; border-radius: 7px; }

/* barra de rolagem no padrão da tela: fina, sem setas; escura nas telas de pontos, clara nos cartões */
* { scrollbar-width: thin; scrollbar-color: #4a4845 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4a4845; border-radius: var(--raio-pilula); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--brilho); background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
::-webkit-scrollbar-corner { background: transparent; }
.cartao-pontos, aside.rede, .rede-painel, nav.historico, .detalhe-agente, dialog, .seletor-lista, .integracao, .chamadas { scrollbar-color: #c9c9c5 transparent; }
:is(aside.rede, .rede-painel, nav.historico, .detalhe-agente, dialog, .seletor-lista) ::-webkit-scrollbar-thumb,
:is(aside.rede, .rede-painel, nav.historico, .detalhe-agente, dialog, .seletor-lista)::-webkit-scrollbar-thumb { background: var(--borda-ctl); background-clip: padding-box; }
.mensagens, .texto-registro, .passos-registro, .tela-pontos, .md-tabela, .texto-final, .passo .det pre.valor { scrollbar-color: #4a4845 transparent; }
.tema-topo + .conta { margin-left: 0; }

/* cartão do agente: um padrão só (catálogo e cadeia da Conversa usam cartaoAgente) */
.cartao-agente .kicker { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-agente .kicker .led { flex: none; }
.cartao-agente.est-ativo .kicker .led { background: var(--brilho); }
.cartao-agente.est-sem-integracao .kicker .led { background: var(--erro); }
.cartao-agente.rodando .kicker .led { animation: pulsar 1.2s ease-in-out infinite; }
.cartao-agente .ficha { min-width: 0; }
.cadeia-linha > .cartao-agente { flex: 1 1 0; min-width: 0; }
.cadeia-linha.varios { overflow-x: visible; }
.cartao-agente .topo-tela { flex-wrap: nowrap; min-width: 0; }
.cartao-agente .topo-tela .rotulo { white-space: nowrap; }
.cartao-agente .total-tela { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cartao-agente .nome { min-width: 0; }

/* largura total em todas as telas (topo, Conversa, Catálogo, Integrações), com a mesma margem lateral */
:root { --margem-app: 20px; }
header { padding-left: var(--margem-app); padding-right: var(--margem-app); }
#tela-conversa { padding-left: var(--margem-app); padding-right: var(--margem-app); }
.integracoes-pagina { max-width: none; padding-left: var(--margem-app); padding-right: var(--margem-app); }
.catalogo-lista { padding-left: var(--margem-app); padding-right: var(--margem-app); }
.catalogo-lista > * { width: 100%; }
dialog.dlg-rede { padding: 0 var(--margem-app) 16px; }
#cofre[hidden] { display: none; }

/* catálogo: cartões um pouco maiores */
#grade { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: var(--esp-4); }
#grade .cartao-agente .tela-pontos { min-height: 220px; padding: 16px 18px 14px; }
#grade .cartao-agente .tela-pontos .numero { font-size: var(--num-g); }
#grade .cartao-agente .faixa-cartao { grid-template-columns: var(--bloco) minmax(0, 1fr); }
#grade .cartao-agente .faixa-cartao .bloco { width: var(--bloco); height: var(--bloco); border-radius: calc(var(--bloco) / 4); font-size: 30px; }
#grade .cartao-agente .nome { font-size: var(--nome); }
/* catálogo: cartões mais largos e textos que quebram em vez de cortar */
#grade { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
#grade .cartao-agente .exts { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
#grade .cartao-agente .nome { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#grade .cartao-agente .tela-pontos { min-height: 240px; }
#grade .cartao-agente .tela-pontos .numero { font-size: var(--num-g); }

/* Conversa: só o último agente chamado, cartão baixo na largura toda da coluna */
.na-cadeia.baixo { width: 100%; }
.na-cadeia.baixo .tela-pontos { min-height: 0; padding: 12px 16px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; align-items: end; }
.na-cadeia.baixo .tela-pontos .topo-tela { grid-column: 1 / -1; }
.na-cadeia.baixo .tela-pontos .numero { font-size: var(--num-m); margin: 0; }
.na-cadeia.baixo .hist { margin: 0; padding-top: 0; align-self: end; }
.na-cadeia.baixo .faixa-cartao { grid-template-columns: var(--bloco) minmax(0, 1fr); gap: var(--esp-3); }
.na-cadeia.baixo .faixa-cartao .bloco { width: var(--bloco); height: var(--bloco); border-radius: calc(var(--bloco) / 4); font-size: 30px; padding: 7px 9px; }
.na-cadeia.baixo .nome { font-size: var(--nome); }

/* histogramas: pontos acendem e apagam secos (sem transição, que deixava a coluna do radar "fantasma") e brilho curto */
.hist i { transition: none; }
.hist i.aceso { box-shadow: 0 0 3px color-mix(in srgb, var(--brilho) 45%, transparent); }
.hist i.pico { background: color-mix(in srgb, var(--brilho) 70%, var(--branco)); box-shadow: 0 0 4px color-mix(in srgb, var(--brilho) 70%, transparent); }

/* pontos dos histogramas: sempre o pixel único (--pixel a cada --pixel-passo, igual à grade do fundo); o número de
   colunas e de linhas sai do espaço disponível (public/pontos.js), o ponto nunca estica */

/* trabalho do agente num balão só: cabeçalho (clicável) + passos + resposta, separados por linhas finas */
.msg.agente > .corpo { background: var(--balao); border: 1px solid var(--balao-borda); box-shadow: 0 0 0 6px var(--lcd); border-radius: 16px; padding: 4px 16px; }
.msg.agente.recolhido > .corpo { padding-top: 0; padding-bottom: 0; }
.msg.agente > .corpo > .cab-exec { display: flex; width: 100%; padding: 10px 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.msg.agente > .corpo > .cab-exec::after { margin-left: auto; }
.msg.agente > .corpo > .passos, .msg.agente > .corpo > .passos-vazio { margin: 0; padding: 10px 0; border: 0; border-top: 1px solid var(--escuro-2); border-radius: 0; background: none; box-shadow: none; }
.msg.agente > .corpo > .passos-vazio { display: block; }
.msg.agente > .corpo > details.final { margin: 0; padding: 10px 0 12px; border-top: 1px solid var(--escuro-2); }
.msg.agente > .corpo > details.final > summary { display: flex; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.msg.agente > .corpo > details.final .texto-final { margin-top: 10px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.msg.agente > .corpo > .final.erro { margin: 0 0 12px; box-shadow: none; }
.msg.agente > .corpo > .chamada { margin: 0 0 12px; }

/* histórico: os passos dentro do registro usam o mesmo visual escuro do chat (a regra .chamadas details não vaza) */
.chamadas .passos-registro details, .chamadas .passos-registro summary, .chamadas .passos-registro li:not(.evento) { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.chamadas .passos-registro .passo { color: var(--lcd-texto-3); }
.chamadas .passos-registro .passo summary { padding: 5px 0; color: var(--lcd-texto-2); }
.chamadas .passos-registro .passo .det { padding: 2px 0 8px 16px; }
.chamadas .passos-registro .passo .det pre.valor { max-height: 180px; overflow: auto; background: var(--lcd); border: 1px solid var(--escuro-2); border-radius: 10px; padding: 8px 10px; font: 11px/1.5 var(--font-mono); color: var(--lcd-texto-2); }
.chamadas .passos-registro .passo .sub { background: rgba(255, 255, 255, .03); border: 1px solid var(--escuro-linha); border-radius: var(--raio-ctl); padding: 10px 12px; }
.chamadas .passos-registro .passo.texto { color: var(--lcd-texto-3); }
dialog.dlg-rede.com-painel { grid-template-columns: minmax(0, 1fr) var(--gaveta); }
/* painel da rede: abas + X para fechar */
.topo-painel-rede { display: flex; align-items: center; gap: var(--esp-2); }
.linha-tempo li.vazio { display: block; }

/* diálogos de conexão: passos alinhados, número centralizado, respiro entre texto, botão e campo */
dialog:not(.dlg-rede) { padding: 10px 10px 22px; max-height: calc(100vh - 40px); overflow-y: auto; }
dialog:not(.dlg-rede) > :not(h3) { margin-left: 22px; margin-right: 22px; }
dialog:not(.dlg-rede) h3 { margin-bottom: 20px; padding: 22px 24px 36px; }
dialog:not(.dlg-rede) > p { margin-top: 0; margin-bottom: 20px; font-size: 13px; line-height: 1.55; }
dialog ol { gap: 22px; margin-bottom: 22px; }
dialog ol > li { padding-left: 46px; min-height: 32px; line-height: 1.5; }
dialog ol > li::before { top: 0; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; font: 700 15px/1 var(--font-display); border-radius: 10px; }
dialog ol > li > button, dialog ol > li > a.botao { display: inline-flex; margin-top: 12px; }
dialog ol > li > input, dialog ol > li > .seletor { margin-top: 12px; }
dialog ol > li > input + input { margin-top: 8px; }
dialog ol > li > .dica { margin-top: 10px; }
dialog .acoes { margin-top: 4px; }

/* dica (tooltip) no padrão da tela — public/dica.js */
.dica-flutuante { position: fixed; z-index: 1000; max-width: 320px; padding: 7px 11px; border-radius: 10px; background: var(--tinta); border: 1px solid var(--escuro-borda); color: var(--lcd-texto); font: 500 12px/1.45 var(--font-sans); white-space: pre-line; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); pointer-events: none; }
.dica-flutuante[hidden] { display: none; }

/* painel da rede: abas internas no padrão (.ab-tabs) e o X das gavetas (.fechar-detalhe) no canto */
.topo-painel-rede .ab-tabs { flex: 0 1 auto; max-width: 100%; }
.topo-painel-rede .fechar-detalhe { flex: none; align-self: center; margin-left: auto; }

/* MySQL: os dois ambientes no topo da janela */
.ambientes-mysql { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); margin-bottom: 18px; }
.amb-mysql { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; padding: 10px 12px; border-radius: 12px; background: #e6e6e3; font-size: 13px; }
.amb-mysql b { font-weight: 600; }
.amb-mysql span { grid-column: 1 / -1; color: var(--suave); font: 11px var(--font-mono); overflow-wrap: anywhere; }
.amb-mysql .led { background: #b9b9b5; }
.amb-mysql.ok .led { background: var(--brilho); box-shadow: 0 0 5px color-mix(in srgb, var(--brilho) 60%, transparent); }
dialog .acoes button.perigo { color: var(--erro); margin-right: auto; }
dialog .acoes button[hidden] { display: none; }

/* detalhe do agente: Ativar / Desativar */
.acoes-detalhe { display: flex; align-items: center; gap: var(--esp-3); padding: 10px 12px; border-radius: 14px; background: var(--sup-hover); font-size: 13px; color: var(--suave); }
.acoes-detalhe button { flex: none; height: var(--ctl); padding: 0 16px; border-radius: var(--raio-ctl); }
.acoes-detalhe button.discreto { background: transparent; border-color: var(--borda-ctl); color: var(--texto); }

/* uso da conta Claude no topo: janela de 5 h e semanal */
.limites-topo { height: var(--ctl); border-radius: var(--raio-pilula); padding: 0 14px; display: inline-flex; align-items: center; gap: 14px; background: var(--escuro-2); border: 1px solid var(--escuro-borda); color: var(--balao-texto); font: 500 11px var(--font-mono); cursor: pointer; }
.limites-topo[hidden] { display: none; }
.limites-topo.medindo { opacity: .6; }
.limites-topo.bloqueado { border-color: var(--erro); }
.limite { display: inline-flex; align-items: center; gap: 6px; }
.rotulo-limite { color: var(--pagina-suave); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.limite .trilho { width: 54px; height: 6px; border-radius: var(--raio-pilula); background: var(--escuro-borda); overflow: hidden; }
.limite .trilho i { display: block; height: 100%; background: var(--brilho); }
.limite.medio .trilho i { background: var(--alerta); }
.limite.alto .trilho i { background: var(--erro); }
.limite .pct { min-width: 30px; text-align: right; }
.estado-exec.aguardando_limite .led, .passo.evento.limite.rodando .led { background: var(--alerta); }

/* testes do agente no detalhe do Catálogo */
.testes-detalhe .linha-testes { display: flex; align-items: center; gap: var(--esp-2); font-size: 13px; }
.testes-detalhe .linha-testes .situacao-testes { flex: 1; min-width: 0; }
.testes-detalhe .led { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--pagina-suave); }
.testes-detalhe .ok > .led { background: var(--brilho); }
.testes-detalhe .erro > .led { background: var(--erro); }
.testes-detalhe .pulado > .led { background: var(--alerta); }
.lista-testes { list-style: none; margin: 10px 0 0; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.lista-testes li { display: flex; gap: var(--esp-2); align-items: flex-start; font-size: 12px; }
.lista-testes li .led { margin-top: 4px; }
.lista-testes li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista-testes li span { color: var(--suave); overflow-wrap: anywhere; }

/* botões sem fundo, dois papéis (rodada 3, K5): .discreto = ação neutra secundária; .perigo = excluir/remover.
   .perigo.confirmar = segundo clique da exclusão em dois passos (fundo vermelho). Escopos antigos (.integracao,
   .acoes-detalhe) continuam valendo onde já estavam. */
/* diálogos das Integrações (SSH) ficam como estavam: o papel neutro não vale dentro de dialog */
button.discreto:not(dialog button), button.perigo { background: transparent; border-color: transparent; color: var(--suave); padding: 0 10px; }
button.discreto:not(dialog button):hover { color: var(--texto); background: var(--sup-hover); border-color: transparent; }
button.perigo:hover { color: var(--erro); background: var(--erro-fundo); border-color: transparent; }
button.perigo.confirmar { color: var(--branco); background: var(--erro); border-color: var(--erro); }
button.perigo.confirmar:hover { color: var(--branco); background: var(--erro-escuro); border-color: var(--erro-escuro); }
/* campo de compor da Conversa e o Enviar/Parar ao lado: mesma altura dos outros controles (--ctl, 36) */
#form #enviar, #form #parar { height: var(--ctl); }

/* ======================= Responsividade (D58) =======================
   Pontos de quebra: 2100 (topo em duas linhas) · 1100 (topo compacto; Conversa com coluna direita estreita) ·
   900 (Conversa empilhada) · 760 (celular: topo mínimo, margens menores, gavetas em tela cheia).
   Referência de cada componente em docs/padrao-visual.md, seção Responsividade. */

/* topo: abaixo de ~2100px as abas descem para uma segunda linha de largura toda (rolável no toque); a primeira
   linha fica com a marca à esquerda e as ferramentas à direita */
@media (max-width: 2100px) {
  header { flex-wrap: wrap; row-gap: var(--esp-2); }
  header h1 { margin-right: auto; }
  header .abas { order: 10; flex: 1 0 100%; margin-left: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; cursor: grab; }
  header .abas.arrastando { cursor: grabbing; user-select: none; } /* arrastar com o mouse (public/arrastar.js) */
  header .abas::-webkit-scrollbar { display: none; }
  header .abas button { flex: none; white-space: nowrap; }
}
/* limites da conta mais curtos (sem a porcentagem; o número completo fica na dica do botão) */
@media (max-width: 1280px) {
  .limites-topo { gap: var(--esp-2); padding: 0 10px; }
  .limite .pct { display: none; }
  .limite .trilho { width: 36px; }
}
/* topo compacto: Tema só com a amostra de cor e o indicador de integrações só com os pontos */
@media (max-width: 1100px) {
  #abrir-tema { font-size: 0; gap: 0; width: var(--ctl); padding: 0; justify-content: center; }
  .conta .indicador { font-size: 0; gap: 4px; }
  .conta .indicador .ponto { flex: none; }
}
/* tablet: os limites e os pontos de integração saem do topo (continuam na aba Integrações: cartão do Claude e lista) */
@media (max-width: 900px) { .limites-topo, #conta { display: none !important; } }
/* Catálogo: a grade nunca passa da largura da tela; 2 colunas no tablet, 1 no celular (todos do mesmo tamanho) */
#grade { grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); }
@media (max-width: 1100px) { #grade { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); } }
@media (max-width: 760px) { #grade { grid-template-columns: minmax(0, 1fr); } }
/* Conversa no tablet: a coluna direita (agentes + música) fica estreita ao lado do chat */
@media (max-width: 1100px) and (min-width: 901px) {
  #tela-conversa { grid-template-columns: minmax(0, 1fr) 340px; }
}
/* Conversa empilhada: o chat ocupa a altura da tela; os cartões de agentes e a música vêm logo abaixo (rolando a tela) */
@media (max-width: 900px) {
  #tela-conversa { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; align-content: start; overflow-y: auto; }
  #tela-conversa .chat { height: calc(100dvh - var(--topo, 110px) - var(--esp-4)); min-height: 420px; }
  #tela-conversa aside.rede { overflow: visible; }
  .rede-musica { min-height: 320px; }
}
/* celular: margens menores; no topo ficam a marca, Conversas e Nova conversa (só ícone), Tema e a conta.
   O uso da conta (limites) e os pontos de integração saem do topo — estão na aba Integrações (cartão do Claude) */
@media (max-width: 760px) {
  :root { --margem-app: 12px; }
  header { padding-top: 10px; padding-bottom: 8px; gap: var(--esp-2); }
  header h1 { font-size: 22px; }
  .limites-topo, #conta { display: none !important; }
  /* botões quadrados do topo (Conversas, Nova conversa, Tema, conta): mesmo tamanho, ícone no centro exato e um
     espaço igual entre eles */
  .acoes-conversa { gap: var(--esp-2); margin-left: 0; }
  /* flex em linha (não grade): o texto escondido do botão ("Conversas", "Tema") não vira uma 2ª linha que empurra o ícone */
  #abrir-conversas, #nova-topo, #abrir-tema { display: inline-flex; align-items: center; justify-content: center; width: var(--ctl); height: var(--ctl); padding: 0; gap: 0; font-size: 0; line-height: 0; }
  /* "+" desenhado com duas barras (o caractere da fonte não fica no centro exato da caixa) */
  #nova-topo::before { content: ''; display: block; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
  #abrir-conversas .icone-lista, #abrir-tema .amostra-tema { margin: 0; }
  header > .tema-topo, header > .conta-usuario, header > #conta-usuario { margin-left: 0; }
  .abas button { padding: 0 12px; }
  main { padding-left: var(--margem-app); padding-right: var(--margem-app); }
}
/* Integrações: 2 por linha no tablet, 1 no celular (o minmax de 460px vazava no celular) */
@media (max-width: 1100px) { .integracoes { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); } }
@media (max-width: 760px) { .integracoes { grid-template-columns: minmax(0, 1fr); } }
/* celular: a dica longa do campo (Enter/Shift+Enter, que nem existe no toque) vira uma linha com reticências */
@media (max-width: 760px) {
  #entrada:placeholder-shown { overflow: hidden; }
  #entrada::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* rede de agentes no tablet/celular: sem o painel, o palco ocupa a altura toda (antes sobrava uma linha de 40vh vazia);
   no celular a legenda fica numa linha e os botões em outra, sem quebrar o texto dentro do botão */
@media (max-width: 900px) { dialog.dlg-rede:not(.com-painel) { grid-template-rows: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .rede-topo { flex-wrap: wrap; gap: var(--esp-2); padding: 12px; }
  .rede-botoes { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin-left: 0; }
  .rede-botoes button { white-space: nowrap; }
}
/* rede com o painel de atividade aberto: tablet largo mantém o painel ao lado (mais estreito); ≤900 o painel desce
   para baixo do palco (a regra de --gaveta, mais abaixo no arquivo, anulava a de 900) */
@media (max-width: 1100px) and (min-width: 901px) { dialog.dlg-rede.com-painel { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 900px) { dialog.dlg-rede.com-painel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 42vh; } }
.rede-topo { flex-wrap: wrap; row-gap: var(--esp-2); }
.rede-botoes button { white-space: nowrap; }

/* Modo auditoria (gaveta de conversas, só o dono): toggle discreto acima da lista */
.aud-toggle { display: flex; align-items: center; gap: .5ch; padding: 8px 12px 2px; font-size: .8rem; opacity: .75; cursor: pointer; }
.aud-toggle input { cursor: pointer; }