/* ============================================================================
   iBooster CRM - Bolt: tela Agentes do Bolt (quadro de operacao ao vivo)
   So tokens de tokens.css e pecas de kit.css; o tema escuro vem dos tokens.
   Prefixo .ag-. So o que esta vivo se mexe (ponto pulsando, faixa correndo no
   cartao que roda, item novo do feed) e o personagem de cada agente (boneco
   animado pelo estado, balao com a fala da vez); reduced-motion corta o
   movimento e deixa a cor, que ja diz o estado.
   ========================================================================== */

.ag{display:grid;gap:var(--s-4);min-width:0}
.ag-sem{color:var(--ink-3)}

/* ---------------- faixa de estado ---------------- */

.ag-status{position:relative;display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--e1);overflow:hidden;--c:var(--ok)}
.ag-status::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,color-mix(in srgb,var(--c) 9%,transparent) 0%,transparent 45%)}
.ag-status[data-st="freio"]{--c:var(--danger)}
.ag-status[data-st="ilegivel"],.ag-status[data-st="fila"],.ag-status[data-st="atencao"]{--c:var(--warn)}
.ag-status-marca{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;
  background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.ag-status-marca .ic{width:20px;height:20px}
.ag-status-marca .ponto-vivo{--c:var(--ok);width:12px;height:12px}
.ag-status-txt{position:relative;min-width:0;flex:1}
.ag-status-txt b{display:block;font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:-.01em;color:var(--ink)}
.ag-status-txt p{font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px;line-height:var(--lh-ui)}
.ag-status .dir{position:relative;display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end}

.ag-conexao{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:var(--r-full);
  background:var(--surface-2);box-shadow:var(--e1);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--ink-2);white-space:nowrap}
.ag-conexao .ponto-vivo{--c:var(--ok);width:7px;height:7px}
.ag-conexao[data-st="vivo"]{color:var(--ok);background:transparent;box-shadow:none}
.ag-conexao[data-st="polling"] .ponto-vivo{--c:var(--warn);animation:none}
.ag-conexao[data-st="off"] .ponto-vivo{--c:var(--ink-4);animation:none}

/* ---------------- numeros do topo ---------------- */
.ag-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s-3)}
.ag-kpi{position:relative;display:grid;align-content:start;gap:6px;min-width:0;padding:14px 16px;border-radius:var(--r);
  background:var(--surface);box-shadow:var(--e1);text-align:left;font:inherit;color:inherit;
  transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
button.ag-kpi{cursor:pointer}
button.ag-kpi:hover{box-shadow:var(--e2);transform:translateY(-1px)}
button.ag-kpi:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ag-kpi .l{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--ink-3)}
.ag-kpi:has(.anel) .l{padding-right:28px}
.ag-kpi .n{display:flex;align-items:center;gap:8px;font-size:var(--fs-2xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);
  line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.ag-kpi .n .ponto-vivo{--c:var(--ok)}
.ag-kpi .n .ag-sem{font-size:var(--fs-sm);font-weight:var(--fw-medium);letter-spacing:0}
.ag-kpi .s{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ag-kpi.alerta .n{color:var(--danger)}
.ag-kpi .anel{position:absolute;top:14px;right:14px;--anel-cor:var(--ok);--anel-tam:22px}
.ag-kpi .anel.alto{--anel-cor:var(--warn)}
.ag-kpi .anel.estourou{--anel-cor:var(--danger)}

/* ---------------- alertas ---------------- */
.ag-alertas{display:grid;gap:var(--s-2)}
.ag-alertas:empty{display:none}
.ag-alerta{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 14px;border-radius:var(--r);
  background:var(--warn-soft);--c:var(--warn);font-size:var(--fs-sm);line-height:var(--lh-ui);color:var(--ink-2)}
.ag-alerta > .ic{width:16px;height:16px;flex:none;color:var(--c)}
.ag-alerta.perigo{background:var(--danger-soft);--c:var(--danger)}
.ag-alerta.info{background:var(--info-soft);--c:var(--info)}
.ag-alerta .txt{flex:1;min-width:0}
.ag-alerta b{color:var(--ink);font-weight:var(--fw-semibold)}
.ag-alerta .btn{flex:none}

/* ---------------- corpo: grupos de cartoes + feed ---------------- */
.ag-corpo{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s-5);align-items:start}
.ag-grupos{display:grid;gap:var(--s-6);min-width:0}
.ag-grupo-tit{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;white-space:nowrap;margin-bottom:10px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink)}
.ag-grupo-tit .n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);
  background:var(--surface-3);color:var(--ink-2);font-size:var(--fs-2xs);font-weight:var(--fw-semibold)}
.ag-grupo-tit .dica{font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--ink-3)}
.ag-grupo[data-grupo="rodando"] .ag-grupo-tit .n{background:var(--ok-soft);color:var(--ok)}
.ag-grupo[data-grupo="atencao"] .ag-grupo-tit .n{background:var(--danger-soft);color:var(--danger)}
.ag-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--s-3)}

/* ---------------- cartao ---------------- */
.ag-cartao{position:relative;display:grid;align-content:start;gap:11px;min-width:0;padding:16px;border-radius:var(--r);
  background:var(--surface);box-shadow:var(--e1);overflow:hidden;transition:box-shadow var(--dur-2) var(--ease)}
.ag-cartao:hover{box-shadow:var(--e2)}
.ag-cartao[data-estado="problema"]{box-shadow:0 0 0 1px var(--danger-line),var(--sombra-1)}
.ag-cartao[data-estado="pausado"],.ag-cartao[data-estado="desligado"]{background:var(--surface-2)}
.ag-cartao[data-estado="pausado"] .ag-nome,.ag-cartao[data-estado="desligado"] .ag-nome{opacity:.78}
/* So o cartao que roda agora tem movimento: uma faixa de 2 px correndo no topo. */
.ag-cartao[data-estado="rodando"]::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ok),transparent) no-repeat;background-size:45% 100%;animation:ag-corre 1.6s var(--ease) infinite}
@keyframes ag-corre{from{background-position:-60% 0}to{background-position:160% 0}}

.ag-topo{display:flex;align-items:flex-start;gap:12px;min-width:0}
.ag-nome{flex:1;min-width:0}
.ag-nome button{display:block;max-width:100%;padding:0;font:inherit;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--ink);
  line-height:1.3;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ag-nome button:hover{color:var(--brand)}
.ag-nome span{display:block;margin-top:1px;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-topo .status-pill{flex:none;margin-top:1px}

.ag-motivo{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--ink-2);padding:6px 10px;border-radius:var(--r-sm);background:var(--surface-3)}
.ag-motivo .ic{width:13px;height:13px;color:var(--ink-3);flex:none}
.ag-motivo b{font-weight:var(--fw-semibold)}

.ag-agora{display:flex;align-items:center;gap:6px;min-width:0;min-height:22px;font-size:var(--fs-sm);color:var(--ink-2)}
.ag-agora.vivo{color:var(--ink)}
.ag-agora .ponto-vivo{--c:var(--ok);flex:none}
.ag-agora > span:not(.ponto-vivo):not(.k){min-width:0}
.ag-agora .k,.ag-linha .k{flex:none;width:52px;font-size:var(--fs-xs);color:var(--ink-3)}
.ag-agora .v{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-xs)}
.ag-agora .v.quebra{white-space:normal;overflow-wrap:anywhere}
.ag-agora.erro .v{color:var(--danger)}
.ag-agora.simulado .v{color:color-mix(in srgb,var(--roxo) 80%,var(--ink))}
.ag-linhas{display:grid;gap:4px}
.ag-linha{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:var(--fs-xs);color:var(--ink-2)}
.ag-linha .v{flex:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.ag-cad{flex:1;min-width:0;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}

.ag-chips{display:flex;flex-wrap:wrap;gap:5px}
.ag-chips:empty{display:none}
.ag-chip{display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 8px;border-radius:var(--r-full);
  background:var(--surface-3);color:var(--ink-2);font-size:var(--fs-2xs);font-weight:var(--fw-medium);white-space:nowrap;--c:var(--ink-3)}
.ag-chip .ic{width:11px;height:11px;color:var(--c)}
.ag-chip.info{background:var(--info-soft);--c:var(--info);color:color-mix(in srgb,var(--info) 80%,var(--ink))}
.ag-chip.aviso{background:var(--warn-soft);--c:var(--warn);color:color-mix(in srgb,var(--warn) 75%,var(--ink))}
.ag-chip.perigo{background:var(--danger-soft);--c:var(--danger);color:color-mix(in srgb,var(--danger) 85%,var(--ink))}
.ag-chip.roxo{background:var(--roxo-soft);--c:var(--roxo);color:color-mix(in srgb,var(--roxo) 80%,var(--ink))}

.ag-gasto{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px}
.ag-gasto .medidor{grid-column:1;grid-row:1}
.ag-gasto .rot{grid-column:1;grid-row:2;font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ag-gasto.sem{grid-template-columns:1fr}
.ag-gasto.sem .rot{grid-row:1;white-space:normal}
.ag-spark{grid-column:2;grid-row:1 / span 2;display:grid;justify-items:end;gap:2px}
.ag-spark svg{display:block;width:72px;height:22px;overflow:visible}
.ag-spark .linha{fill:none;stroke:var(--ok);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ag-spark .area{fill:color-mix(in srgb,var(--ok) 14%,transparent);stroke:none}
.ag-spark svg.zero .linha{stroke:var(--ink-4)}
.ag-spark svg.zero .area{fill:transparent}
.ag-spark .t{font-size:var(--fs-2xs);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}

.ag-rodape{display:flex;align-items:center;gap:8px;min-width:0;padding-top:11px;margin-top:1px;border-top:1px solid var(--line-soft)}
.ag-rodape .quem{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-rodape .quem .ic{width:14px;height:14px;flex:none}
.ag-rodape .quem .pilha{flex:none}
.ag-rodape .acoes{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none}
.ag-modo button{height:24px;padding:0 9px;font-size:var(--fs-xs)}
.ag-modo button.ativo[data-para="agir"]{color:var(--ok)}
.ag-modo button.ativo[data-para="simular"]{color:color-mix(in srgb,var(--roxo) 85%,var(--ink))}

.ag-conta{display:inline-flex;align-items:center;max-width:100%;height:20px;padding:0 7px;border-radius:var(--r-full);
  background:var(--surface-3);color:var(--ink);font:inherit;font-size:var(--fs-2xs);font-weight:var(--fw-medium);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;vertical-align:middle;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.ag-conta:hover{background:var(--brand-soft);color:var(--brand)}
.ag-agora .ag-conta{flex:none;max-width:48%}

/* ---------------- feed ao vivo ---------------- */
.ag-feed{position:sticky;top:calc(var(--topo) + 16px);display:flex;flex-direction:column;min-width:0;
  max-height:calc(100vh - var(--topo) - 40px);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e1);overflow:hidden}
.ag-feed-cab{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.ag-feed-cab h3{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--ink);margin-right:auto}
.ag-feed-filtros{display:grid;gap:8px;padding:0 16px 12px;border-bottom:1px solid var(--line-soft)}
.ag-feed-filtros .segmentado{display:flex}
.ag-feed-filtros .segmentado button{flex:1;height:26px;padding:0 8px;font-size:var(--fs-xs)}
.ag-feed-selects{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ag-feed-selects select{height:30px;min-width:0;width:100%;font-size:var(--fs-xs);padding-top:0;padding-bottom:0}
.ag-feed-rolagem{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ag-feed-lista{list-style:none;margin:0;padding:6px 8px 12px}
.ag-item{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:10px 8px;border-radius:var(--r-sm);
  transition:background var(--dur-1) var(--ease)}
.ag-item + .ag-item{box-shadow:0 -1px 0 var(--line-soft)}
.ag-item:hover{background:var(--hover)}
.ag-item.novo{animation:ag-entra var(--dur-3) var(--ease-out) both,brilho-novo 2.4s var(--ease) both}
@keyframes ag-entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ag-item .tile-icone{margin-top:1px}
.ag-item-corpo{min-width:0}
.ag-item .l1{font-size:var(--fs-sm);line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.ag-quem{padding:0;font:inherit;font-weight:var(--fw-semibold);color:var(--ink);cursor:pointer}
.ag-quem:hover{color:var(--brand)}
.ag-item .det{margin-top:3px;font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ag-item .l2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:5px;font-size:var(--fs-xs);color:var(--ink-3)}
.ag-quando{font-variant-numeric:tabular-nums;white-space:nowrap}
.ag-item .l2 .ag-quando{margin-left:auto}
.ag-feed-vazio{display:grid;justify-items:center;gap:4px;padding:36px 20px;text-align:center}
.ag-feed-vazio .ic{width:28px;height:28px;color:var(--ink-4);margin-bottom:4px}
.ag-feed-vazio b{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink)}
.ag-feed-vazio span{font-size:var(--fs-xs);color:var(--ink-3);max-width:34ch}

.ag-saude{display:grid;gap:4px;padding:4px 2px 8px;font-size:var(--fs-xs);color:var(--ink-3)}
.ag-saude b{color:var(--warn);font-weight:var(--fw-semibold)}

/* ---------------- gaveta de um agente ---------------- */
.ag-gav-nome{min-width:0;flex:1}
.ag-gav-nome b{display:block;font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:-.01em;color:var(--ink)}
.ag-gav-nome span{display:block;font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-gaveta{display:grid;gap:var(--s-4);align-content:start}
.ag-gav-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ag-abas{display:flex;width:100%;overflow-x:auto;scrollbar-width:none}
.ag-abas button{flex:1;white-space:nowrap}
.ag-sub{display:flex;align-items:baseline;gap:8px;margin:var(--s-4) 0 var(--s-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--ink-2)}
.ag-sub span{font-weight:var(--fw-regular);color:var(--ink-3)}
.ag-jobs,.ag-pessoas,.ag-hist{list-style:none;margin:0;padding:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--e1);overflow:hidden}
.ag-job{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px;padding:12px 14px}
.ag-job + .ag-job,.ag-pessoas li + li,.ag-hist li + li{border-top:1px solid var(--line-soft)}
.ag-job .l1{font-size:var(--fs-sm);color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.ag-job .det{margin-top:2px;font-size:var(--fs-xs);color:var(--ink-3)}
.ag-job .l2{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:5px;font-size:var(--fs-xs);color:var(--ink-3)}
.ag-job .ag-chips{margin-top:6px}
.ag-faria{display:grid;gap:10px;justify-items:start}
.ag-pessoas li{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:var(--fs-sm)}
.ag-pessoas .nm{flex:1;min-width:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-hist li{padding:9px 14px;font-size:var(--fs-sm);color:var(--ink-2);display:flex;gap:6px;flex-wrap:wrap}
.ag-hist li span:first-child{color:var(--ink);font-weight:var(--fw-medium)}
.ag-hist .ag-quando{margin-left:auto;color:var(--ink-3);font-size:var(--fs-xs)}
.ag-ligar{display:grid;gap:12px}
.ag-ligar .dica{font-weight:var(--fw-regular)}
.ag-ligar-acoes{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ag-def{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 16px;margin:0;padding:14px 16px;border-radius:var(--r);
  background:var(--surface);box-shadow:var(--e1);font-size:var(--fs-sm)}
.ag-def dt{color:var(--ink-3)}
.ag-def dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.ag-gaveta .aviso-linha{align-items:center}
.ag-gaveta .aviso-linha .btn{margin-left:auto;flex:none}

/* ---------------- placar da sala (primeiro numero) ---------------- */
/* sem acesso ao financeiro o gasto sai: seis colunas em vez de sete */
.ag-kpis.sem-gasto{grid-template-columns:repeat(6,minmax(0,1fr))}
.ag-placar{display:grid;gap:2px}
.ag-num{display:flex;align-items:baseline;gap:6px;min-width:0}
.ag-num b{min-width:22px;font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:1.25;font-variant-numeric:tabular-nums;color:var(--ink)}
.ag-num em{font-style:normal;font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-placar-tile .s.atencao{color:var(--danger);font-weight:var(--fw-medium)}
.ag-num.ok b{color:var(--ok)}
.ag-num.sim b{color:color-mix(in srgb,var(--roxo) 85%,var(--ink))}
.ag-num.pa b{color:var(--ink-3)}

/* ---------------- o personagem (bolt-agentes-elenco.js) ---------------- */
.ag-cartao::after{content:'';position:absolute;inset:12px auto 12px 0;width:3px;border-radius:0 3px 3px 0;background:var(--ag,transparent);opacity:.85}
.ag-persona{display:flex;align-items:baseline;gap:6px;min-width:0}
.ag-persona b{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:color-mix(in srgb,var(--ag) 72%,var(--ink));letter-spacing:-.01em}
.ag-nome .ag-persona span{display:inline;margin:0;font-size:var(--fs-xs);color:var(--ink-3)}
.ag-nome .ag-persona + button{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink-2)}
.ag-boneco{position:relative;width:52px;height:56px;flex:none;margin:-4px 0 -2px -2px}
.ag-svg{display:block;width:100%;height:100%;overflow:visible}
.ag-sombra{fill:var(--ink);opacity:.08}
.ag-haste{stroke:var(--ink-3);stroke-width:2.5}
.ag-antena,.ag-raio{fill:var(--ag)}
.ag-cabeca{fill:#303744}
.ag-tronco{fill:#e9edf2}
.ag-agindo .ag-antena,.ag-plantao .ag-antena{fill:var(--ok)}
/* contorno fino: o personagem de cor escura (o Chefe de Gabinete) nao some no tema escuro */
.ag-cabeca,.ag-tronco{stroke:color-mix(in srgb,var(--ink) 14%,transparent);stroke-width:1}
.ag-braco,.ag-pescoco{fill:#505a69}
.ag-visor{fill:#0f172a}
.ag-olho{fill:#fff;transform-box:fill-box;transform-origin:center}
.ag-oficio{position:absolute;left:auto;right:0;bottom:0;width:16px;height:16px;border-radius:50%;
  background:#fff;color:var(--ag);display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ag-oficio .ic{width:10px;height:10px}
.ag-zzz,.ag-sos{position:absolute;display:none;font-weight:700;pointer-events:none}
.ag-zzz{right:12px;top:-4px;color:var(--ink-3)}
.ag-zzz i{position:absolute;font-style:normal;font-size:10px;opacity:0;animation:ag-zzz 2.4s infinite}
.ag-zzz i:nth-child(2){animation-delay:.8s;font-size:12px}
.ag-zzz i:nth-child(3){animation-delay:1.6s;font-size:14px}
.ag-sos{right:-4px;top:-2px;width:16px;height:16px;border-radius:50%;background:var(--danger);color:#fff;font-size:11px;line-height:16px;text-align:center}
/* trabalhando: o corpo balanca, os bracos digitam, a antena pisca, os olhos piscam e olham */
.ag-agindo .ag-bon-corpo{animation:ag-bob 1.4s ease-in-out infinite;transform-origin:48px 96px}
.ag-agindo .ag-braco-e{animation:ag-digita .35s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:top}
.ag-agindo .ag-braco-d{animation:ag-digita .35s ease-in-out .17s infinite alternate;transform-box:fill-box;transform-origin:top}
.ag-agindo .ag-antena{animation:ag-antena 1.1s infinite}
.ag-agindo .ag-olho,.ag-simulando .ag-olho,.ag-plantao .ag-olho{animation:ag-pisca 4s infinite}
.ag-agindo .ag-olhos{animation:ag-olha 5s ease-in-out infinite}
/* de plantao: so respira; ensaiando: mais lento, translucido, contorno tracejado */
.ag-plantao .ag-bon-corpo{animation:ag-bob 3.6s ease-in-out infinite;transform-origin:48px 96px}
.ag-simulando .ag-bon-corpo{animation:ag-bob 2.8s ease-in-out infinite;opacity:.8}
.ag-simulando .ag-cabeca{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 3}
/* dormindo: cinza, olhos fechados, zzz */
.ag-pausado .ag-svg{filter:grayscale(1);opacity:.6}
.ag-pausado .ag-olho{transform:scaleY(.15)}
.ag-pausado .ag-zzz{display:block}
/* com problema: visor vermelho, antena alarmando, a cabeca treme de vez em quando */
.ag-problema .ag-visor{fill:color-mix(in srgb,var(--danger) 55%,#0f172a)}
.ag-problema .ag-antena{fill:var(--danger);animation:ag-antena .6s infinite}
.ag-problema .ag-bon-corpo{animation:ag-treme 2.6s ease-in-out infinite;transform-origin:48px 96px}
.ag-problema .ag-sos{display:block}

.ag-balao{position:relative;display:flex;align-items:center;min-height:30px;padding:6px 10px 6px 24px;border-radius:10px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-soft);font-size:var(--fs-xs);color:var(--ink-2);line-height:1.35}
.ag-balao::before{content:'';position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--ag);color:var(--ag)}
.ag-cartao[data-estado="rodando"] .ag-balao::before{animation:ag-ping 1.4s infinite}
.ag-cartao[data-estado="pausado"] .ag-balao::before,.ag-cartao[data-estado="desligado"] .ag-balao::before{background:var(--ink-4)}
.ag-cartao[data-estado="problema"] .ag-balao::before,.ag-cartao[data-estado="sem_sinal"] .ag-balao::before{background:var(--danger)}
.ag-fala{transition:opacity .35s}
.ag-fala.sai{opacity:0}
.ag-pontos i{display:inline-block;width:3px;height:3px;margin-left:2px;border-radius:50%;background:currentColor;animation:ag-pontos 1.2s infinite}
.ag-pontos i:nth-child(2){animation-delay:.2s}
.ag-pontos i:nth-child(3){animation-delay:.4s}
.ag-gav-topo .ag-boneco{width:44px;height:48px;margin:-6px 0 -4px}
.ag-gav-persona{display:block;font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:color-mix(in srgb,var(--ag) 72%,var(--ink))}

/* ---------------- tabela de auditoria (recolhida) ---------------- */
.ag-detalhes summary{cursor:pointer;width:max-content;padding:4px 2px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--ink-3)}
.ag-detalhes summary:hover{color:var(--ink)}
.ag-detalhes .tabela-rolagem{margin-top:10px;border-radius:var(--r);background:var(--surface);box-shadow:var(--e1)}
.ag-tabela{font-size:var(--fs-xs)}
.ag-tabela .nm b{font-weight:var(--fw-semibold)}

@keyframes ag-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ag-digita{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@keyframes ag-antena{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes ag-pisca{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes ag-olha{0%,40%,100%{transform:translateX(0)}50%,70%{transform:translateX(3px)}80%,90%{transform:translateX(-3px)}}
@keyframes ag-treme{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-5deg)}88%{transform:rotate(5deg)}92%{transform:rotate(-3deg)}}
@keyframes ag-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
@keyframes ag-zzz{0%{opacity:0;transform:translate(0,10px)}30%{opacity:1}100%{opacity:0;transform:translate(6px,-12px)}}
@keyframes ag-pontos{0%,100%{opacity:.2}50%{opacity:1}}

/* ---------------- telas menores ---------------- */
@media (max-width:1320px){.ag-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.ag-kpis:not(.sem-gasto) .ag-placar-tile{grid-column:span 2}.ag-kpis:not(.sem-gasto) .ag-placar{grid-auto-flow:column;justify-content:start;gap:18px;margin-top:4px}.ag-kpis.sem-gasto{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1180px){
  .ag-corpo{grid-template-columns:minmax(0,1fr)}
  /* sem coluna ao lado, o "Agora" sobe para antes dos cartoes: e o que mais se mexe na tela */
  .ag-feed{position:static;max-height:none;order:-1}
  .ag-feed-rolagem{max-height:420px}
}
@media (max-width:700px){
  .ag{gap:var(--s-3)}
  .ag-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
  .ag-kpis.sem-gasto{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag-placar-tile{grid-column:span 2}
  .ag-placar{grid-auto-flow:column;justify-content:start;gap:16px}
  .ag-kpis.sem-gasto > :last-child{grid-column:span 2}
  .ag-kpi{padding:12px 14px}
  .ag-kpi .n{font-size:var(--fs-xl)}
  .ag-status{flex-wrap:wrap;padding:var(--s-4)}
  .ag-status .dir{width:100%;justify-content:space-between}
  .ag-grade{grid-template-columns:minmax(0,1fr)}
  .ag-grupo-tit .dica{flex-basis:100%;white-space:normal}
  .ag-alerta{flex-wrap:wrap}
  .ag-alerta .txt{flex-basis:calc(100% - 26px)}
  .ag-alerta .btn{margin-left:26px}
  .ag-def{grid-template-columns:1fr;gap:2px 0}
  .ag-def dd{margin-bottom:8px}
  .ag-job{grid-template-columns:auto minmax(0,1fr)}
  .ag-job > .btn{grid-column:2;justify-self:start}
  .ag-abas button{flex:none;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  .ag-cartao[data-estado="rodando"]::before,.ag-item.novo,.ag-boneco *,.ag-balao::before,.ag-pontos i{animation:none !important}
  button.ag-kpi:hover{transform:none}
}
.ag-gav-resumo{display:grid;gap:10px;padding:14px 16px;border-radius:var(--r);background:var(--surface);box-shadow:var(--e1)}