/* =====================================================================
   A moeda do Vaz Twin: o símbolo da marca e o avatar de cada funcionário de IA.
   Depende dos tokens (--vt-*) e das máscaras (--vt-moeda-*), que vêm de
   /marca/vaztwin-marca.css nas páginas públicas e de /vaztwin-theme.css no
   painel. Regras de uso em assets/marca/GUIA-DA-MARCA.md: não girar, espelhar,
   contornar, sombrear nem trocar as cores entre si.
   ===================================================================== */
/*
   Dois perfis lado a lado: na frente a pessoa (tinta), atrás o gêmeo, sobre o campo. `.vt-orb` é o símbolo da marca
   (com a folga da moeda dentro do quadro); `.orb` é o avatar (ocupa o círculo inteiro). Os nomes das classes vêm da
   esfera antiga, que este desenho substitui em todo o produto. */
.vt-orb, .orb { --s: 26px; --moeda-campo: var(--vt-amarelo); --moeda-eco: var(--vt-indigo); --moeda-rosto: var(--vt-tinta);
  position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden;
  background: var(--moeda-campo); box-shadow: none; isolation: isolate; forced-color-adjust: none; }
.orb { --s: 44px; }
.vt-orb::before, .vt-orb::after, .orb::before, .orb::after { content: ""; position: absolute; inset: 0; -webkit-mask: var(--vt-moeda-eco) center / 100% 100% no-repeat; mask: var(--vt-moeda-eco) center / 100% 100% no-repeat; background: var(--moeda-eco); }
.vt-orb::after, .orb::after { -webkit-mask-image: var(--vt-moeda-rosto); mask-image: var(--vt-moeda-rosto); background: var(--moeda-rosto); }
/* símbolo: o desenho é o mesmo, a moeda é que é um pouco menor que o quadro (raio 56 de 60) */
.vt-orb::before, .vt-orb::after { -webkit-mask-size: 107.143% 107.143%; mask-size: 107.143% 107.143%; }
/* traço reduzido (16 a 24 px): perfis simplificados, que não empastam em tamanho de ícone */
.vt-orb.sm, .vt-orb.rz, .orb.rz { --s: 20px; }
.vt-orb.sm::before, .vt-orb.rz::before, .orb.rz::before { -webkit-mask: var(--vt-moeda-eco-reduzida) center / 100% 100% no-repeat; mask: var(--vt-moeda-eco-reduzida) center / 100% 100% no-repeat; }
.vt-orb.sm::after, .vt-orb.rz::after, .orb.rz::after { -webkit-mask: var(--vt-moeda-rosto-reduzida) center / 100% 100% no-repeat; mask: var(--vt-moeda-rosto-reduzida) center / 100% 100% no-repeat; }
/* versão noturna (fundo escuro): campo índigo, gêmeo amarelo; o rosto fica claro com a tinta do tema */
[data-tema="escuro"] .vt-orb, [data-tema="escuro"] .orb:not([class*="de-"]),
:root[data-theme="dark"] .vt-orb, :root[data-theme="dark"] .orb:not([class*="de-"]) { --moeda-campo: var(--vt-indigo); --moeda-eco: var(--vt-amarelo); }
[data-tema="claro"] .vt-orb, [data-tema="claro"] .orb:not([class*="de-"]) { --moeda-campo: var(--vt-amarelo); --moeda-eco: var(--vt-indigo); }
/* uma cor (sobre foto ou cor que não seja papel, branco ou tinta) */
.vt-orb.uma-cor, .orb.uma-cor { --moeda-campo: var(--vt-linha); --moeda-eco: var(--vt-contorno); }
/* avatares: a mesma moeda com a cor de cada um; o rosto da frente é sempre tinta */
.orb.de-assistente { --moeda-campo: var(--vt-alter-fundo); --moeda-eco: var(--vt-certo); }
.orb.de-justine { --moeda-campo: var(--vt-justine-fundo); --moeda-eco: var(--vt-justine); }
.orb.de-nina { --moeda-campo: var(--vt-nina-fundo); --moeda-eco: var(--vt-nina); }