/* ============================================================
   X8 LABS — troca a marca "VIVER DE IA" pela logo da X8 Marketing + "LABS",
   COM a mesma animação da logo original (self-drawing: desenha o contorno
   com stroke-dashoffset e depois preenche). Override do espelho offline;
   a X8 é injetada como SVG inline pelo boot-shim (resiste ao re-render).
   ============================================================ */

/* 1) esconde os logos VIA originais: lockup da sidebar, o splash, o
      monograma VIA do Consultor (.vla-logo-wrapper) e o lockup da tela de LOGIN */
.via-sb-brand > svg,
.vla-logo-wrapper > svg,
.auth-statement > svg,
.via-animated-lockup,
svg[viewBox="0 0 494 58"] {   /* o lockup "VIVER DE IA" onde quer que apareça (login, convite...) */
  display: none !important;
}
/* o X8 injetado no lugar de um lockup genérico (ex.: tela de convite/aceite) */
.x8-lockup--lockup494 .x8-lockup__svg { height: 30px; }
.x8-lockup--lockup494 .x8-lockup__labs { height: 30px; }

/* 1b) tela de login: o lockup fica grande e alinhado à esquerda, como o original */
.auth-statement .x8-lockup { justify-content: flex-start; }
.auth-statement .x8-lockup__svg { height: 34px; }
.auth-statement .x8-lockup__labs { height: 34px; }

/* 1c) rodapé da tela de login: "Viver de IA" -> "X8 LABS" */
.auth-meta > span:first-child { font-size: 0 !important; }
.auth-meta > span:first-child::after {
  content: "X8 LABS";
  font-size: 11px;
  letter-spacing: 1.6px;
}

.via-sb-brand {
  display: inline-flex !important;
  align-items: center;
}

/* 2) o lockup X8 injetado: [X8] LABS, na cor navy da marca (currentColor) */
.x8-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--via-navy, #0A1F3B);
  line-height: 1;
}
.x8-lockup__svg {
  height: 19px;
  width: auto;
  overflow: visible;
  color: inherit;
  display: block;
}

/* 2a) animação de DESENHO (idêntica à via-logo-draw-in original) */
@keyframes x8-draw-in {
  0%   { stroke-dashoffset: 1; stroke-opacity: 1; fill-opacity: 0; }
  55%  { stroke-dashoffset: 0; stroke-opacity: 1; fill-opacity: 0; }
  80%  { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; }
  100% { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; }
}
.x8-lockup__path {
  fill: currentColor;
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: 6;
  stroke-opacity: 0;
  stroke-dasharray: 1;   /* paths têm pathLength=1 -> unidades normalizadas */
  stroke-dashoffset: 1;
  animation: x8-draw-in 1400ms cubic-bezier(0.32, 0.08, 0.24, 1) both;
}

/* 2b) "LABS" DESENHA igual à marca (stroke-draw -> fill), como o wordmark
       original "VIVER DE IA" fazia. É um <svg><text> pra o stroke poder
       animar; --labs-len (comprimento do traço) é medido pelo boot-shim. */
.x8-lockup__labs {
  height: 19px;
  width: auto;
  overflow: visible;
  display: block;
  color: inherit;
}
@keyframes x8-labs-draw {
  0%   { stroke-dashoffset: 400; stroke-opacity: 1; fill-opacity: 0; }
  55%  { stroke-dashoffset: 0;   stroke-opacity: 1; fill-opacity: 0; }
  80%  { stroke-dashoffset: 0;   stroke-opacity: 0; fill-opacity: 1; }
  100% { stroke-dashoffset: 0;   stroke-opacity: 0; fill-opacity: 1; }
}
.x8-lockup__labs-text {
  font-family: Geist, Inter, system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 27px;
  letter-spacing: 3px;
  fill: currentColor;
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: 0.7;
  stroke-opacity: 0;
  stroke-dasharray: 400;   /* > contorno de "LABS" -> um traço contínuo que desenha e segura */
  stroke-dashoffset: 400;
  /* começa logo depois do X8 (stagger), mesma duração/easing do desenho da marca */
  animation: x8-labs-draw 1400ms cubic-bezier(0.32, 0.08, 0.24, 1) 260ms both;
}

/* 3) sidebar COLAPSADA (rail ~64px, classe .x8-rail posta pelo boot-shim):
      só a MARCA X8, centralizada — esconde "LABS" */
.via-sb.x8-rail .via-sb-brand { justify-content: center; width: 100%; }
.via-sb.x8-rail .x8-lockup { gap: 0; }
.via-sb.x8-rail .x8-lockup__labs { display: none; }

/* 3b) Consultor: só a MARCA X8 (grande), no lugar do monograma VIA */
.vla-logo-wrapper .x8-lockup { justify-content: center; }
.vla-logo-wrapper .x8-lockup__svg { height: 50px; }

/* 4) rodapé da sidebar: "Viver de IA" -> "X8 LABS" (consistência) */
.via-sb-inner > div:last-child > p {
  font-size: 0 !important;
}
.via-sb-inner > div:last-child > p::after {
  content: "X8 LABS";
  font-size: 9px;
  letter-spacing: 1.62px;
}


/* ============================================================
   X8 LABS — SWITCH DE TEMA (rodapé da sidebar)
   Cores 100% via tokens --via-*: quando o tema escuro redefine as
   primitivas, o switch inverte sozinho (trilho branco + knob preto,
   que é exatamente o look do Resend). Os blocos [data-theme="dark"]
   no fim são rede de segurança, caso algum token mapeie diferente.
   ============================================================ */

/* --- a linha, entre o <nav> e o rodapé "X8 LABS" --- */
.x8-theme-row {
  flex-shrink: 0;
  padding: 6px 12px 10px;          /* alinha com o padding lateral do .via-sb-nav */
}

.x8-theme-switch {
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;                    /* mesma altura dos .via-nav-item */
  padding: 0 10px 0 6px;           /* mesmo padding dos .via-nav-item */
  border: none;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--via-font, "Geist", system-ui, sans-serif);
  color: var(--via-text-body, #344054);
  -webkit-font-smoothing: antialiased;
  transition: background-color .16s var(--via-ease, cubic-bezier(.32, .08, .24, 1));
}
.x8-theme-switch:hover { background: var(--via-navy-05, rgba(var(--x8n),.05)); }
.x8-theme-switch:active { background: var(--via-navy-08, rgba(var(--x8n),.08)); }
.x8-theme-switch:focus-visible {
  outline: 2px solid var(--via-navy-30, rgba(var(--x8n),.3));
  outline-offset: -2px;
}

/* --- sol/lua: dois SVGs sobrepostos, crossfade + giro --- */
.x8-theme-switch__ico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;                     /* mesma calha de ícone dos .via-nav-item */
  height: 38px;
  flex-shrink: 0;
  color: var(--via-text-muted, #5C6677);
  transition: color .16s var(--via-ease, cubic-bezier(.32, .08, .24, 1));
}
.x8-theme-switch:hover .x8-theme-switch__ico { color: var(--via-text-primary, #0A1F3B); }
.x8-theme-switch__ico svg {
  position: absolute;
  width: 16px;
  height: 16px;
  transition:
    opacity .24s var(--via-ease, cubic-bezier(.32, .08, .24, 1)),
    transform .34s var(--via-ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}
.x8-ico--sun  { opacity: 1; transform: rotate(0deg)    scale(1); }
.x8-ico--moon { opacity: 0; transform: rotate(-70deg)  scale(.5); }
.x8-theme-switch[aria-checked="true"] .x8-ico--sun  { opacity: 0; transform: rotate(70deg) scale(.5); }
.x8-theme-switch[aria-checked="true"] .x8-ico--moon { opacity: 1; transform: rotate(0deg)  scale(1); }

/* --- rótulo + badge "auto" (só quando a preferência é 'system') --- */
.x8-theme-switch__label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.006em;
  white-space: nowrap;
}
.x8-theme-switch__auto {
  display: none;
  font-family: var(--via-font-mono, "Geist Mono", monospace);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 1px 4px;
  border: 1px solid var(--via-border-soft, rgba(var(--x8n),.08));
  border-radius: 5px;
  color: var(--via-text-faint, #98A2B3);
}
.x8-theme-switch[data-pref="system"] .x8-theme-switch__auto { display: inline-flex; }

/* --- trilho + knob --- */
.x8-theme-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 18px;
  border-radius: var(--via-radius-pill, 999px);
  background: var(--via-navy-12, rgba(var(--x8n),.12));
  box-shadow: inset 0 0 0 1px var(--via-border-soft, rgba(var(--x8n),.05));
  transition: background-color .22s var(--via-ease, cubic-bezier(.32, .08, .24, 1));
}
.x8-theme-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--via-surface, #fff);
  box-shadow: 0 1px 2px rgba(var(--x8n),.28);
  transition: transform .24s var(--via-ease-snap, cubic-bezier(.2, .7, .2, 1));
}
/* LIGADO (= tema escuro): trilho quase-branco, knob quase-preto */
.x8-theme-switch[aria-checked="true"] .x8-theme-switch__track {
  background: var(--via-text-primary, #0A1F3B);
  box-shadow: none;
}
.x8-theme-switch[aria-checked="true"] .x8-theme-switch__knob { transform: translateX(12px); }

/* --- SIDEBAR COLAPSADA (rail 64px, classe .x8-rail posta pelo boot-shim):
       vira só o ícone, centralizado, sem rótulo e sem trilho --- */
.via-sb.x8-rail .x8-theme-row { padding: 6px 0 10px; }
.via-sb.x8-rail .x8-theme-switch {
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0 auto;
  border-radius: 10px;
  justify-content: center;
}
.via-sb.x8-rail .x8-theme-switch__label,
.via-sb.x8-rail .x8-theme-switch__track { display: none; }
.via-sb.x8-rail .x8-theme-switch__ico { width: 38px; }

/* --- rede de segurança no escuro (Resend: branco no preto) --- */
:root[data-theme="dark"] .x8-theme-switch:hover  { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .x8-theme-switch:active { background: rgba(255, 255, 255, .10); }
:root[data-theme="dark"] .x8-theme-switch:focus-visible { outline-color: rgba(255, 255, 255, .55); } /* pós-revisão P1#7: .30 dava 2.61:1 (< 3:1) */
:root[data-theme="dark"] .x8-theme-switch__track {
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
:root[data-theme="dark"] .x8-theme-switch[aria-checked="true"] .x8-theme-switch__track {
  background: #EDEDED;
  box-shadow: none;
}
:root[data-theme="dark"] .x8-theme-switch__knob {
  background: #0A0A0A;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
:root[data-theme="dark"] .x8-theme-switch__auto {
  border-color: rgba(255, 255, 255, .12);
}

/* --- durante a TROCA de tema (.x8-theme-switching, posta/removida pelo bloco
       [A] em ~220ms): quem controla a "onda" do app é a §26 do dark-tokens.css
       (transição SÓ de cor em `html.x8-theme-switching *`). NÃO redeclaramos
       `* { transition:none }` aqui — pós-revisão P1#8: era conflito de mesma
       especificidade/!important resolvido por ordem de carga (frágil).
       As regras abaixo, específicas do switch, têm especificidade MAIOR e
       (re)garantem transform/opacity — que a lista só-de-cor do dark-tokens
       não cobre — no knob e nos ícones. --- */
html.x8-theme-switching .x8-theme-switch__track {
  transition: background-color .22s var(--via-ease, cubic-bezier(.32, .08, .24, 1)) !important;
}
html.x8-theme-switching .x8-theme-switch__knob {
  transition: transform .24s var(--via-ease-snap, cubic-bezier(.2, .7, .2, 1)) !important;
}
html.x8-theme-switching .x8-theme-switch__ico svg {
  transition:
    opacity .24s var(--via-ease, cubic-bezier(.32, .08, .24, 1)),
    transform .34s var(--via-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .x8-theme-switch,
  .x8-theme-switch__ico,
  .x8-theme-switch__ico svg,
  .x8-theme-switch__track,
  .x8-theme-switch__knob { transition: none !important; }
}

/* ============================================================
   BARRAS DE ROLAGEM OCULTAS (a pedido) — o scroll continua funcionando,
   só o indicador some. Vale para o rail, o cartão da página e qualquer
   área rolável interna.
   Precisa das DUAS declarações: `scrollbar-width` cobre Firefox e
   `::-webkit-scrollbar` cobre Chrome/Safari/Edge — não há propriedade
   única que sirva aos dois.
   `overflow` NÃO é tocado: esconder a barra sem manter o overflow
   transformaria conteúdo rolável em conteúdo cortado.
   ============================================================ */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ⚠ O bundle injeta um <style> em runtime com `.via-sb-nav{scrollbar-width:thin}`
   + `::-webkit-scrollbar{width:4px}`. Seletor de classe vence o `*` acima, então
   o rail continuava com 11px de barra. Repetimos o MESMO alvo com !important. */
.via-sb-nav,
.via-shell-content,
.via-shell-content > main {
  scrollbar-width: none !important;
}
.via-sb-nav::-webkit-scrollbar,
.via-shell-content::-webkit-scrollbar,
.via-shell-content > main::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* ---- pill "individual" na aba Minhas Mentorias (do mentor) --------
   Variante nova: o <Pill> monta a classe a partir do nome da variante,
   então basta o estilo. Tom azul p/ ler como CATEGORIA e não competir
   com "ao vivo" (que tem ponto pulsante) nem com "agendada" (neutro). */
.via-pill--individual {
  background: rgba(30, 58, 95, .07);
  border-color: rgba(30, 58, 95, .20);
  color: var(--via-blue, #1E3A5F);
}
:root[data-theme="dark"] .via-pill--individual {
  background: rgba(165, 180, 252, .14);
  border-color: rgba(165, 180, 252, .30);
  color: #c7d2fe;
}