/* ========================================================================== X8 ORB no /consultor-ia — o CARD do painel (main, raio 32) fica preto com a orb de fundo; o RESTO do shell (sidebar, topbar, fundo claro) fica normal. Só ativa com body.x8-orb-consultor (o x8-orb-consultor.js liga/desliga na rota). Estático no pra não piscar (mesma lição do hero do dashboard). Camadas DENTRO do card: orb absolute z0 · conteúdo (.ob-consultor-page) z1. ========================================================================== */ /* ---- TOKENS DO VIDRO: a receita ÚNICA do material translúcido do modo orb. Input e cards de sugestão consomem daqui, então calibrar é mexer em UMA linha e os dois seguem juntos (o "padrão" pedido). Perfil atual: bem transparente + blur 40px (desfoca forte a nuvem atrás) ⇒ corpo escuro, por isso o TEXTO é claro. */ body.x8-orb-consultor { --x8-glass-bg: radial-gradient(80% 60% at 12% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.04) 100%); --x8-glass-border: 1px solid rgba(255, 255, 255, 0.26); --x8-glass-blur: blur(40px) saturate(1.5); --x8-glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.22); --x8-glass-text: #ececf2; --x8-glass-text-dim: #a9a9b6; /* raio do sistema (Mini Bento 22-24px; o modal do Histórico usa 20, o card do painel 32) — o componente vinha com 12px, quadrado demais pro padrão */ --x8-glass-radius: 22px; } /* o card do painel vira o palco: preto, relativo, recorta a orb no raio 32. --via-bg: os fades decorativos do componente (ex.: a faixa acima do input) fazem gradiente pra var(--via-bg) = "a cor do fundo" — redefinir o token aqui faz TODOS eles fundirem pro preto, fiel ao propósito do design. */ body.x8-orb-consultor .via-shell-content main { position: relative; background: #000 !important; --via-bg: #000000; } body.x8-orb-consultor .x8-orb-bg { position: absolute; inset: 0; z-index: 0; background: #000; border-radius: inherit; overflow: hidden; pointer-events: none; /* fundo decorativo: nunca rouba clique do painel */ } body.x8-orb-consultor .x8-orb-bg canvas { width: 100%; height: 100%; display: block; } body.x8-orb-consultor .ob-consultor-page { position: relative; z-index: 1; background: transparent !important; } body.x8-orb-consultor .ob-consultor-page > main { background: transparent !important; } /* barra do topo do painel (Nova conversa) → vidro escuro */ body.x8-orb-consultor .ob-consultor-header { background: rgba(14, 15, 18, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--x8-glass-radius) !important; } body.x8-orb-consultor .ob-consultor-header, body.x8-orb-consultor .ob-consultor-header * { color: #e8e8ee !important; } body.x8-orb-consultor .ob-consultor-header svg { color: #c9c9d4 !important; } /* botões superiores → glass transparente. ⚠ armadilhas vividas aqui: (1) o componente injeta