/* Shared top dock used by public/account pages. */
.vai-home-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 13px 0 11px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body > [data-shared-home-nav] ~ .top-header,
body > [data-shared-home-nav] ~ .top-nav {
  display: none !important;
}

.vai-home-nav__scroll {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px;
}

.vai-home-nav__scroll::-webkit-scrollbar,
.vai-home-nav__dock::-webkit-scrollbar {
  display: none;
}

.vai-home-nav__scroll::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 14px;
  bottom: 6px;
  width: 34px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, rgba(2, 6, 23, 0), rgba(2, 6, 23, .42));
  pointer-events: none;
}

.vai-home-nav__dock {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: 999px;
  /* Borda de vidro: branco sutil (neutro) em vez de azul marcado. */
  border: 1px solid rgba(255, 255, 255, .12);
  /* Fundo mais leve + blur mais forte = efeito de vidro (translucido) de volta */
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .22), rgba(15, 23, 42, .08)),
    rgba(2, 6, 23, .10);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 28px rgba(2, 6, 23, .28);
  display: grid;
  align-items: center;
  gap: 4px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vai-home-nav__scroll[data-active="home"] .vai-home-nav__dock {
  grid-template-columns: minmax(78px, 1.45fr) repeat(4, minmax(38px, .9fr));
}

.vai-home-nav__scroll[data-active="docs"] .vai-home-nav__dock {
  grid-template-columns: minmax(34px, .55fr) minmax(132px, 2.3fr) minmax(34px, .55fr) minmax(34px, .55fr) minmax(34px, .55fr);
}

.vai-home-nav__scroll[data-active="account"] .vai-home-nav__dock {
  grid-template-columns: minmax(38px, .8fr) minmax(38px, .8fr) minmax(112px, 1.9fr) minmax(38px, .8fr) minmax(38px, .8fr);
}

.vai-home-nav__scroll[data-active="plans"] .vai-home-nav__dock {
  grid-template-columns: minmax(34px, .55fr) minmax(34px, .55fr) minmax(34px, .55fr) minmax(132px, 2.3fr) minmax(34px, .55fr);
}

.vai-home-nav__scroll[data-active="how"] .vai-home-nav__dock {
  grid-template-columns: minmax(34px, .55fr) minmax(34px, .55fr) minmax(34px, .55fr) minmax(34px, .55fr) minmax(132px, 2.3fr);
}

/* ── LOGADO: 3 slots (Criação | Vistorias e docs | Menu) ── */
/* Vem depois dos [data-active] acima para vencer por ordem de origem. */
/* Espacamento uniforme: os tres itens se distribuem com folga igual ao */
/* longo da barra (sem vao e sem o menu exilado na quina). */
.vai-home-nav__scroll.is-logged .vai-home-nav__dock {
  display: flex;
  grid-template-columns: none;
  justify-content: space-between;
  gap: 6px;
  /* padding igual nos 4 lados para o realce da aba ativa ficar */
  /* concentrico com a barra (mesma folga em cima/baixo e nas pontas). */
  padding: 6px;
}
/* Itens dimensionados pelo conteudo (nao mais 1fr) */
/* Fontes e icones maiores para preencher melhor a barra. */
.vai-home-nav__scroll.is-logged .vai-home-nav__item {
  width: auto;
  min-height: 42px;
  font-size: .9rem;
}
.vai-home-nav__scroll.is-logged .vai-home-nav__item svg {
  width: 21px;
  height: 21px;
}
/* Os dois primeiros mostram icone + texto sempre; o menu e so icone. */
.vai-home-nav__scroll.is-logged .vai-home-nav__text-item {
  padding: 0 14px;
}
.vai-home-nav__scroll.is-logged .vai-home-nav__text-item span {
  display: inline;
}
/* Menu: circulo de verdade (largura = altura). Borda cinza fininha e */
/* chapada (border, nao inset branco) para nao criar bisel/brilho 3D */
/* quando a barra desfoca o conteudo atras (backdrop-filter). */
.vai-home-nav__scroll.is-logged .vai-home-nav__menu-btn {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(148, 163, 184, .20);
  box-shadow: none;
}
.vai-home-nav__scroll.is-logged .vai-home-nav__menu-btn:hover {
  color: #e0f2fe;
  background: rgba(59, 130, 246, .16);
  border-color: rgba(96, 165, 250, .32);
  box-shadow: none;
}

.vai-home-nav__item {
  min-height: 38px;
  min-width: 0;
  width: 100%;
  padding: 0;
  border-radius: 999px;
  color: rgba(203, 213, 225, .88);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  background: transparent;
  box-shadow: none;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  overflow: hidden;
}

.vai-home-nav__item span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
}

.vai-home-nav__item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.vai-home-nav__item:not(.is-active) {
  width: 100%;
  padding: 0;
}

.vai-home-nav__item:not(.is-active) svg {
  width: clamp(17px, 5vw, 21px);
  height: clamp(17px, 5vw, 21px);
}

.vai-home-nav__item:hover,
.vai-home-nav__item.is-active {
  color: #e0f2fe;
  background: rgba(59, 130, 246, .20);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .22);
}

.vai-home-nav__item.is-active {
  min-width: 0;
  max-width: none;
  padding: 0 10px;
}

.vai-home-nav__home {
  padding: 0;
}

.vai-home-nav__account {
  padding: 0;
}

/* ── Variante visitante: 2 icones (esquerda) + 2 CTAs de texto (direita) ── */
.vai-home-nav__scroll.is-guest .vai-home-nav__dock {
  display: flex;
  grid-template-columns: none;
  gap: 6px;
  justify-content: space-between;
}
.vai-home-nav__scroll.is-guest .vai-home-nav__item {
  width: auto;
  flex: 0 0 auto;
  padding: 0 12px;
}
/* Entrar: texto simples */
.vai-home-nav__text {
  padding: 0 12px;
}
/* Criar conta: CTA azul destacado */
.vai-home-nav__cta {
  padding: 0 14px;
  color: #e0f2fe;
  background: rgba(59, 130, 246, .22);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .30);
}
.vai-home-nav__cta:hover {
  background: rgba(59, 130, 246, .32);
}
/* Pagina atual: APENAS sublinhado (sem fundo azul, para nao parecer 2 selecionados) */
.vai-home-nav__scroll.is-guest .vai-home-nav__item.is-active {
  background: transparent;
  box-shadow: none;
}
.vai-home-nav__scroll.is-guest .vai-home-nav__item.is-active span {
  text-decoration: underline;
  text-decoration-color: #60a5fa;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* Excecao: "Criar conta" mantem o azul de CTA mesmo sendo a pagina atual */
.vai-home-nav__scroll.is-guest .vai-home-nav__cta.is-active {
  background: rgba(59, 130, 246, .22);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .30);
}

@media (max-width: 420px) {
  .vai-home-nav__item {
    font-size: .76rem;
  }

  .vai-home-nav__home {
    padding: 0;
  }

  .vai-home-nav__scroll.is-guest .vai-home-nav__item {
    padding: 0 8px;
  }
  .vai-home-nav__text { padding: 0 10px; }
  .vai-home-nav__cta  { padding: 0 12px; }
}

/* ══ MENU GERAL — tela cheia (desliza da direita) ══════════════ */
.vai-menu {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: linear-gradient(180deg, #0d1424 0%, #080d18 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(100%);
  transition: transform .30s cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
  visibility: hidden;
}
.vai-menu.open {
  transform: translateX(0);
  visibility: visible;
}

.vai-menu__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 14px;
  padding-top: max(16px, env(safe-area-inset-top));
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  flex-shrink: 0;
}
.vai-menu__back {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #cbd5e1;
  cursor: pointer;
  transition: background .15s ease;
}
.vai-menu__back:hover { background: rgba(255, 255, 255, .12); }
.vai-menu__back svg { width: 20px; height: 20px; }
.vai-menu__title {
  /* Centralizado na largura do cabecalho, independente da seta ← */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.15rem;
  font-weight: 700;
  color: #f1f5f9;
  pointer-events: none;
}

.vai-menu__body {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 40px;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

.vai-menu__section {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(148, 163, 184, .55);
  padding: 16px 20px 6px;
}

.vai-menu__item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  color: #e2e8f0;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.vai-menu__item:hover { background: rgba(255, 255, 255, .04); }
.vai-menu__item:active { background: rgba(59, 130, 246, .10); }

.vai-menu__ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, .12);
  color: #93c5fd;
}
.vai-menu__ico svg { width: 22px; height: 22px; }

.vai-menu__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vai-menu__text b { font-size: 1rem; font-weight: 600; }
.vai-menu__text small { font-size: .8rem; color: #64748b; font-weight: 400; }

.vai-menu__chev {
  color: #475569;
  flex-shrink: 0;
  display: flex;
}
.vai-menu__chev svg { width: 18px; height: 18px; }

/* Barra de progresso do Google Drive dentro do item Armazenamento */
.vai-menu__drive { margin-top: 10px; }
.vai-menu__drive-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: #94a3b8;
  margin-bottom: 6px;
}
.vai-menu__drive-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vai-menu__drive-label svg { width: 14px; height: 14px; }
.vai-menu__drive-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.vai-menu__drive-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width .4s ease;
}

/* Trava o scroll do fundo quando o menu esta aberto */
body.vai-menu-open { overflow: hidden; }

/* ══ SUB-CABECALHO (voltar + titulo) — usado quando o nav renderiza uma ══════ */
/* sub-pagina, ex.: Como funciona para usuario logado. Mesmo estilo do menu. */
.vai-subhead {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* padding vertical generoso para o botao voltar (40px) nao encostar nas bordas */
  padding: 20px 20px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .34), rgba(15, 23, 42, .14));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 8px 24px rgba(2, 6, 23, .28);
}
.vai-subhead__back {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #cbd5e1;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: background .15s;
}
.vai-subhead__back:hover { background: rgba(255, 255, 255, .12); }
.vai-subhead__back svg { width: 20px; height: 20px; }
.vai-subhead__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f1f5f9;
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP (>= 900px) — SIDEBAR (apenas usuário LOGADO).
   Substitui a pílula do topo por uma barra lateral fixa com todos os
   itens visíveis. O <html> recebe .vai-has-side (logado) e, opcional,
   .vai-side-collapsed (recolhida, persistida em localStorage).
   IMPORTANTE: tudo aqui vive dentro do @media (min-width:900px). No
   mobile (< 900px) a .vai-side fica display:none e NADA muda.
   ══════════════════════════════════════════════════════════════════════ */
.vai-side { display: none; }

@media (min-width: 900px) {
  /* Com a sidebar ativa, esconde a pílula do topo e o subheader mobile. */
  html.vai-has-side .vai-home-nav,
  html.vai-has-side .vai-subhead { display: none !important; }

  /* Empurra todo o conteúdo da página para a direita da barra. */
  html.vai-has-side body {
    padding-left: 220px;
    transition: padding-left .22s cubic-bezier(.32, .72, 0, 1);
  }
  html.vai-has-side.vai-side-collapsed body { padding-left: 70px; }

  .vai-side {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 220px; z-index: 90;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, .30), rgba(15, 23, 42, .10)),
      rgba(2, 6, 23, .14);
    border-right: 1px solid rgba(255, 255, 255, .08);
    padding: 16px 12px 12px;
    transition: width .22s cubic-bezier(.32, .72, 0, 1), padding .22s cubic-bezier(.32, .72, 0, 1);
  }
  html.vai-side-collapsed .vai-side { width: 70px; padding-left: 10px; padding-right: 10px; }

  /* Cabeçalho: logo (texto) + botão recolher */
  .vai-side__head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 8px; margin-bottom: 14px; min-height: 36px; }
  .vai-side__brand { text-decoration: none; flex: 1; min-width: 0; }
  .vai-side__brand-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: #f1f5f9; white-space: nowrap; }
  .vai-side__brand-name span { color: #60a5fa; }
  .vai-side__collapse {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-family: inherit;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
    color: #94a3b8; transition: background .16s, color .16s;
  }
  .vai-side__collapse:hover { background: rgba(255, 255, 255, .09); color: #cbd5e1; }
  .vai-side__collapse svg { width: 19px; height: 19px; transition: transform .22s; }
  html.vai-side-collapsed .vai-side__collapse svg { transform: rotate(180deg); }

  /* Navegação */
  .vai-side__nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }
  .vai-side__nav::-webkit-scrollbar { display: none; }
  .vai-side__sec {
    font-size: .63rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(148, 163, 184, .5); padding: 14px 10px 6px; white-space: nowrap; overflow: hidden;
  }
  .vai-side__item {
    display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 11px;
    text-decoration: none; color: rgba(203, 213, 225, .82); font-size: .9rem; font-weight: 600;
    transition: background .16s, color .16s;
  }
  .vai-side__item:hover { background: rgba(255, 255, 255, .05); color: #e2e8f0; }
  .vai-side__item svg { width: 19px; height: 19px; flex-shrink: 0; color: #93c5fd; }
  .vai-side__item .lbl { white-space: nowrap; overflow: hidden; }
  .vai-side__item.muted svg { color: #94a3b8; }
  /* Realce azul APENAS na página atual. */
  .vai-side__item.is-active { color: #e0f2fe; background: rgba(59, 130, 246, .16); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .24); }
  .vai-side__item.is-active svg { color: #bfdbfe; }

  /* Medidor do Drive dentro de Armazenamento */
  .vai-side__drive { padding: 2px 12px 8px; overflow: hidden; }
  .vai-side__drive-row { display: flex; align-items: center; justify-content: space-between; font-size: .68rem; color: #94a3b8; margin-bottom: 5px; white-space: nowrap; }
  .vai-side__drive-label { display: inline-flex; align-items: center; gap: 5px; }
  .vai-side__drive-label svg { width: 12px; height: 12px; }
  .vai-side__drive-bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
  .vai-side__drive-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, #60a5fa); transition: width .4s ease; }

  /* Card do usuário (rodapé) → perfil */
  .vai-side__user {
    display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 9px; border-radius: 12px;
    text-decoration: none; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
    transition: background .16s, border-color .16s;
  }
  .vai-side__user:hover { background: rgba(255, 255, 255, .06); border-color: rgba(96, 165, 250, .28); }
  .vai-side__user.is-active { border-color: rgba(96, 165, 250, .4); background: rgba(59, 130, 246, .12); }
  .vai-side__avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; color: #e0f2fe; background: linear-gradient(135deg, #2563eb, #3b82f6);
  }
  .vai-side__u { flex: 1; min-width: 0; }
  .vai-side__u b { display: block; font-size: .8rem; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vai-side__u small { display: block; font-size: .68rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vai-side__go { color: #94a3b8; display: flex; flex-shrink: 0; transition: color .16s, transform .16s; }
  .vai-side__go svg { width: 16px; height: 16px; }
  .vai-side__user:hover .vai-side__go { color: #cbd5e1; transform: translateX(2px); }

  /* ── Estado recolhido: só ícones ── */
  html.vai-side-collapsed .vai-side__head { justify-content: center; padding: 4px 0; }
  html.vai-side-collapsed .vai-side__brand { display: none; }
  html.vai-side-collapsed .vai-side__item { justify-content: center; gap: 0; padding: 11px 0; }
  html.vai-side-collapsed .vai-side__item .lbl,
  html.vai-side-collapsed .vai-side__sec,
  html.vai-side-collapsed .vai-side__drive,
  html.vai-side-collapsed .vai-side__u,
  html.vai-side-collapsed .vai-side__go { display: none; }
  html.vai-side-collapsed .vai-side__user { justify-content: center; padding: 9px 0; }
}