/* =========================================================================
   Mercado — Design System (mínimo, Fase 0)
   Tokens conforme docs/design/DESIGN_SYSTEM.md.
   Estética: SaaS operacional premium / cockpit. Sem valores arbitrários:
   componentes devem usar SEMPRE as variáveis abaixo.
   ========================================================================= */

:root {
    /* Cor — semântica, não decorativa. Paleta 2026-07-04: violeta (IA protagonista), tons levemente quentes.
       Decisão do dono: mais "quente/chamativa" para o público comerciante. Ver DECISION_LOG. */
    --color-bg: #f2f0f7;
    --color-surface: #ffffff;
    --color-surface-2: #efecf8;
    /* Papéis de superfície. Não substituem --color-surface-2 de uma vez: ele ainda atende
       inputs, badges e vazios em muitas telas. Estes papéis separam canvas, cabeçalho,
       tabela e hover sem escurecer o sistema inteiro por efeito colateral. */
    --color-surface-subtle: #faf9fc;
    /* O título dos painéis decisórios funciona como uma barra de comando: mesma família do
       chrome, mas um degrau abaixo do header global. Isso dá identidade inequívoca aos módulos
       sem escurecer a tabela operacional. */
    --color-surface-header: #3b2e67;
    --color-surface-header-text: #ffffff;
    --color-surface-header-icon: #cfc0f3;
    --color-surface-header-border: #2b214b;
    --color-panel-danger-badge: #c63232;
    --color-panel-warning-badge: #845e0b;
    --color-panel-neutral-badge: #eee9f7;
    --color-panel-badge-contrast: #ffffff;
    --color-panel-neutral-badge-text: #4b4263;
    --color-table-header: #fcfbfe;
    --color-row-hover: #f7f5fb;
    --color-text: #1b1830;
    --color-text-muted: #6b6480;
    --color-border: #ded8ea;
    --color-border-strong: #d8d1e5;
    --color-panel-border: #c9bfdc;
    --color-primary: #6d3fe3;
    --color-primary-hover: #5a30c9;
    --color-primary-contrast: #ffffff;
    --color-success: #1f9d57;
    /* O amarelo é sempre TEXTO ou borda, nunca fundo atrás de texto escuro — por isso escurecê-lo
       só melhora. O #b9810f anterior dava 3,38:1 sobre branco (medido no navegador), abaixo do
       mínimo de 4,5:1 do WCAG AA: justamente os avisos ("em alerta", "margem 1,1%", "perguntas a
       responder") eram o texto menos legível da tela. Este tom mantém a mesma matiz âmbar e dá
       5,85:1 sobre branco e 5,03:1 sobre --color-surface-2. */
    --color-warning: #845e0b;
    /* Tintas do amarelo. Existem como token porque estavam hardcoded em rgba() em três lugares
       (badge, chip e campo de custo pendente) — e ficariam com a cor VELHA depois desta mudança. */
    --color-warning-tint: rgba(132, 94, 11, 0.12);
    --color-warning-tint-soft: rgba(132, 94, 11, 0.06);
    --color-warning-tint-border: rgba(132, 94, 11, 0.34);
    --color-warning-row: rgba(132, 94, 11, 0.13);
    --color-warning-row-hover: rgba(132, 94, 11, 0.17);
    --color-danger: #d23f3f;
    /* Texto vermelho sobre uma tinta vermelha precisa ser mais escuro que a barra/contorno.
       #d23f3f passa sobre branco, mas perde contraste quando o fundo também é vermelho. */
    --color-danger-emphasis: #c63232;
    --color-danger-tint: rgba(210, 63, 63, 0.12);
    --color-danger-tint-soft: rgba(210, 63, 63, 0.08);
    --color-danger-tint-border: rgba(210, 63, 63, 0.28);
    --color-danger-row: rgba(210, 63, 63, 0.16);
    --color-danger-row-hover: rgba(210, 63, 63, 0.20);
    --color-info: #3f7cff;

    /* Sidebar (operacional, violeta-escura — o "chrome" do cockpit) */
    --color-sidebar-bg: #1a1530;
    --color-sidebar-text: #b3a9cf;
    --color-sidebar-text-active: #ffffff;
    --color-sidebar-active: #2e2352;

    /* IA — identidade do agente (gradiente + brilho). Uso: painel do agente, marca. */
    /* Mostarda do guia visual: é a única cor do sistema que NÃO é roxa, de propósito. Uma seta
       roxa apontando para um botão roxo disputa atenção com o que ela indica. */
    --color-alvo: #d8a01e;
    --color-alvo-claro: #e6b64a;
    --color-alvo-halo: rgba(216, 160, 30, 0.22);
    --shadow-alvo: 0 10px 30px rgba(216, 160, 30, 0.32);
    --color-ai-1: #8a59f4;
    --color-ai-2: #6d3fe3;
    --color-ai-surface: #eee9fb;
    --color-ai-surface-hover: #e4dcf8;
    --color-ai-border: #cfc0f3;
    --color-ai-message-surface: #ddd0fa;
    --color-ai-message-border: #b394ee;
    --color-ai-message-text: #2d2148;
    --gradient-ai: linear-gradient(150deg, var(--color-ai-1), var(--color-ai-2));
    --shadow-ai: 0 10px 30px rgba(109, 63, 227, 0.28);

    /* Vidro (glassmorphism) — EXCLUSIVO do painel flutuante da Maya (decisão 2026-07-17).
       Proibido em tabela/formulário/dashboard: ali o fundo é dado, não decoração.
       ATENÇÃO ao mexer: nossa página é quase branca (--color-bg). Vidro BRANCO sobre fundo
       branco resulta em branco — desfocar o nada não produz efeito nenhum. Sobre página clara
       o vidro só aparece se for levemente mais TINGIDO/escuro que o fundo; daí a base lavanda,
       a camada violeta e o realce interno, que sustentam o efeito sem depender do que está atrás.
       Pela mesma razão, --color-glass-bg NÃO é a alavanca da transparência: sobre fundo branco,
       0.38 e 0.20 ficam praticamente iguais (medido). Quem controla o "ver através" é --glass-blur:
       ~34px apaga tudo atrás, ~16px deixa formas suaves (escolhido), ~7px torna a tabela atrás
       legível e polui a conversa. Mexa no blur, não na opacidade. */
    --color-glass-tint: linear-gradient(160deg, rgba(138, 89, 244, 0.20), rgba(109, 63, 227, 0.08) 55%);
    --color-glass-bg: rgba(247, 244, 255, 0.28);
    --color-glass-border: rgba(255, 255, 255, 0.55);
    --color-glass-highlight: rgba(255, 255, 255, 0.75);
    --glass-blur: 16px;
    --shadow-glass: -18px 0 54px rgba(74, 54, 137, 0.22);

    /* Espaçamento — escala fixa: 4 8 12 16 24 32 48 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Border-radius — por função */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /* Tipografia */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;   /* 14px — mínimo em tabela */
    --text-lg: 1rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.375rem;
    --text-3xl: 1.75rem;

    /* Elevation — duas camadas discretas separam o objeto sem criar sombra de vitrine. */
    --shadow-sm: 0 1px 2px rgba(27, 24, 48, 0.05), 0 4px 12px rgba(46, 35, 82, 0.04);
    --shadow-md: 0 1px 2px rgba(27, 24, 48, 0.06), 0 10px 28px rgba(46, 35, 82, 0.09);
    /* Exceção de nível 2: somente os dois painéis decisórios do dashboard. A sombra de contato,
       a sombra difusa e o brilho interno dão corpo ao módulo sem aplicar 3D à tabela inteira. */
    --shadow-panel: 0 3px 7px rgba(27, 24, 48, 0.14), 0 26px 60px rgba(46, 35, 82, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    --shadow-lg: 0 8px 24px rgba(20, 27, 43, 0.12);

    --sidebar-width: 200px;
    --sidebar-collapsed: 60px;
    --rail-width: 360px;
    --topbar-height: 60px;
    --agent-launcher-width: 132px;
    --agent-launcher-height: 120px;
    --control-size-md: 44px;
}

/* Reset enxuto */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Texto só para leitor de tela: some da tela, continua no acessível. Usado onde a coluna tem
   sentido visual óbvio mas nenhum rótulo escrito (a coluna da foto), e na legenda das tabelas. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- AppShell (menu no topo · conteúdo · agente) ---------- */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.app-shell { position: relative; display: grid; grid-template-rows: var(--topbar-height) minmax(0, 1fr); height: 100vh; }
/* Uma coluna só; o painel do agente abre ao lado, empurrando esta coluna (ver .agent-rail). */
.app-body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; overflow: hidden; }

/* O chat aberto reserva a faixa dele em vez de cobrir a tela.
   Isto não é preferência estética: com o painel por cima, qualquer botão da metade direita
   ficava embaixo dele, e a MAYA só conseguia apontar erguendo o botão acima do chat — o que
   mostrava o botão flutuando sobre o rosto dela, e não onde ele mora. Reservando a faixa,
   nenhum alvo pode ficar escondido e a seta aponta para o lugar de verdade.
   Custo medido em 2026-07-31, tabela de Anúncios (12 colunas, largura mínima ~950px):
   telas de 1366px para cima não perdem nada; em 1280px surgem 71px de rolagem lateral,
   absorvidos pelo .table-scroll com a coluna de ação congelada. */
@media (min-width: 861px) {
    .app-body { transition: padding-right 180ms ease; }
    html[data-rail="open"] .app-body { padding-right: var(--rail-width); }
}
/* Até 860px o painel ocupa a tela toda (ver o fim deste arquivo): empurrar deixaria o
   conteúdo com largura zero. */
@media (prefers-reduced-motion: reduce) {
    .app-body { transition: none; }
}

/* ---------- Menu de módulos no topo ---------- */
.topnav {
    display: flex; align-items: center; gap: var(--space-2);
    height: var(--topbar-height);
    background: var(--color-sidebar-bg);
    color: var(--color-sidebar-text);
    padding: 0 var(--space-4);
}
.topnav__brand { display: flex; align-items: center; min-width: 0; flex: 0 0 auto; }
.topnav__brand-logo { display: block; width: auto; max-height: 34px; object-fit: contain; object-position: left center; }
.topnav__env {
    flex: 0 0 auto; margin-left: auto;
    font-size: var(--text-xs); color: var(--color-sidebar-text);
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-pill);
    padding: 2px var(--space-3);
}
.topnav__burger, .topnav__close { display: none; }

.topnav__modules { display: flex; align-items: center; gap: 0; min-width: 0; }
.topnav__root, .topnav__trigger {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-2);
    border: none; background: none; cursor: pointer; white-space: nowrap;
    color: var(--color-sidebar-text); font-family: inherit; font-size: var(--text-sm);
    border-radius: var(--radius-md); text-decoration: none;
}
/* No desktop os módulos são texto (cabem melhor); ícones só na gaveta mobile. */
.topnav__root > .lucide, .topnav__trigger > .lucide { display: none; }
.topnav__root:hover, .topnav__trigger:hover,
.topnav__module:focus-within .topnav__trigger { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); text-decoration: none; }
.topnav__root.active { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); font-weight: 600; }
.topnav__trigger::after {
    content: ""; width: 0; height: 0; margin-left: 2px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor; opacity: 0.7;
}
.topnav__module { position: relative; }
.topnav__menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
    min-width: 232px; padding: var(--space-2);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.topnav__module:hover .topnav__menu,
.topnav__module:focus-within .topnav__menu { display: block; }
.topnav__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    color: var(--color-text); font-size: var(--text-base); text-decoration: none; white-space: nowrap;
}
.topnav__item:hover { background: var(--color-surface-2); text-decoration: none; }
.topnav__item.active { background: rgba(47, 91, 234, 0.10); color: var(--color-primary); font-weight: 600; }
.topnav__item--disabled { opacity: 0.55; cursor: not-allowed; }
.topnav__soon {
    font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.4px;
    background: var(--color-surface-2); color: var(--color-text-muted);
    padding: 1px var(--space-1); border-radius: var(--radius-sm);
}

/* ---------- Sino de avisos do Mercado Livre (lado direito do topo) ---------- */
.bell { position: relative; flex: 0 0 auto; }
.bell__button {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: none; background: none; cursor: pointer;
    color: var(--color-sidebar-text); border-radius: var(--radius-md);
}
.bell__button:hover,
.bell--open .bell__button { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); }
.bell__button--warning { color: var(--color-warning); }
.bell__count {
    position: absolute; top: 0; right: 0;
    min-width: 16px; height: 16px; padding: 0 var(--space-1);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-danger); color: var(--color-primary-contrast);
    font-size: 0.625rem; font-weight: 600; line-height: 1;
    border-radius: var(--radius-pill);
}
.bell__backdrop { position: fixed; inset: 0; z-index: 199; }
/* Ancorado na JANELA, não no botão. O sino nem sempre fica na borda direita: dependendo da largura, o menu de
   módulos empurra ele para o meio, e um painel preso ao botão saía metade para fora da tela. Preso à janela, ele
   cai sempre no mesmo lugar — e no desktop, onde o sino já está na direita, o resultado é visualmente o mesmo. */
.bell__panel {
    position: fixed; top: calc(var(--topbar-height) + var(--space-1)); right: var(--space-4); z-index: 200;
    width: 340px; max-width: calc(100vw - var(--space-5));
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
/* Em tela bem estreita o painel ocupa a largura toda disponível, com margem nas duas bordas. */
@media (max-width: 420px) {
    .bell__panel { left: var(--space-3); right: var(--space-3); width: auto; max-width: none; }
}
.bell__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3); border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.bell__mark {
    display: inline-flex; align-items: center; gap: var(--space-1);
    border: none; background: none; cursor: pointer;
    color: var(--color-primary); font-family: inherit; font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
}
.bell__mark:hover:not(:disabled) { background: var(--color-surface-2); }
.bell__mark:disabled { opacity: 0.55; cursor: not-allowed; }
.bell__empty {
    margin: 0; padding: var(--space-4) var(--space-3);
    color: var(--color-text-muted); font-size: var(--text-sm);
}
.bell__list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.bell__item { border-bottom: 1px solid var(--color-border); }
.bell__item:last-child { border-bottom: none; }
.bell__item > a {
    display: grid; gap: 2px; padding: var(--space-3);
    color: var(--color-text); text-decoration: none; font-size: var(--text-sm);
}
.bell__item > a:hover { background: var(--color-surface-2); text-decoration: none; }
/* Não visto ganha uma barra à esquerda: diferença perceptível sem depender só de cor. */
.bell__item--unseen > a { box-shadow: inset 3px 0 0 var(--color-primary); font-weight: 600; }
.bell__item--warning > a { box-shadow: inset 3px 0 0 var(--color-warning); }
.bell__item-detail { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; }
.bell__item-time { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; }
.bell__item-count {
    margin-left: var(--space-2); padding: 0 var(--space-1);
    background: var(--color-surface-2); border-radius: var(--radius-sm);
}
.bell__foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-muted); font-size: var(--text-xs);
}

/* Itens de navegação REUSADOS pelo console /admin (não remover). */
.sidebar__section {
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.6px;
    color: #6b7689;
    padding: var(--space-4) var(--space-3) var(--space-1);
}
.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-sidebar-text);
    font-size: var(--text-base);
    text-decoration: none;
}
.nav-link:hover { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); text-decoration: none; }
.nav-link.active { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); font-weight: 600; }
.nav-link--disabled { opacity: 0.45; cursor: not-allowed; }
.nav-link__soon {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #2a3550;
    color: #8b96ab;
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
}
.nav-link .lucide { flex: 0 0 auto; }
.nav-backdrop { display: none; }

/* Conteúdo usa a largura TODA (sem cap): ao fechar o chat, texto/tabela acompanham o espaço. */
.content { padding: var(--space-4) var(--space-3); max-width: none; width: 100%; min-height: 0; overflow-y: auto; }

/* ---------- Painel lateral do agente de IA ----------
   Continua `position: fixed` (para não rolar junto com a tabela), mas o conteúdo reserva a
   faixa dele em .app-body, então ele não cobre nada. Estado vem de `data-rail` no <html>
   (maya-rail.js), que lembra a escolha do vendedor: fecha no "×" do topo, abre no pet.
   Não é modal de propósito: dá para ler a tabela com o chat aberto. */
.agent-rail {
    position: fixed;
    inset: var(--topbar-height) 0 0 auto;
    width: min(var(--rail-width), 100vw);
    z-index: 70;
    min-width: 0;
    overflow: hidden;
    background: var(--color-glass-tint), var(--color-glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border-left: 1px solid var(--color-glass-border);
    /* O realce interno na borda é o que "vende" o vidro sem depender do fundo. */
    box-shadow: var(--shadow-glass), inset 1px 0 0 var(--color-glass-highlight);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 180ms ease, visibility 0s linear 180ms;
}
html[data-rail="open"] .agent-rail {
    transform: translateX(0);
    visibility: visible;
    transition: transform 180ms ease, visibility 0s;
}
/* Sem suporte a desfoque (ou com transparência reduzida no SO): cai para sólido.
   O vidro é acabamento — a legibilidade do painel não pode depender dele. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .agent-rail { background: var(--color-glass-tint), var(--color-surface); }
}
@media (prefers-reduced-transparency: reduce) {
    .agent-rail {
        background: var(--color-glass-tint), var(--color-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .agent-rail, html[data-rail="open"] .agent-rail { transition: none; }
}
.agent-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Cabeçalho: avatar grande + identidade — o "rosto" da ferramenta. */
.agent-panel__header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    /* Sem camada sólida por baixo: é o que deixa o vidro do painel aparecer aqui. */
    background: linear-gradient(180deg, rgba(138, 89, 244, 0.14), rgba(255, 255, 255, 0) 78%);
}
.agent-panel__collapse {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-size-md);
    height: var(--control-size-md);
    padding: 0;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-ai-border);
    background: var(--color-ai-surface);
    color: var(--color-primary);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.agent-panel__collapse:hover {
    background: var(--color-ai-surface-hover);
    color: var(--color-primary-hover);
    transform: translateY(-1px);
}
.agent-panel__collapse:focus-visible {
    outline: var(--space-1) solid var(--color-primary);
    outline-offset: var(--space-1);
}
.agent-panel__avatar {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(109, 63, 227, 0.20));
}
.agent-panel__avatar--fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
    .agent-panel__avatar--motion { display: none; }
    .agent-panel__avatar--fallback { display: block; }
}

/* Cartão de ação ciente do contexto (aparece sob o cabeçalho, quando a tela oferece uma ação real). */
.agent-suggestion {
    margin: 0 var(--space-4) var(--space-2);
    padding: var(--space-3);
    border: 1px solid rgba(109, 63, 227, 0.28);
    border-radius: var(--radius-lg);
    /* Camada sólida por baixo do gradiente: este cartão tem texto, e sobre o vidro translúcido
       ele boiaria em cima da tabela. Vale a mesma regra dos balões — conteúdo fica opaco. */
    background: linear-gradient(180deg, rgba(138, 89, 244, 0.10), rgba(255, 255, 255, 0)), var(--color-surface);
}
.agent-suggestion__text { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text); }
.agent-suggestion__btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: var(--text-sm); font-weight: 600;
    border: none; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
    background: var(--gradient-ai); box-shadow: var(--shadow-ai);
    color: var(--color-primary-contrast); cursor: pointer;
}
.agent-suggestion__btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* Log de mensagens (rola). */
.agent-panel__log {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.chat-msg {
    max-width: 90%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    line-height: 1.4;
}
.chat-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg--ai {
    align-self: flex-start;
    background: var(--color-ai-message-surface);
    border-color: var(--color-ai-message-border);
    color: var(--color-ai-message-text);
    border-top-left-radius: var(--radius-sm);
}
.chat-msg--user {
    align-self: flex-end;
    background: var(--gradient-ai);
    color: var(--color-primary-contrast);
    border-color: transparent;
    border-top-right-radius: var(--radius-sm);
}
.chat-msg--typing {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: calc(var(--space-7) + var(--space-1));
    color: var(--color-primary);
}
.chat-typing__dot {
    width: var(--space-1);
    height: var(--space-1);
    border-radius: var(--radius-pill);
    background: currentColor;
    animation: chat-typing-pulse 1.2s ease-in-out infinite;
}
.chat-typing__dot:nth-child(2) { animation-delay: 160ms; }
.chat-typing__dot:nth-child(3) { animation-delay: 320ms; }
@keyframes chat-typing-pulse {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(calc(-1 * var(--space-1))); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-typing__dot { animation: none; opacity: 0.7; }
}
.chat-msg--error { align-self: stretch; max-width: 100%; background: var(--color-danger-tint); border-color: var(--color-danger-tint-border); color: var(--color-danger-emphasis); }
.chat-msg__guide-link {
    display: inline-flex; align-items: center; margin-top: var(--space-2);
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-primary); font-weight: 700;
}
.chat-msg__evidence { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.chat-msg__evidence summary { cursor: pointer; }
.chat-msg__evidence ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }

/* Guia visual persistente: a MAYA aponta, mas a pessoa decide se clica. */
.maya-alvo--target {
    position: relative; z-index: 75;
    outline: 3px solid var(--color-alvo);
    outline-offset: var(--space-1);
    box-shadow: 0 0 0 var(--space-3) var(--color-alvo-halo), var(--shadow-alvo);
}
/* Baixa e larga de propósito. A versão alta (156px) não cabia acima de botões perto do topo e
   cortava justamente a etiqueta, a única parte com texto. O corpo é translúcido porque cobre o
   conteúdo; a ponta e a etiqueta continuam opacas porque são o que comunica. Se a seta inteira
   ficar apagada, ela vira enfeite — foi o que reprovou o brilho colorido testado antes.
   Mudou a altura? Nada a acertar no script: ele mede a seta antes de decidir o lado. */
.maya-alvo__indicator {
    position: fixed; z-index: 76; pointer-events: none;
    display: flex; flex-direction: column; align-items: center;
    transform: translate(-50%, -100%); color: var(--color-alvo);
}
/* A sombra fica no corpo e na ponta, não no conjunto: `filter` no pai atinge todo mundo, e a
   etiqueta é texto — sombra em texto pequeno só suja a leitura. */
.maya-alvo__line, .maya-alvo__head {
    filter: drop-shadow(0 2px var(--space-1) rgba(38, 20, 82, 0.35));
}
.maya-alvo__line {
    width: calc(var(--space-4) + var(--space-1)); height: var(--space-5);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: linear-gradient(180deg, var(--color-alvo-claro), var(--color-alvo));
}
.maya-alvo__head {
    width: 0; height: 0;
    border-left: calc(var(--space-5) - var(--space-1)) solid transparent;
    border-right: calc(var(--space-5) - var(--space-1)) solid transparent;
    border-top: calc(var(--space-4) + var(--space-1)) solid var(--color-alvo);
}
.maya-alvo__label {
    margin-bottom: var(--space-1); padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill); background: var(--color-alvo); color: var(--color-text);
    font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
}
/* Cutucada em direção ao botão. Só o corpo e a ponta se mexem: texto que balança fica pior de
   ler, e parada a etiqueta ainda ancora o conjunto.
   O mesmo keyframe serve para os dois lados sem ganhar exceção: quando a seta vira para baixo,
   quem gira 180° é o pai, então este mesmo "+Y" passa a apontar visualmente para cima — ou seja,
   sempre na direção do botão. */
@media (prefers-reduced-motion: no-preference) {
    .maya-alvo__line, .maya-alvo__head { animation: maya-alvo-cutucada 1.4s ease-in-out infinite; }
}
@keyframes maya-alvo-cutucada {
    50% { transform: translateY(var(--space-1)); }
}
.maya-alvo__indicator--below { transform: translate(-50%, 0) rotate(180deg); }
.maya-alvo__indicator--below .maya-alvo__label { transform: rotate(180deg); }
.maya-alvo-status {
    position: fixed; left: 50%; bottom: var(--space-5); z-index: 77;
    max-width: min(520px, calc(100vw - var(--space-6))); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-warning); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg);
    transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
    .maya-alvo--target { animation: maya-alvo-pulse 1.5s ease-in-out infinite; }
}
@keyframes maya-alvo-pulse {
    50% { box-shadow: 0 0 0 calc(var(--space-4) + var(--space-1)) rgba(216, 160, 30, 0.05), var(--shadow-alvo); }
}
@media (prefers-reduced-motion: reduce) {
    .maya-alvo--target { animation: none; }
}

/* Composer. */
.agent-panel__composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--control-size-md);
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
}
.agent-panel__input {
    min-width: 0;
    font-family: inherit; font-size: var(--text-base); color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); line-height: 1.4;
}
.agent-panel__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(109, 63, 227, 0.15); }
.agent-panel__send {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-size-md); height: var(--control-size-md);
    border: none; border-radius: var(--radius-pill);
    background: var(--gradient-ai); box-shadow: var(--shadow-ai);
    color: var(--color-primary-contrast); font-size: var(--text-lg); cursor: pointer;
}
.agent-panel__send:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.agent-panel__send:not(:disabled):hover { background: var(--color-primary-hover); }
.agent-panel__send:focus-visible {
    outline: var(--space-1) solid var(--color-primary);
    outline-offset: var(--space-1);
}

/* Botão flutuante que abre o agente. Some enquanto o painel está aberto. */
.agent-reopen {
    display: block;
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    width: var(--agent-launcher-width);
    height: var(--agent-launcher-height);
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    z-index: 60;
}
html[data-rail="open"] .agent-reopen { display: none; }
.agent-reopen--dragging { cursor: grabbing; }
.agent-reopen:focus-visible {
    outline: var(--space-1) solid var(--color-primary);
    outline-offset: var(--space-1);
}
.agent-pet-video {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.agent-pet-video__motion,
.agent-pet-video__poster {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.agent-pet-video__poster { display: none; }
@media (prefers-reduced-motion: reduce) {
    .agent-pet-video__motion { display: none; }
    .agent-pet-video__poster { display: block; }
}

/* ---------- PageHeader ---------- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.page-header__title { font-size: var(--text-2xl); }
.page-header__desc { color: var(--color-text-muted); font-size: var(--text-base); margin-top: var(--space-1); }

/* ---------- ScreenIntro (caixa "Maya explica" — topo de cada tela) ----------
   Substitui o PageHeader. Tom de IA sutil (mesma identidade do painel da Maya),
   não gradiente decorativo — a empatia vem da avatar, o layout continua operacional. */
.screen-intro-block { margin-bottom: var(--space-5); }
.screen-intro {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);
    border: 1px solid rgba(109, 63, 227, 0.28);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(138, 89, 244, 0.10), rgba(255, 255, 255, 0) 82%), var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.screen-intro__avatar {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    border-radius: var(--radius-pill);
    object-fit: cover; object-position: top center;
    border: 2px solid var(--color-surface);
    box-shadow: var(--shadow-ai);
    background: var(--color-surface-2);
}
.screen-intro__body { flex: 1 1 auto; min-width: 0; }
.screen-intro__eyebrow {
    font-size: var(--text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--color-primary);
}
.screen-intro__title { font-size: var(--text-2xl); }
.screen-intro__lines {
    /* Texto corrido que reflui com a largura da tela (como um editor de texto). Cada dica é
       um <span> inline; um "·" discreto separa uma da outra sem travá-las em linha própria. */
    margin-top: var(--space-2);
    color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6;
}
.screen-intro__lines > span:not(:first-child)::before {
    content: "·"; margin: 0 var(--space-2);
    color: var(--color-primary); font-weight: 700;
}
.screen-intro__more { display: inline-block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.screen-intro__lead { color: var(--color-text-muted); font-size: var(--text-base); margin-top: var(--space-1); }
.screen-intro__lead a { font-weight: 600; white-space: nowrap; }
.screen-intro__highlight {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--color-text); margin-top: var(--space-2);
}
.screen-actions {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    justify-content: flex-end; margin-top: var(--space-3);
}
.screen-intro__close {
    position: absolute; top: var(--space-3); right: var(--space-3);
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text-muted);
    font-size: var(--text-lg); line-height: 1; cursor: pointer;
}
.screen-intro__close:hover { background: var(--color-surface-2); color: var(--color-text); }
.screen-intro__reopen {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: inherit; font-size: var(--text-sm); font-weight: 600;
    color: var(--color-primary);
    border: 1px solid rgba(109, 63, 227, 0.28); border-radius: var(--radius-pill);
    background: linear-gradient(180deg, rgba(138, 89, 244, 0.12), rgba(255, 255, 255, 0)), var(--color-surface);
    padding: var(--space-2) var(--space-4); cursor: pointer;
}
.screen-intro__reopen:hover { background: var(--color-surface-2); }
.screen-intro__reopen span { font-weight: 800; }

/* ---------- Central de ajuda (/ajuda) ---------- */
.help-hero {
    display: flex; align-items: center; gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.help-hero__avatar {
    flex: 0 0 auto; width: 72px; height: 72px;
    border-radius: var(--radius-pill); object-fit: cover; object-position: top center;
    box-shadow: var(--shadow-ai); background: var(--color-surface-2);
}
.help-group {
    text-transform: uppercase; font-size: var(--text-xs); font-weight: 700;
    letter-spacing: 0.6px; color: var(--color-text-muted);
    margin: var(--space-5) 0 var(--space-3);
}
.help-card { scroll-margin-top: var(--space-5); }
.help-card__head { display: flex; align-items: center; gap: var(--space-3); }
.help-card__avatar {
    flex: 0 0 auto; width: 44px; height: 44px;
    border-radius: var(--radius-pill); object-fit: cover; object-position: top center;
    background: var(--color-surface-2);
}
.help-card__go { flex: 0 0 auto; margin-left: auto; }
.help-start { border-color: rgba(109, 63, 227, 0.28); }
.help-card__about {
    margin: var(--space-3) 0 0;
    color: var(--color-text); font-size: var(--text-base); line-height: 1.55;
}
.help-card__subhead {
    text-transform: uppercase; font-size: var(--text-xs); font-weight: 700;
    letter-spacing: 0.5px; color: var(--color-primary);
    margin: var(--space-4) 0 var(--space-2);
}
.help-card__steps {
    margin: 0; padding-left: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-2);
    color: var(--color-text); font-size: var(--text-sm); line-height: 1.5;
}
.help-card__notes {
    margin: 0; padding-left: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-2);
    color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5;
}

/* ---------- Card ---------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    overflow-x: auto;
}
.card--raised {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}
.card + .card { margin-top: var(--space-4); }
.card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* Lista "sem moldura": card sem padding lateral — a tabela vira a folha larga da tela.
   Filtros, paginação e textos de topo mantêm um respiro interno; a tabela (dentro de
   .table-scroll) vai de borda a borda do card, usando as sombras de rolagem como moldura. */
.card--flush { padding-left: 0; padding-right: 0; }
.card--flush > *:not(.table-scroll):not(.dash-table) { padding-left: var(--space-4); padding-right: var(--space-4); }

/* ---------- Button ---------- */
.btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: inherit; font-size: var(--text-base); font-weight: 500;
    border-radius: var(--radius-md); padding: var(--space-2) var(--space-4);
    border: 1px solid transparent; cursor: pointer; line-height: 1.4;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn--secondary:hover:not(:disabled) { background: var(--color-surface-2); }
.btn--ghost { background: transparent; color: var(--color-text); }
.btn--ghost:hover:not(:disabled) { background: var(--color-surface-2); }
.btn--sm { padding: 3px var(--space-2); font-size: var(--text-xs); }
.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(0.95); }

/* ---------- Badge / StatusBadge ---------- */
.badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); font-weight: 600; line-height: 1;
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
    border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--neutral { background: var(--color-surface-2); color: var(--color-text-muted); }
.badge--success { background: rgba(31,157,87,0.12); color: var(--color-success); }
.badge--warning { background: var(--color-warning-tint); color: var(--color-warning); }
.badge--danger  { background: var(--color-danger-tint); color: var(--color-danger-emphasis); }
.badge--info    { background: rgba(47,125,225,0.12); color: var(--color-info); }

/* ---------- EmptyState ---------- */
.empty-state { text-align: center; padding: var(--space-7) var(--space-5); color: var(--color-text-muted); }
.empty-state__title { font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-2); }

/* ---------- Definition list (status) ---------- */
.kv { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-3) var(--space-4); align-items: center; }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; font-weight: 500; }

/* ---------- DataTable (mínimo) ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th, .data-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.data-table th { color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.4px; }
.data-table tbody tr:hover { background: var(--color-row-hover); }
/* Ações da linha empilhadas na vertical: coluna estreita (largura = maior botão), some da dobra. */
.row-actions { display: inline-flex; flex-direction: column; gap: var(--space-1); align-items: stretch; }
.row-actions .btn { justify-content: center; }

/* Rolagem horizontal com aviso visual: sombra nas bordas indica "tem mais para o lado"
   (some a sensação de linha cortada / bug quando a barra de rolagem fica fora da dobra). */
.table-scroll {
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--color-surface) 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left, var(--color-surface) 30%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 0 50%, rgba(20, 27, 43, 0.16), rgba(20, 27, 43, 0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(20, 27, 43, 0.16), rgba(20, 27, 43, 0)) right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}
/* Coluna de ação "congelada": grudada à direita, sempre visível ao rolar na horizontal. */
.data-table th.col-actions, .data-table td.col-actions {
    position: sticky; right: 0; z-index: 1;
    background: var(--color-surface);
    box-shadow: -12px 0 10px -10px rgba(20, 27, 43, 0.18);
}
.data-table tbody tr:hover td.col-actions { background: var(--color-row-hover); }

/* ---------- Dialog ---------- */
.dialog__overlay { position: fixed; inset: 0; background: rgba(20, 27, 43, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); }
.dialog { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-5); width: 100%; max-width: 460px; }

/* ---------- Inputs ---------- */
.input, .select {
    font-family: inherit; font-size: var(--text-base); color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); line-height: 1.4;
}
.input:focus, .select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(47, 91, 234, 0.15); }
.filter-bar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }

/* Abas por status (padrão MercadoTurbo: fila de trabalho com contagem ao vivo). */
.status-tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.status-tab {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); border: none; background: none; cursor: pointer;
    color: var(--color-text-muted); font-family: inherit; font-size: var(--text-base);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.status-tab:hover { color: var(--color-text); }
.status-tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.status-tab__count {
    font-size: var(--text-xs); background: var(--color-surface-2); color: var(--color-text-muted);
    border-radius: var(--radius-pill); padding: 0 var(--space-2); min-width: 20px; text-align: center;
}
.status-tab--active .status-tab__count { background: rgba(47, 91, 234, 0.12); color: var(--color-primary); }

/* Célula densa do anúncio: miniatura + título + SKU. */
.listing-cell { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.listing-cell__thumb {
    flex: 0 0 auto; width: 36px; height: 36px;
    border-radius: var(--radius-sm); object-fit: cover;
    border: 1px solid var(--color-border); background: var(--color-surface-2);
}
.listing-cell__text { display: flex; flex-direction: column; min-width: 0; }
.listing-cell__sku { font-size: var(--text-xs); color: var(--color-text-muted); }
/* Input compacto para edição inline na tabela. */
.input--sm { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); max-width: 108px; }
.filter-bar .input { min-width: 260px; }

/* ---------- Alternador de densidade (compacto = tabela / detalhado = cartões) ----------
   Responde ao RISK-UX-001 do benchmark: o cartão dá contexto, a tabela dá comparação.
   Em vez de escolher um, a tela oferece os dois sobre a MESMA consulta e seleção. */
.view-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.view-toggle__btn {
    border: none; background: var(--color-surface); cursor: pointer;
    font-family: inherit; font-size: var(--text-sm); color: var(--color-text-muted);
    padding: var(--space-2) var(--space-3); white-space: nowrap;
}
.view-toggle__btn + .view-toggle__btn { border-left: 1px solid var(--color-border); }
.view-toggle__btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.view-toggle__btn--active { background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 600; }
.view-toggle__btn--active:hover { background: var(--color-primary-hover); color: var(--color-primary-contrast); }

/* ---------- Modo detalhado: lista de cartões densos ---------- */
.listing-board { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.listing-board__bar {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs); color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1px solid var(--color-border); background: var(--color-surface-2);
}
.listing-row {
    display: grid;
    grid-template-columns: auto 64px minmax(0, 1fr) 232px 128px;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.listing-row:hover { background: var(--color-surface-2); }
/* Cartão em edição: o vendedor precisa enxergar de longe qual anúncio vai mudar no ML. */
.listing-row--editing, .listing-row--editing:hover {
    background: rgba(109, 63, 227, 0.06);
    box-shadow: inset 3px 0 0 var(--color-primary);
}
.listing-row--editing .input--sm { max-width: 96px; }
.listing-row__thumb {
    width: 64px; height: 64px; object-fit: cover;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface);
}
.listing-row__thumb--empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted); font-size: var(--text-xs); text-align: center;
}
.listing-row__main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.listing-row__title {
    font-size: var(--text-base); font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.listing-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.listing-line__meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.listing-line__meta strong { color: var(--color-text); font-weight: 600; }
.listing-line__dot { color: var(--color-border); }

/* Etiquetas de completude: verde = ok, vermelho = falta, cinza = não sabemos ainda. */
.chip {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 1px var(--space-2); border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); background: var(--color-surface);
    font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap;
}
.chip--ok { border-color: rgba(31, 157, 87, 0.32); background: rgba(31, 157, 87, 0.08); color: var(--color-success); }
.chip--warn { border-color: var(--color-warning-tint-border); background: var(--color-warning-tint-soft); color: var(--color-warning); }
.chip--missing { border-color: rgba(210, 63, 63, 0.32); background: rgba(210, 63, 63, 0.08); color: var(--color-danger); }
.chip--unknown { border-style: dashed; }
.chip--channel { border-color: var(--color-ai-border); background: var(--color-ai-surface); color: var(--color-primary); font-weight: 600; }
.chip--link { cursor: pointer; }
.chip--link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Bloco financeiro: preço em destaque, componentes do custo embaixo. */
.listing-money { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.listing-money .chip { align-self: flex-start; }
.money-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--color-text-muted);
    background: var(--color-surface-2); border-radius: var(--radius-sm);
    padding: 2px var(--space-2);
}
.money-line span:last-child { color: var(--color-text); font-variant-numeric: tabular-nums; }
.money-line--main {
    font-size: var(--text-base); font-weight: 600; color: var(--color-text);
    background: rgba(109, 63, 227, 0.09); padding: var(--space-1) var(--space-2);
}
.money-line--main span:last-child { font-weight: 600; }
/* Linha clicável (custo): o bloco lê a conta de cima para baixo e o campo editável se anuncia. */
.money-line--action { cursor: pointer; border: 1px dashed var(--color-border); }
.money-line--action:hover, .money-line--action:focus-visible {
    border-color: var(--color-primary); color: var(--color-primary); outline: none;
}
.money-line--action:hover span:last-child { color: var(--color-primary); }
/* Resultado da conta (lucro): separado das parcelas por uma linha. */
.money-line--result {
    margin-top: var(--space-1); border-top: 1px solid var(--color-border);
    border-radius: 0; background: none; padding-top: var(--space-2);
    font-weight: 600; color: var(--color-text);
}
.money-note { margin: 2px 0 0; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }
.money-note--warn { color: var(--color-warning); }

.listing-row__actions { display: flex; flex-direction: column; gap: var(--space-1); }
.listing-row__actions .btn { justify-content: center; }

/* Abaixo de ~1100px o bloco financeiro e as ações descem para baixo do conteúdo. */
@media (max-width: 1100px) {
    .listing-row { grid-template-columns: auto 64px minmax(0, 1fr); }
    .listing-money, .listing-row__actions { grid-column: 3; }
    .listing-row__actions { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- KPI (Dashboard) ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-4); }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.kpi__value { font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; }
.kpi__label { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* ---------- Dashboard: faixa de números + dois painéis de triagem ----------
   O dashboard deixou de ser relatório e virou triagem. Os números perderam o tamanho de cartaz
   (contar anúncios não faz ninguém decidir nada) e viraram uma faixa de uma linha; o palco é dos
   dois painéis de anúncios problemáticos. */
.dash-metrics {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
}
.dash-metric {
    display: inline-flex; align-items: baseline; gap: var(--space-2);
    color: var(--color-text-muted); font-size: var(--text-xs); text-decoration: none;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: var(--space-1) 0;
}
.dash-metric b { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.dash-metric:hover { text-decoration: none; color: var(--color-primary); }
.dash-metric:hover b { color: var(--color-primary); }
/* Perguntas e mensagens têm prazo: são a única parte das antigas "Prioridades de hoje" que
   precisava sobreviver à faxina, então acendem sozinhas quando há fila. */
.dash-metric--alert {
    padding: var(--space-1) var(--space-2);
    background: var(--color-warning-tint-soft);
    border-color: var(--color-warning-tint-border);
    color: var(--color-warning);
}
.dash-metric--alert b { color: var(--color-warning); }
/* Ressalva da janela de 30 dias. Mesma ideia do .dash-panel__warn: o indicador confessa o que
   deixa de fora, em vez de deixar o número parecer a história inteira. */
.dash-metrics__caveat { font-size: var(--text-xs); color: var(--color-warning); }
.dash-metrics__sync { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-xs); }

/* Lado a lado só quando o chat está FECHADO. Com o chat aberto o conteúdo perde --rail-width
   (360px): dois painéis nessa sobra deixariam o título do anúncio com três letras. Estado do
   chat = data-rail no <html>, então a troca é CSS puro, sem estado no componente. */
.dash-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 1100px) {
    .dash-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    html[data-rail="open"] .dash-panels { grid-template-columns: minmax(0, 1fr); }
}

.dash-panel {
    margin: 0; padding-top: 0; padding-bottom: 0;
    display: flex; flex-direction: column; container-type: inline-size;
    overflow: hidden;
}
.dash-panel + .dash-panel { margin-top: 0; }
.dash-panel.card--raised { border-color: var(--color-panel-border); box-shadow: var(--shadow-panel); }
.dash-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding-top: var(--space-3); padding-bottom: var(--space-3);
    background: var(--color-surface-header);
    border-bottom: 1px solid var(--color-surface-header-border);
}
.dash-panel__heading { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.dash-panel__heading .lucide { flex: 0 0 auto; color: var(--color-surface-header-icon); }
.dash-panel__title { font-size: var(--text-lg); color: var(--color-surface-header-text); }
.dash-panel__head .badge--danger { background: var(--color-panel-danger-badge); color: var(--color-panel-badge-contrast); }
.dash-panel__head .badge--warning { background: var(--color-panel-warning-badge); color: var(--color-panel-badge-contrast); }
.dash-panel__head .badge--neutral { background: var(--color-panel-neutral-badge); color: var(--color-panel-neutral-badge-text); }
.dash-panel__count {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1);
    font-size: var(--text-xs); color: var(--color-text-muted);
}

/* Os painéis são <table> DE VERDADE, não um grid de <div> parecendo tabela. O grid de div lia,
   no leitor de tela, como uma fila de números soltos — "Mochila R$199,89 R$250,00 R$29,98
   R$25,55 -R$105,64" — sem dizer qual número é preço e qual é taxa. Com <th scope="col">, cada
   valor é anunciado junto com o nome da coluna. Herda .data-table de propósito: guardrail 2
   (não duplicar componente que já existe) — inclusive as classes row--danger / row--warn. */
/* Fonte: --text-sm (13px), a MESMA das outras tabelas do sistema (.data-table). Não é 14px por
   medida, não por gosto: com sete colunas num painel de 620px (dois painéis lado a lado em tela
   de 1280px), a 14px sobram ~132px para o título do anúncio — 19 caracteres. A 13px sobram
   ~164px. Como as parcelas da conta não podem sumir no desktop (a ordem das colunas é a própria
   conta), o que cede é a fonte. Ainda assim sobe de 12px, que era menor que a de qualquer outra
   tabela do sistema. */
.dash-table { table-layout: fixed; font-size: var(--text-sm); border-top: 0; }
/* Aperto horizontal maior que o da .data-table: são até sete colunas em meia tela. */
.dash-table th, .dash-table td { padding: var(--space-2); }
.dash-table th:first-child, .dash-table td:first-child { padding-left: var(--space-4); }
.dash-table th:last-child, .dash-table td:last-child { padding-right: var(--space-4); }
.dash-table thead th {
    background: var(--color-table-header); white-space: nowrap;
    border-bottom-color: var(--color-border-strong);
}
/* Larguras fixas (table-layout: fixed): quem cede espaço é o título, nunca o número. Fixar o
   número evitava quebrar "R$ 1.100.000,00" em duas linhas — e o valor é justamente o que a
   linha existe para mostrar. */
.dash-col-thumb { width: 44px; }
.dash-col-preco { width: 84px; }
.dash-col-parcela { width: 76px; }
.dash-col-result { width: 100px; }
.dash-col-score { width: 76px; }

/* Números à direita. Precisa de th./td. na frente para vencer o "text-align: left" da .data-table. */
.dash-table th.dash-num, .dash-table td.dash-num {
    text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-muted);
}
/* O preço é a âncora da linha: é dele que os três descontos saem. Fica em cor cheia (as outras
   parcelas são apoio) e é a única parcela que sobrevive quando o painel estreita. */
.dash-table td.dash-num--preco { color: var(--color-text); font-weight: 600; }

/* O título do anúncio é <th scope="row"> por semântica — é ele que amarra cada número ao anúncio
   no leitor de tela. Mas não pode herdar o VISUAL de cabeçalho de coluna da .data-table
   (maiúsculas, cinza, 12px): ali é o nome do produto, não um rótulo. */
.dash-table th.dash-cell-title {
    text-transform: none; letter-spacing: normal;
    font-size: var(--text-sm); color: var(--color-text); font-weight: 600;
}

/* A linha inteira continua clicável no mouse (o link de verdade mora no título, para teclado e
   leitor de tela). O cursor é a única pista visual disso. */
.dash-row--clickable { cursor: pointer; }
.dash-cell-title a { color: var(--color-text); }
.dash-row:hover .dash-cell-title a { color: var(--color-primary); }

.dash-row__thumb {
    display: block; width: 32px; height: 32px; object-fit: cover;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.dash-row__thumb--empty { background: var(--color-surface-2); }
.dash-row__stack { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dash-row__title {
    display: block; font-weight: 600; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.dash-row__reasons {
    display: block; font-size: var(--text-xs); color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-row__result, .dash-row__score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.dash-row__result b, .dash-row__score b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-row__result small, .dash-row__score small { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
/* A gravidade pertence ao anúncio inteiro, não só ao último número. A tinta é visível em leitura
   rápida, mas ainda translúcida: elimina as caixas que comprimiam "prejuízo" e "provisória" e
   deixa a barra lateral e o valor serem os sinais mais fortes. */
.dash-table tbody tr.row--danger > th,
.dash-table tbody tr.row--danger > td { background: var(--color-danger-row); }
.dash-table tbody tr.row--warn > th,
.dash-table tbody tr.row--warn > td { background: var(--color-warning-row); }
.dash-table tbody tr.row--danger:hover > th,
.dash-table tbody tr.row--danger:hover > td { background: var(--color-danger-row-hover); }
.dash-table tbody tr.row--warn:hover > th,
.dash-table tbody tr.row--warn:hover > td { background: var(--color-warning-row-hover); }
.dash-row.row--danger .dash-row__result b, .dash-row.row--danger .dash-row__score b { color: var(--color-danger-emphasis); }
.dash-row.row--warn .dash-row__result b, .dash-row.row--warn .dash-row__score b { color: var(--color-warning); }

/* Painel estreito (celular): as parcelas da conta saem e ficam o anúncio, o preço e o resultado.
   Melhor esconder a parcela do que picar o título do anúncio em três letras. No desktop as
   parcelas FICAM, inclusive com os dois painéis lado a lado — a ordem das colunas é a própria
   conta (preço − custo − taxa − frete = resultado), então esconder as parcelas por padrão
   desmontaria a ideia do painel. Foi isso que travou a fonte em --text-sm: ver o comentário
   de .dash-table. */
@container (max-width: 560px) {
    .dash-table--money .dash-col-parcela { display: none; }
}

/* ---------- Lucratividade: barra de ordem/filtro, custo editável, sinal na linha ---------- */
.lucro-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3);
}
.lucro-bar__ordem { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.lucro-bar__conferido { flex: 1 1 320px; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.45; }
.lucro-bar__conferido--velha { color: var(--color-warning); font-weight: 600; }
.lucro-bar__filtros { display: flex; gap: var(--space-2); }

/* Campo de custo SEMPRE aberto. A versão anterior era um botão com borda tracejada em
   --color-border: sobre fundo branco essa borda é quase invisível, então a única pista de que dava
   para editar era passar o mouse por cima — ou seja, adivinhar. Agora o campo se mostra como campo.
   Fundo levemente tingido em vez de caixa cheia: vinte deles numa tabela não podem virar formulário. */
.lucro-custo-edit { display: flex; align-items: center; gap: var(--space-1); }
.lucro-custo-input {
    max-width: 96px; text-align: right; font-variant-numeric: tabular-nums;
    background: var(--color-surface-2); border-color: transparent;
}
.lucro-custo-input:hover { border-color: var(--color-border); }
.lucro-custo-input:focus, .lucro-custo-input:focus-visible {
    background: var(--color-surface); border-color: var(--color-primary);
}
/* Sem valor cadastrado o campo chama para a ação, porque é ele que trava a conta do anúncio. */
.lucro-custo-input:placeholder-shown { border-color: var(--color-warning); background: var(--color-warning-tint-soft); }

/* Preço tem o mesmo campo, mas o que ele faz é diferente: simula, não salva. */
.lucro-preco-input {
    max-width: 100px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
    background: var(--color-surface-2); border-color: transparent;
}
.lucro-preco-input:hover { border-color: var(--color-border); }
.lucro-preco-input:focus, .lucro-preco-input:focus-visible { background: var(--color-surface); border-color: var(--color-primary); }

/* Linha da projeção: presa ao anúncio de cima, e visivelmente "ainda não aplicada". */
.data-table tbody tr.lucro-sim td {
    background: var(--color-ai-surface); border-top: none;
    box-shadow: inset 3px 0 0 var(--color-primary);
}
.lucro-sim__grid {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}
.lucro-sim__de { font-weight: 600; }

/* Mesmo código de cor do painel do dashboard: a barra repete o que a cor diz. */
.data-table tbody tr.row--danger td:first-child { box-shadow: inset var(--space-1) 0 0 var(--color-danger); }
.data-table tbody tr.row--warn td:first-child { box-shadow: inset var(--space-1) 0 0 var(--color-warning); }

.dash-empty {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding-top: var(--space-5); padding-bottom: var(--space-5);
    color: var(--color-text-muted); font-size: var(--text-sm);
}
.dash-empty strong { color: var(--color-text); font-size: var(--text-base); }

.dash-panel__foot {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2);
    margin-top: auto; padding-top: var(--space-3); padding-bottom: var(--space-3);
    background: var(--color-surface-subtle); border-top: 1px solid var(--color-border);
    font-size: var(--text-xs); color: var(--color-text-muted);
}
.dash-panel__warn { flex: 1 1 260px; line-height: 1.45; }
.dash-panel__all { white-space: nowrap; font-weight: 600; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: var(--space-3); align-items: center; justify-content: flex-end; margin-top: var(--space-4); }
.pagination__info { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Tendências de mercado ---------- */
.trend-list { display: flex; flex-direction: column; gap: var(--space-1); }
.trend-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.trend-list__item:last-child { border-bottom: none; }
.trend-list__pos { flex: 0 0 auto; min-width: 22px; text-align: right; color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.trend-list__kw { flex: 1 1 auto; font-weight: 500; }
.ranking-box { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.form-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.veh-results { margin-top: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); max-height: 260px; overflow-y: auto; }
.veh-results__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.veh-results__row:last-child { border-bottom: none; }
.veh-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.veh-chip { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 4px var(--space-3); font-size: var(--text-sm); }
.veh-chip__x { border: none; background: none; cursor: pointer; color: var(--color-text-muted); font-size: var(--text-sm); padding: 0; line-height: 1; }
.veh-chip__x:hover { color: var(--color-danger); }

/* ---------- Blazor error UI ---------- */
#blazor-error-ui {
    background: #fff3cd; color: #664d03; bottom: 0; box-shadow: var(--shadow-lg);
    display: none; left: 0; padding: var(--space-3) var(--space-5); position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--space-3); top: var(--space-2); }
.blazor-error-boundary { background: var(--color-danger); padding: var(--space-4); color: #fff; }
.blazor-error-boundary::after { content: "Ocorreu um erro."; }
.validation-message { color: var(--color-danger); }

/* ---------- Responsivo (mínimo) ---------- */
/* O agente já é flutuante em qualquer largura — aqui sobra só a gaveta do menu. */
@media (max-width: 1180px) {
    /* Menu de módulos vira gaveta (hambúrguer). */
    .topnav__burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border-radius: var(--radius-md);
        color: var(--color-sidebar-text); cursor: pointer;
    }
    .topnav__burger:hover { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); }
    .topnav__env { display: none; }
    .topnav__modules {
        position: fixed; inset: 0 auto 0 0;
        width: min(320px, calc(100vw - var(--space-7))); height: 100vh; z-index: 90;
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--color-sidebar-bg); padding: var(--space-3) var(--space-2);
        overflow-y: auto; transform: translateX(calc(-100% - var(--space-2)));
        transition: transform 160ms ease; box-shadow: var(--shadow-lg);
    }
    .nav-toggle:checked ~ .app-shell .topnav__modules { transform: translateX(0); }
    .nav-toggle:checked ~ .app-shell .nav-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(20, 27, 43, 0.45); z-index: 80;
    }
    .topnav__close {
        display: inline-flex; align-self: flex-end;
        color: var(--color-sidebar-text-active); border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: var(--radius-md); padding: var(--space-1) var(--space-2);
        font-size: var(--text-sm); cursor: pointer; margin-bottom: var(--space-2);
    }
    /* Na gaveta, cada módulo vira acordeão simples: submenu já aberto abaixo do gatilho. */
    .topnav__module { position: static; }
    .topnav__root, .topnav__trigger { width: 100%; justify-content: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-base); }
    .topnav__root > .lucide, .topnav__trigger > .lucide { display: inline-flex; }
    .topnav__trigger::after { margin-left: auto; }
    .topnav__menu {
        display: block; position: static; min-width: 0;
        border: none; background: transparent; box-shadow: none;
        padding: 0 0 var(--space-2) var(--space-5);
    }
    .topnav__item { color: var(--color-sidebar-text); }
    .topnav__item:hover,
    .topnav__item.active { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); }
    .topnav__soon { background: #2a3550; color: #8b96ab; }
}
@media (max-width: 860px) {
    .content { padding: var(--space-4); }
    .page-header { flex-direction: column; align-items: stretch; }
    .screen-intro { flex-direction: column; align-items: flex-start; }
    .screen-actions { justify-content: flex-start; }
    .help-card__head { flex-wrap: wrap; }
    .help-card__go { margin-left: 0; }
    .dash-panel__head { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .dash-panel__count { justify-content: flex-start; }
    .dash-metrics__sync { margin-left: 0; flex-basis: 100%; }
    .kv { grid-template-columns: 1fr; gap: var(--space-1) 0; }
    .agent-reopen { right: var(--space-4); bottom: var(--space-4); }
    /* No celular o painel toma a tela toda (abaixo do topo). */
    .agent-rail { inset: var(--topbar-height) 0 0 0; width: 100vw; }
}

/* ========================================================================
   Console operacional de IA (/admin) — chrome próprio, denso, SEM avatar
   Maya nem menu do vendedor. Reusa tokens e componentes (.card, .btn,
   .data-table, .badge, .nav-link, .sidebar__section). Só o shell é novo.
   ======================================================================== */
.admin-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100vh; }
.admin-sidebar {
    background: var(--color-sidebar-bg); color: var(--color-sidebar-text);
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--space-4) var(--space-2); height: 100vh; overflow-y: auto;
}
.admin-sidebar .nav { display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar__brand {
    display: flex; align-items: center; gap: var(--space-2);
    color: #fff; font-weight: 700; font-size: var(--text-lg);
    padding: var(--space-1) var(--space-3) var(--space-4);
}
.admin-sidebar__mark {
    flex: 0 0 auto; width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); background: var(--gradient-ai); color: #fff;
}
.admin-sidebar__back {
    margin-top: auto; display: block;
    color: var(--color-sidebar-text); font-size: var(--text-sm); font-weight: 600;
    padding: var(--space-4) var(--space-3) var(--space-1);
}
.admin-sidebar__back:hover { color: var(--color-sidebar-text-active); text-decoration: none; }
.admin-main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }
.admin-topbar {
    flex: 0 0 auto; height: var(--topbar-height);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: 0 var(--space-5);
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.admin-topbar__title { font-weight: 600; }
.admin-content { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5); }

/* Grade de módulos do hub */
.admin-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.admin-module {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-text);
    text-decoration: none;
}
a.admin-module:hover { background: var(--color-surface-2); text-decoration: none; }
.admin-module--stub { opacity: 0.72; }
.admin-module__head { display: flex; align-items: center; gap: var(--space-2); }
.admin-module__icon {
    flex: 0 0 auto; width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); background: rgba(109, 63, 227, 0.12); color: var(--color-primary);
}
.admin-module__title { font-weight: 600; }
.admin-module__desc { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Detalhe de execução: blocos monoespaçados roláveis (entrada/saída da IA) */
.code-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); margin: var(--space-3) 0 var(--space-1); }
.code-block {
    margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-xs); line-height: 1.5;
    background: var(--color-surface-2); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-3);
    max-height: 340px; overflow: auto;
}

@media (max-width: 860px) {
    .admin-shell { grid-template-columns: 1fr; height: auto; }
    .admin-sidebar { height: auto; flex-direction: row; flex-wrap: wrap; overflow-x: auto; }
    .admin-sidebar__back { margin-top: 0; }
    .admin-main { height: auto; overflow: visible; }
    .admin-content { overflow: visible; padding: var(--space-4); }
}

/* Fluxograma dos agentes (/admin/fluxos) — passos verticais com trilho conector */
.badge--ai { background: rgba(109, 63, 227, 0.14); color: var(--color-primary); }
.flow { display: grid; }
.flow__step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-3); }
.flow__rail { display: flex; flex-direction: column; align-items: center; }
.flow__dot {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
    background: rgba(109, 63, 227, 0.12); color: var(--color-primary);
}
.flow__line { flex: 1 1 auto; width: 2px; background: var(--color-border); min-height: var(--space-3); }
.flow__step:last-child .flow__line { display: none; }
.flow__card {
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: var(--space-3); background: var(--color-surface); margin-bottom: var(--space-3);
}
.flow__title { font-weight: 600; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.flow__desc { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* Texto formatado da IA (markdown seguro) — hierarquia leve, espaçamento enxuto */
.ai-md > :first-child { margin-top: 0; }
.ai-md > :last-child { margin-bottom: 0; }
.ai-md p { margin: 0 0 var(--space-2); }
.ai-md ul, .ai-md ol { margin: var(--space-1) 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: 2px; }
.ai-md li { margin: 0; }
.ai-md strong { font-weight: 700; }
.ai-md h1, .ai-md h2, .ai-md h3, .ai-md h4 { font-size: var(--text-base); font-weight: 700; margin: var(--space-2) 0 var(--space-1); }
.ai-md code { background: var(--color-surface-2); padding: 0 4px; border-radius: var(--radius-sm); font-size: 0.9em; }

/* ---------- Central de qualidade (QUA-02) ----------
   Cartão por PENDÊNCIA, não por anúncio: o número grande é quantos anúncios estão naquele problema,
   porque é ele que diz ao vendedor se o trabalho cabe no dia de hoje. */
.qual-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }
/* Cartão aberto ocupa a largura toda: a lista de anúncios dentro dele não cabe numa coluna. */
.qual-card--open { grid-column: 1 / -1; }
.qual-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.qual-card__count { font-size: var(--text-2xl); font-weight: 700; line-height: 1; color: var(--color-text); }
.qual-card__why { margin-top: var(--space-2); line-height: 1.45; }
.qual-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
/* O aviso de "ainda não conserta aqui" é discreto mas está sempre à vista — esconder seria mentir. */
.qual-card__soon { font-size: var(--text-xs); color: var(--color-text-muted); }
.qual-card__list { margin-top: var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }

.qual-row { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.qual-row__head { display: flex; align-items: center; gap: var(--space-3); }
.qual-row__thumb { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); flex: none; }
.qual-row__thumb--empty { background: var(--color-surface-2); }
.qual-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.qual-row__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qual-row__ficha { margin-top: var(--space-3); border-top: 1px dashed var(--color-border); padding-top: var(--space-3); }

/* ---------- Fotos do anúncio (QUA-04) ----------
   Mostrar as fotos que existem não é enfeite: o Mercado Livre dá id novo a cada upload, então o mesmo
   arquivo enviado duas vezes vira duas fotos iguais sem aviso. Ver a lista é como o vendedor percebe. */
.foto-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.foto-item { position: relative; margin: 0; width: 84px; height: 84px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); }
.foto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-item--capa { border-color: var(--color-primary); }
.foto-item__capa { position: absolute; left: 0; bottom: 0; right: 0; font-size: var(--text-xs); text-align: center; background: var(--color-primary); color: #fff; padding: 1px 0; }
.foto-item__x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 1; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: var(--text-xs); }
.foto-item__x:disabled { opacity: .35; cursor: not-allowed; }

/* QUA-06: barra de sequência dentro da linha aberta ("anúncio 3 de 15" + próximo). */
.qual-row__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--color-border); }

/* Selo da linha corrigida na Central: o vendedor consertou, mas a fila só encolhe quando o Mercado Livre
   refizer a avaliação dele. Fica DENTRO da linha porque é ali que a pessoa está olhando. */
.qual-row__corrigido { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); line-height: 1.45; }
.qual-row__corrigido > span:first-child { flex: 1 1 320px; }
.qual-row__corrigido-acao { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }