/* =================================================================
   PAINEL DE AGENTES — tudo escopado em .page-agentes.

   Veio do projeto separado `central-de-agentes-painel` (o antigo
   agentes.local). Lá o desenho era ESCURO e neon (fundo #05070d, teal,
   glassmorphism); a Intranet é CLARA (papel, sidebar navy, acento cobre).

   O que foi feito nesta migração:

     - a ESTRUTURA e o COMPORTAMENTO são os do painel original (cartões de
       KPI, feed que abre, retrato flutuante arrastável, indicador de estado);
     - as CORES e a TIPOGRAFIA vêm dos tokens da Intranet (--card-bg,
       --card-border, --text-primary, --accent, --font-title...). Consequência
       boa e proposital: o painel passa a seguir o TEMA DA BU ATIVA sozinho,
       porque esses tokens são reescritos por /businessunit/themecss;
     - a MOLDURA DO ROSTO continua escura, e isso é decisão, não sobra: o rosto
       é desenhado com partículas claras e só lê em fundo escuro. Ela usa o
       mesmo tom da sidebar (--sidebar-bg), então parece uma "tela" embutida na
       página, não um pedaço de outro sistema.

   ---------------------------------------------------------------------------
   TRÊS COISAS QUE NÃO DEVEM SER "ARRUMADAS" DEPOIS
   ---------------------------------------------------------------------------

    1. **Nenhum `backdrop-filter` e nenhuma sombra grande no cartão do rosto.**
       São os efeitos mais caros do CSS, e aquele cartão fica POR CIMA de uma
       página que repinta a cada quadro da animação. O original tinha desfoque e
       foi removido lá por medição.

    2. **Recolher o cartão é o botão de economizar CPU.** Medido no projeto de
       origem: o rosto custa ~33 pontos de CPU independente do tamanho (o caro é
       o JavaScript de cada quadro, não os pixels). Encolher o canvas 10×
       economizou só 2,9 pontos. Por isso `.recolhido` esconde o canvas com
       `display:none` — aí o JS para de desenhar de verdade.

    3. **A cor nunca informa sozinha.** Todo estado tem bolinha E texto. Quem
       não distingue as cores tem que ler a mesma informação.
   ================================================================= */

/* =================================================================
   O ÍCONE DO MENU LATERAL
   -----------------------------------------------------------------
   Fica AQUI, e não no style.css, por dois motivos:

     - o ícone é do módulo, e todo CSS de módulo é carregado em toda página
       (ver template/main.html), então a regra vale para a sidebar do mesmo jeito;
     - o style.css tem trabalho não commitado no servidor (o Portal por BU e as
       fontes). Acrescentar linha lá agora só aumentaria a chance de conflito na
       hora de sincronizar.

   Sem esta regra o item cairia no ícone-fallback do style.css — uma bolinha. É
   o que acontece hoje com o "Assistente IA", que nunca teve `.ni-ia`.

   O desenho é um rosto dentro de uma moldura: é o retrato do agente, que é a
   imagem que a tela usa. Mesmo formato dos outros (SVG em máscara, para o ícone
   herdar a cor do tema da BU).
   ================================================================= */
.ni-agentes {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.2'/%3E%3Ccircle cx='15' cy='10' r='1.2'/%3E%3Cpath d='M9 15c.9.8 2 1.2 3 1.2s2.1-.4 3-1.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.2'/%3E%3Ccircle cx='15' cy='10' r='1.2'/%3E%3Cpath d='M9 15c.9.8 2 1.2 3 1.2s2.1-.4 3-1.2'/%3E%3C/svg%3E");
}

.page-agentes {
    font-family: var(--font-body);
    color: var(--text-primary);
    padding-bottom: 60px;

    /* --- estados do agente (pronta / trabalhando / ociosa) ---
       Tons escolhidos para contrastar em FUNDO CLARO. Os do painel original
       (#2de0c8, #ffb454) foram feitos para fundo quase preto e somem no papel. */
    --ag-ready: #0f7d6e;
    --ag-working: #a8620a;
    --ag-idle: #5d6b8a;

    /* --- níveis de saúde (o veredito por agente) --- */
    --ag-ok: #0f7d6e;
    --ag-atencao: #a8620a;
    --ag-parado: #9c2b2b;
    --ag-sem-dados: #7a7a70;

    /* --- a tela escura do rosto --- */
    --ag-tela: #12172a;
    --ag-tela-borda: rgba(120, 200, 230, 0.18);
    --ag-tela-ink: #eaf6ff;
    --ag-tela-dim: #8fa6c4;
}

/* o dashboard usa a largura toda; o retrato sai do fluxo (position:fixed) */
.page-agentes.ag-stage {
    max-width: 1500px;
}

/* =================================================================
   CABEÇALHO DO DASHBOARD
   ================================================================= */
.page-agentes .ag-dash-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.page-agentes .ag-dash-eyebrow {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.page-agentes .ag-dash-head h2 {
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin-top: 5px;
}
.page-agentes .ag-dash-agora {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.page-agentes .ag-live-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.page-agentes .ag-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c0392b;
    animation: agBlink 1.8s infinite;
}
@keyframes agBlink {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.25; }
}
.page-agentes .ag-live-clock {
    color: var(--text-primary);
    font-weight: 600;
}
.page-agentes .ag-dash-status {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    white-space: nowrap;
}

/* =================================================================
   A MANCHETE (o estado geral, na visão geral)
   Nunca é só "tudo bem": quando está bem, conta o que está bem.
   ================================================================= */
.page-agentes .ag-manchete {
    font-size: 15px;
    line-height: 1.5;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--ag-sem-dados);
    background: var(--card-bg);
    margin-bottom: 22px;
    max-width: 90ch;
}
.page-agentes .ag-manchete.ag-nivel-ok { border-left-color: var(--ag-ok); }
.page-agentes .ag-manchete.ag-nivel-atencao { border-left-color: var(--ag-atencao); }
.page-agentes .ag-manchete.ag-nivel-parado { border-left-color: var(--ag-parado); }

/* =================================================================
   VISÃO GERAL — um cartão por agente
   ================================================================= */
.page-agentes .ag-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.page-agentes .ag-agente-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 10px;
    background: var(--column-bg);
    border: 1px solid var(--card-border);
    border-top: 3px solid var(--ag-sem-dados);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s, box-shadow 0.18s;
}
.page-agentes .ag-agente-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.page-agentes .ag-agente-card.ag-nivel-ok { border-top-color: var(--ag-ok); }
.page-agentes .ag-agente-card.ag-nivel-atencao { border-top-color: var(--ag-atencao); }
.page-agentes .ag-agente-card.ag-nivel-parado { border-top-color: var(--ag-parado); }

.page-agentes .ag-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.page-agentes .ag-card-head h3 {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
}
.page-agentes .ag-card-papel {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
}
/* o estado: bolinha + TEXTO (a cor nunca informa sozinha) */
.page-agentes .ag-card-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    white-space: nowrap;
}
.page-agentes .ag-sb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ag-idle);
    flex: none;
}
.page-agentes .ag-card-estado[data-state="ready"] .ag-sb-dot { background: var(--ag-ready); }
.page-agentes .ag-card-estado[data-state="working"] .ag-sb-dot { background: var(--ag-working); }
.page-agentes .ag-card-estado[data-state="idle"] .ag-sb-dot { background: var(--ag-idle); }

.page-agentes .ag-card-numero {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.page-agentes .ag-card-numero b {
    font-family: var(--font-title);
    font-size: 34px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.page-agentes .ag-card-numero span {
    font-size: 12px;
    color: var(--text-secondary);
}
.page-agentes .ag-card-situacao {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    min-height: 2.9em; /* o cartão não muda de altura quando a frase é curta */
}
.page-agentes .ag-card-abrir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--card-border);
}
.page-agentes .ag-selo {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
    background: var(--ag-sem-dados);
}
.page-agentes .ag-selo.ag-nivel-ok { background: var(--ag-ok); }
.page-agentes .ag-selo.ag-nivel-atencao { background: var(--ag-atencao); }
.page-agentes .ag-selo.ag-nivel-parado { background: var(--ag-parado); }
.page-agentes .ag-card-seta {
    font-size: 12px;
    color: var(--accent-dark);
    font-weight: 600;
}

/* =================================================================
   OS KPIs
   ================================================================= */
.page-agentes .ag-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
/* com a largura toda, os quatro quadros cabem numa linha só */
@media (min-width: 1100px) {
    .page-agentes.ag-stage-rosto .ag-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
.page-agentes .ag-kpi {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 10px;
    background: var(--column-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
}
.page-agentes .ag-kpi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--card-border);
}
/* O FOCO: acende só o quadro com AÇÃO PENDENTE. Nunca mais de um — se vários
   acendessem, o destaque deixaria de destacar. */
.page-agentes .ag-kpi-foco {
    border-color: var(--ag-working);
    box-shadow: 0 0 0 1px var(--ag-working), var(--shadow);
}
.page-agentes .ag-kpi-foco::before { background: var(--ag-working); }

.page-agentes .ag-kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.page-agentes .ag-kpi-ico {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-size: 14px;
}
.page-agentes .ag-kpi-tag {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 2px 7px;
    border: 1px solid var(--card-border);
    border-radius: 5px;
}
.page-agentes .ag-kpi-num {
    font-family: var(--font-title);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
/* "—" é menor que o número: ele não é um valor, é a ausência de um */
.page-agentes .ag-kpi-num[data-medido="nao"] {
    font-size: 26px;
    color: var(--inactive-text);
}
.page-agentes .ag-kpi-cap {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 7px;
}
.page-agentes .ag-kpi-cap em {
    font-style: normal;
    color: var(--inactive-text);
}
/* a tirinha de períodos do calendário (hoje/semana/mês/ano) */
.page-agentes .ag-kpi-periodos {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--card-border);
}
.page-agentes .ag-kpi-periodos div { display: flex; flex-direction: column; gap: 1px; }
.page-agentes .ag-kpi-periodos dt {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--inactive-text);
}
.page-agentes .ag-kpi-periodos dd {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* =================================================================
   FEED + O QUE ELA APRENDEU (duas colunas que empilham no estreito)
   ================================================================= */
.page-agentes .ag-dupla {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 1200px) {
    .page-agentes .ag-dupla { grid-template-columns: 1fr 1fr; }
}

.page-agentes .ag-feed {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: 10px;
    background: var(--column-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    min-width: 0;
}
.page-agentes .ag-feed-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.page-agentes .ag-feed-head h3 {
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 600;
}
.page-agentes .ag-feed-count {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 1px 8px;
    border-radius: 999px;
}
.page-agentes .ag-ap-recorte,
.page-agentes .ag-ap-resumo,
.page-agentes .ag-ap-comousa {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.45;
}
.page-agentes .ag-ap-resumo { margin-bottom: 4px; font-weight: 600; }
.page-agentes .ag-ap-comousa {
    margin-bottom: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    background: var(--card-bg);
    border: 1px dashed var(--card-border);
}

.page-agentes .ag-feed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 4px;
}
.page-agentes .ag-feed-empty {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: center;
    padding: 26px 10px;
}

/* ---- o card de ação (é <details> quando tem e-mail, <article> quando não) ---- */
.page-agentes .ag-action-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 13px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 2px solid var(--inactive-border);
}
.page-agentes details.ag-action-card { display: block; }
.page-agentes details.ag-action-card > summary {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
    list-style: none;
}
.page-agentes details.ag-action-card > summary::-webkit-details-marker { display: none; }
.page-agentes details.ag-action-card > summary::after {
    content: "▸";
    flex: none;
    color: var(--inactive-text);
    font-size: 11px;
    transition: transform 0.15s;
}
.page-agentes details.ag-action-card[open] > summary::after { transform: rotate(90deg); }

.page-agentes .ag-action-card[data-kind="decision"] { border-left-color: var(--ag-ok); }
.page-agentes .ag-action-card[data-kind="instruction"] { border-left-color: var(--accent); }
.page-agentes .ag-action-card[data-kind="info"] { border-left-color: var(--inactive-border); }

.page-agentes .ag-ac-ico {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: var(--column-bg);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-size: 14px;
}
.page-agentes .ag-ac-body { min-width: 0; flex: 1; }
.page-agentes .ag-ac-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}
.page-agentes .ag-ac-detail {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
    line-height: 1.4;
}
.page-agentes .ag-ac-time {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 10.5px;
    color: var(--inactive-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.page-agentes .ag-ac-time b { color: var(--text-secondary); font-weight: 600; }

/* ---- o e-mail, quando o card abre ---- */
.page-agentes .ag-ac-email {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--card-border);
}
.page-agentes .ag-ac-rot {
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--inactive-text);
    margin-bottom: 2px;
}
.page-agentes .ag-ac-assunto {
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 8px;
}
/* <pre> porque o e-mail vem com as quebras de linha que a IA escreveu */
.page-agentes .ag-ac-corpo {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--column-bg);
    border: 1px solid var(--card-border);
}
.page-agentes .ag-ac-aviso {
    font-size: 10.5px;
    color: var(--inactive-text);
    margin-top: 6px;
    font-style: italic;
}

/* ---- as lições (o quadro do RAG) ---- */
.page-agentes .ag-ap-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    color: #fff;
    background: var(--ag-sem-dados);
}
.page-agentes .ag-ap-aprovacao { background: var(--ag-ok); }
.page-agentes .ag-ap-reprovacao { background: var(--ag-parado); }
.page-agentes .ag-ap-dispensa { background: var(--ag-idle); }
/* a etiqueta da FONTE: separa o que uma pessoa escreveu do que é só exemplo */
.page-agentes .ag-ap-fonte {
    font-size: 10.5px;
    color: var(--inactive-text);
    margin-top: 4px;
}
.page-agentes .ag-ap-fonte-forte {
    color: var(--accent-dark);
    font-weight: 600;
}

/* =================================================================
   OS EXTRAS (discretos, no fim)
   ================================================================= */
.page-agentes .ag-extras {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--card-border);
    font-size: 12px;
    color: var(--text-secondary);
}
.page-agentes .ag-extras-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    line-height: 1.6;
}
.page-agentes .ag-extras-linha b { color: var(--text-primary); }
.page-agentes .ag-extras-sla { margin-top: 6px; }
.page-agentes .ag-sla-fila {
    color: var(--ag-working);
    font-weight: 600;
}
.page-agentes .ag-mono {
    font-size: 11px;
    color: var(--inactive-text);
}
.page-agentes .ag-extras details { margin-top: 10px; }
.page-agentes .ag-extras summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--accent-dark);
    font-weight: 600;
}
.page-agentes .ag-motivos,
.page-agentes .ag-lacunas {
    list-style: none;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 70ch;
}
.page-agentes .ag-lacunas li {
    font-size: 12px;
    padding-left: 14px;
    position: relative;
}
.page-agentes .ag-lacunas li::before {
    content: "·";
    position: absolute;
    left: 4px;
    color: var(--inactive-text);
}
.page-agentes .ag-mv-topo {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    margin-bottom: 3px;
}
.page-agentes .ag-mv-topo b { font-variant-numeric: tabular-nums; }
.page-agentes .ag-mv-barra {
    height: 6px;
    border-radius: 999px;
    background: var(--inactive-bg);
    overflow: hidden;
}
.page-agentes .ag-mv-barra > div {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.page-agentes .ag-pe {
    margin-top: 20px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--inactive-text);
    max-width: 80ch;
}
.page-agentes .ag-pe a { color: var(--accent-dark); }

/* =================================================================
   O RETRATO FLUTUANTE
   Cartão fixo no canto, arrastável e recolhível. O JS guarda a posição.
   ================================================================= */
/* COLISÃO COM O CHAT — RESOLVIDA EM 11/08/2026.
   O botão flutuante do chat (public/css/chat/chat.css, `.chat-widget`) nasce em
   right:22px / bottom:22px, que era exatamente onde este cartão ficava. Quem
   saiu de lugar foi o cartão: sobe para bottom:86px, acima do botão de 52px.
   O chat está em TODA página; este cartão só existe aqui — quem se move é o
   convidado, não o dono da casa.
   O z-index também é menor que o do chat (40 contra 60) de propósito: com o
   painel do chat aberto, ele passa por cima do rosto.
   Se o cartão for ARRASTADO, a posição guardada em localStorage manda e pode
   voltar a cobrir o botão — é escolha de quem arrastou, e o recolher do cartão
   (o mesmo localStorage) resolve. */
.page-agentes .ag-portrait-flutua {
    position: fixed;
    right: 22px;
    bottom: 86px;
    z-index: 40;
    width: 300px;
    max-height: calc(100vh - 108px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    /* OPACO de propósito: passa por cima do feed, e um cartão semitransparente
       deixaria o texto de baixo atravessar o rosto.
       SEM backdrop-filter e SEM sombra grande: são os efeitos mais caros do CSS e
       este cartão fica sobre uma página que repinta a cada quadro. */
    background: var(--ag-tela);
    border: 1px solid var(--ag-tela-borda);
    color: var(--ag-tela-ink);
}
/* o cabeçalho é a ALÇA de arrastar */
.page-agentes .ag-portrait-head {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: grab;
    /* sem isto, arrastar seleciona o texto do nome em vez de mover o cartão */
    user-select: none;
    -webkit-user-select: none;
}
.page-agentes .ag-portrait-head.pegando { cursor: grabbing; }
.page-agentes .ag-rosto-pegar {
    flex: none;
    color: var(--ag-tela-dim);
    font-size: 13px;
    line-height: 1;
}
.page-agentes .ag-who { flex: 1; min-width: 0; }
.page-agentes .ag-who h1 {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ag-tela-ink);
}
.page-agentes .ag-who p {
    font-size: 10.5px;
    color: var(--ag-tela-dim);
    margin-top: 2px;
}
.page-agentes .ag-rosto-recolher {
    flex: none;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 15px;
    line-height: 1;
    color: var(--ag-tela-dim);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ag-tela-borda);
    border-radius: 6px;
    cursor: pointer;
}
.page-agentes .ag-rosto-recolher:hover {
    color: var(--ag-tela-ink);
    border-color: var(--ag-ready);
}

/* ---- a moldura (a "tela" onde o rosto aparece) ---- */
.page-agentes .ag-portrait-frame {
    position: relative;
    flex: none;
    height: 260px;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--ag-tela-borda);
    /* o brilho interno acompanha o estado — é o único lugar com cor de ambiente */
    background:
        radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--ag-frame) 18%, transparent), transparent 62%),
        linear-gradient(180deg, #0d1424, #070b14);
    box-shadow: inset 0 0 50px -18px color-mix(in srgb, var(--ag-frame) 45%, transparent);
    transition: background 1s, box-shadow 1s;
    --ag-frame: var(--ag-ready);
}
.page-agentes.ag-stage[data-state="ready"] .ag-portrait-frame { --ag-frame: #2de0c8; }
.page-agentes.ag-stage[data-state="working"] .ag-portrait-frame { --ag-frame: #ffb454; }
.page-agentes.ag-stage[data-state="idle"] .ag-portrait-frame { --ag-frame: #7c8cff; }

.page-agentes .ag-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ag-frame);
    opacity: 0.8;
    transition: border-color 0.8s;
    z-index: 3;
}
.page-agentes .ag-corner.ag-tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 5px; }
.page-agentes .ag-corner.ag-tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 5px; }
.page-agentes .ag-corner.ag-bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-bottom-left-radius: 5px; }
.page-agentes .ag-corner.ag-br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 5px; }

/* leve textura de linhas de tela */
.page-agentes .ag-portrait-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0.3;
    background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.18) 2px 3px);
}
.page-agentes .ag-face-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: block;
}

/* ---- o rodapé: indicador de estado (NÃO é botão) + o porquê ---- */
.page-agentes .ag-portrait-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-agentes .ag-state-switch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.page-agentes .ag-state-btn {
    --sb: var(--ag-tela-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ag-tela-dim);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ag-tela-borda);
}
.page-agentes .ag-state-btn[data-state="ready"] { --sb: #2de0c8; }
.page-agentes .ag-state-btn[data-state="working"] { --sb: #ffb454; }
.page-agentes .ag-state-btn[data-state="idle"] { --sb: #7c8cff; }
.page-agentes .ag-state-btn .ag-sb-dot { background: var(--sb); opacity: 0.4; }
.page-agentes .ag-state-btn.is-active {
    color: var(--ag-tela-ink);
    background: color-mix(in srgb, var(--sb) 14%, transparent);
    border-color: color-mix(in srgb, var(--sb) 55%, transparent);
}
.page-agentes .ag-state-btn.is-active .ag-sb-dot {
    opacity: 1;
    animation: agPulse 2s infinite;
}
@keyframes agPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.55; }
}
.page-agentes .ag-state-why {
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--ag-tela-dim);
}

/* ---- RECOLHIDO: só a barrinha com o nome ----
   `display:none` no canvas é DE PROPÓSITO: o JS para de desenhar quando o canvas
   sai da tela, então recolher economiza CPU de verdade (~33 pontos, medido). */
.page-agentes .ag-portrait-flutua.recolhido { width: auto; }
.page-agentes .ag-portrait-flutua.recolhido .ag-portrait-frame,
.page-agentes .ag-portrait-flutua.recolhido .ag-state-why,
.page-agentes .ag-portrait-flutua.recolhido .ag-who p { display: none; }

/* folga no fim do feed, para o cartão não tapar a última ação.
   O cartão flutua POR CIMA do conteúdo — é o preço de ganhar a largura toda. */
.page-agentes.ag-stage-rosto .ag-feed-list { padding-bottom: 120px; }

/* =================================================================
   A TELA DE ERRO
   ================================================================= */
.page-agentes .ag-erro-panel {
    max-width: 760px;
    padding: 20px;
    border-radius: 10px;
    background: var(--column-bg);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--ag-parado);
    box-shadow: var(--shadow);
}
.page-agentes .ag-erro-panel code {
    font-size: 11.5px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

/* =================================================================
   RESPONSIVO E MOVIMENTO REDUZIDO
   ================================================================= */
@media (max-width: 760px) {
    .page-agentes .ag-kpi-grid { grid-template-columns: 1fr; }
    .page-agentes .ag-dash-agora { align-items: flex-start; }
    /* num celular o cartão do rosto tapa a tela toda: vira barrinha no rodapé */
    .page-agentes .ag-portrait-flutua {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
    }
    .page-agentes .ag-portrait-frame { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .page-agentes *,
    .page-agentes *::before,
    .page-agentes *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Os links do card do feed (24/09/2026): o PDF que a IA produziu e o card de
   onde ele saiu. Discretos — o feed é uma lista de fatos, não uma barra de
   botões. */
.page-agentes .ag-ac-links { display: flex; gap: 14px; margin-top: 4px; }
.page-agentes .ag-ac-links a { font-size: 11.5px; color: var(--accent); text-decoration: none; }
.page-agentes .ag-ac-links a:hover { text-decoration: underline; }