/* ============================================================
   Halky Web — Layout do Shell (Fase 1)
   Grade app (sidebar + main), header fixo, conteúdo, navegação inferior
   no mobile e drawers (temas / navegação). Superfícies em vidro.
   ============================================================ */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--transition);
}

/* ============================================================
   HOME V4 — Atmosfera viva GLOBAL (.hk-ambient).
   Camada de viewport inteiro ATRÁS de todo o shell (home + chat + módulos),
   substituindo a sensação de "tela chapada" por um ambiente em movimento sutil:
   aurora, malha de cor, raios suaves, bloom de luz, ondas neurais e grão.
   100% theme-driven (--color-primary/secondary/accent + --theme-glow-soft).
   GPU-safe: anima SOMENTE opacity/transform; o blur é ESTÁTICO; nunca anima
   box-shadow/filter/backdrop-filter e NÃO há backdrop-filter aqui dentro
   (proibido sob overflow:hidden). pointer-events off. O .app-shell (base.css,
   z-index:1) e os drawers (z-index >0) ficam ACIMA. ============================ */
.hk-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}
.hk-ambient > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Aurora — cônica profunda girando devagar (transform/opacity; blur estático). */
.hk-ambient__aurora {
  inset: -30%;
  background:
    conic-gradient(from 200deg at 30% 28%,
      color-mix(in srgb, var(--color-primary) 34%, transparent),
      transparent 26% 54%,
      color-mix(in srgb, var(--color-secondary) 30%, transparent),
      transparent 82%);
  filter: blur(80px);
  opacity: .42;
  animation: hkAmbAurora 28s ease-in-out infinite alternate;
}
@keyframes hkAmbAurora {
  from { opacity: .30; transform: scale(1)    rotate(0deg); }
  to   { opacity: .50; transform: scale(1.12) rotate(10deg); }
}

/* Malha de cor — radiais distribuídos respirando (opacity/scale). */
.hk-ambient__mesh {
  inset: -20%;
  background:
    radial-gradient(34% 40% at 14% 18%, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 70%),
    radial-gradient(30% 36% at 86% 16%, color-mix(in srgb, var(--color-secondary) 26%, transparent), transparent 72%),
    radial-gradient(36% 42% at 78% 84%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 72%),
    radial-gradient(28% 34% at 20% 88%, color-mix(in srgb, var(--color-secondary) 20%, transparent), transparent 74%);
  filter: blur(50px);
  opacity: .5;
  animation: hkAmbMesh 20s ease-in-out infinite alternate;
}
@keyframes hkAmbMesh {
  from { opacity: .38; transform: scale(1); }
  to   { opacity: .58; transform: scale(1.06); }
}

/* Raios suaves — leque cônico de baixa opacidade girando muito devagar. */
.hk-ambient__rays {
  inset: -50%;
  background:
    repeating-conic-gradient(from 0deg at 50% 42%,
      color-mix(in srgb, var(--color-primary) 10%, transparent) 0deg 6deg,
      transparent 6deg 18deg);
  filter: blur(30px);
  opacity: .12;
  animation: hkAmbRays 120s linear infinite;
}
@keyframes hkAmbRays { to { transform: rotate(360deg); } }

/* Bloom de luz — clarão radial no topo que pulsa (opacity/scale). */
.hk-ambient__bloom {
  background:
    radial-gradient(50% 42% at 50% -6%, var(--theme-glow-soft, color-mix(in srgb, var(--color-primary) 22%, transparent)), transparent 70%);
  opacity: .7;
  animation: hkAmbBloom 12s ease-in-out infinite alternate;
}
@keyframes hkAmbBloom {
  from { opacity: .5; transform: scale(1); }
  to   { opacity: .9; transform: scale(1.08); }
}

/* Ondas neurais — faixas radiais largas em deriva vertical lenta. */
.hk-ambient__waves {
  inset: -25%;
  background:
    radial-gradient(60% 18% at 50% 30%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%),
    radial-gradient(70% 16% at 50% 66%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 72%);
  filter: blur(26px);
  opacity: .5;
  animation: hkAmbWaves 18s ease-in-out infinite alternate;
}
@keyframes hkAmbWaves {
  from { transform: translateY(-2%); opacity: .35; }
  to   { transform: translateY(2%);  opacity: .55; }
}

/* Grão fino ESTÁTICO (sem animação) — quebra o banding dos gradientes. */
.hk-ambient__noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .04;
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
  .hk-ambient__aurora,
  .hk-ambient__mesh,
  .hk-ambient__rays,
  .hk-ambient__bloom,
  .hk-ambient__waves { animation: none !important; }
}

/* Ângulo registrado p/ animar a borda em degradê (glow viajante da sidebar).
   Em navegadores sem @property o ângulo não anima → borda em degradê estática
   (degradação graciosa, sem quebra). */
@property --hk-side-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes hkSideGlow { to { --hk-side-angle: 360deg; } }

/* ---------------- Sidebar (desktop) — painel de vidro flutuante ---------------- */
.sidebar {
  position: sticky;
  top: var(--space-3);
  align-self: start;
  height: calc(100vh - var(--space-3) * 2);
  margin: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  /* Glass preservado no padding-box (fill semi-transparente) + glow viajante
     no border-box (conic girando via --hk-side-angle). Não rola/clipa porque é
     pintura de fundo presa à caixa (ao contrário de um pseudo absoluto). */
  background:
    linear-gradient(var(--theme-sidebar-bg), var(--theme-sidebar-bg)) padding-box,
    conic-gradient(from var(--hk-side-angle, 0deg),
      transparent 0 53%,
      color-mix(in srgb, var(--color-primary) 82%, transparent) 67%,
      color-mix(in srgb, var(--color-secondary) 94%, transparent) 79%,
      color-mix(in srgb, var(--color-primary) 55%, transparent) 88%,
      transparent 98%) border-box;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1.5px solid transparent;
  border-radius: 28px;
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
  z-index: var(--z-sidebar);
  animation: hkSideGlow 7s linear infinite;
  /* A sidebar NUNCA rola: a marca fica fixa no topo, o rodapé fixo embaixo e a
     navegação (.hk-side-nav) absorve qualquer excesso com rolagem INVISÍVEL — a
     única barra de rolagem visível permitida na plataforma fica dentro das
     respostas do Halky Chat. A escada responsiva (abaixo) compacta tudo para
     caber sem rolagem em telas comuns. */
  overflow: hidden;
  transition: padding var(--transition), margin var(--transition);
}

/* A marca (logo) é o gatilho de recolher/expandir a sidebar (botão). */
.sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-4);
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: gap var(--transition), padding var(--transition);
}
.sidebar__brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  transition: max-width var(--transition), opacity var(--transition-fast);
}
.sidebar__brand .brand {
  font-size: var(--fs-xl);
  line-height: 1.05;
  white-space: nowrap;
}
.sidebar__tagline {
  font-size: 10.5px;
  font-weight: var(--fw-medium);
  letter-spacing: .01em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 15rem;
  transition: opacity var(--transition-fast), max-width var(--transition);
}
.sidebar__brand .brand__mark--img { flex: 0 0 auto; transition: width var(--transition), height var(--transition); }
.sidebar__brand .brand__mark--img img { transition: transform var(--transition-fast); }
.sidebar__brand:hover .brand__mark--img img { filter: brightness(1.1); transform: scale(1.04); }

/* ---- Navegação premium (desktop): ícone em círculo neon + nome + descrição ---- */
.hk-side-nav {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Absorve excesso com rolagem invisível (fallback) — sem barra visível. */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.hk-side-nav::-webkit-scrollbar { width: 0; height: 0; }
.hk-side-group-label {
  margin: var(--space-3) var(--space-2) 2px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: .7;
}
.hk-side-divider {
  height: 1px;
  margin: var(--space-2) var(--space-2) 0;
  background: var(--border-color);
  opacity: .6;
}
.hk-side-link {
  --m-accent: var(--color-primary);
  --m-accent-2: var(--color-secondary);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 13px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  color: var(--theme-sidebar-text-color);
  text-decoration: none;
  isolation: isolate;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1),
              background var(--transition-fast),
              border-color var(--transition-fast);
}
.hk-side-link__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--m-accent);
  background: color-mix(in srgb, var(--m-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-accent) 26%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--m-accent) 20%, transparent);
  transition: transform .25s ease, background var(--transition-fast), color var(--transition-fast);
}
.hk-side-link__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  transition: max-width var(--transition), opacity var(--transition-fast);
}
.hk-side-link__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--theme-sidebar-text-active-color, var(--text-primary));
}
.hk-side-link__name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-side-link__desc {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .8;
  transition: opacity var(--transition-fast);
}
.hk-side-link__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-secondary);
  opacity: .45;
  transition: transform var(--transition-fast), opacity var(--transition-fast), color var(--transition-fast);
}
.hk-side-link__badge {
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--m-accent);
  background: color-mix(in srgb, var(--m-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-accent) 28%, transparent);
}
/* Hover (somente itens navegáveis) */
.hk-side-link:not(.is-soon):hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--m-accent) 8%, var(--glass-bg));
  border-color: color-mix(in srgb, var(--m-accent) 28%, transparent);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--m-accent) 16%, transparent);
}
.hk-side-link:not(.is-soon):hover .hk-side-link__icon {
  transform: scale(1.06);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--m-accent) 32%, transparent);
}
.hk-side-link:not(.is-soon):hover .hk-side-link__desc { opacity: 1; }
.hk-side-link:not(.is-soon):hover .hk-side-link__arrow { transform: translateX(4px); opacity: .9; color: var(--m-accent); }
/* Ativo = um ÚNICO card premium (estilo Linear/Arc/Raycast). SEM barra/aresta/
   trilho indicador: a diferenciação vem SÓ da composição — borda roxa + glow
   suave, fundo levemente mais iluminado, ícone com brilho, título branco,
   subtítulo mais claro e elevação discreta. GPU-safe (sem animação; só
   cor/fundo/borda transicionam, herdadas de .hk-side-link). */
.hk-side-link.is-active {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--m-accent) 20%, transparent),
      color-mix(in srgb, var(--m-accent-2) 8%, transparent) 60%,
      transparent),
    var(--glass-bg);
  border-color: color-mix(in srgb, var(--m-accent) 44%, transparent);
  box-shadow:
    0 10px 28px -6px color-mix(in srgb, var(--m-accent) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--m-accent) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 13%, transparent);
}
.hk-side-link.is-active .hk-side-link__icon {
  color: var(--m-on);
  background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2));
  border-color: transparent;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--m-accent) 42%, transparent);
}
.hk-side-link.is-active .hk-side-link__name { color: var(--text-primary); }
.hk-side-link.is-active .hk-side-link__desc { opacity: 1; }
.hk-side-link.is-active .hk-side-link__arrow { color: var(--m-accent); opacity: .9; }
/* Em breve (sem ação) */
.hk-side-link.is-soon { cursor: default; }
.hk-side-link.is-soon .hk-side-link__icon { filter: saturate(.85); }

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-link {
  --m-accent: var(--color-primary);
  --m-accent-2: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--theme-sidebar-text-color);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background var(--transition-fast), color var(--transition-fast), gap var(--transition), padding var(--transition);
  position: relative;
}

.nav-link svg {
  color: var(--theme-sidebar-icon-color);
  flex: 0 0 auto;
  transition: color var(--transition-fast), width var(--transition), height var(--transition);
}

.nav-link:hover {
  background: var(--theme-sidebar-nav-link-hover-bg);
  color: var(--theme-sidebar-text-active-color);
}

.nav-link:hover svg {
  color: var(--m-accent);
}

.nav-link.is-active {
  background: color-mix(in srgb, var(--m-accent) 14%, transparent);
  color: var(--theme-sidebar-text-active-color);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--m-accent) 20%, transparent);
}

.nav-link.is-active svg {
  color: var(--m-accent);
}

/* Contorno em degradê com a cor do MÓDULO ativo, acompanhando o oval
   (border-radius do item) via máscara que deixa só a borda visível. */
.nav-link.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.nav-link__label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
  transition: opacity var(--transition-fast), max-width var(--transition);
}

.nav-link.is-soon {
  opacity: .9;
}

.sidebar__footer {
  margin-top: auto;
  padding: var(--space-4) var(--space-3) var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---- Modo "trilho" (somente ícones), persistido (cookie + localStorage).
   Recolhida: esconde rótulos/marca, centraliza e AUMENTA ícones e logo.
   O recolher/expandir é feito clicando no logo (.sidebar__brand). ---- */
body.is-sidebar-rail .app-shell { --sidebar-w: 100px; }
body.is-sidebar-rail .sidebar { padding-left: var(--space-2); padding-right: var(--space-2); }
body.is-sidebar-rail .sidebar__brand { justify-content: center; gap: 0; padding: var(--space-2) 0 var(--space-4); }
/* Recolhe rótulos/marca suavemente (largura + opacidade) em vez de sumir "no soco". */
body.is-sidebar-rail .sidebar__brand-text,
body.is-sidebar-rail .hk-side-link__text,
body.is-sidebar-rail .hk-side-link__arrow,
body.is-sidebar-rail .sidebar__logout > span:not(.sidebar__logout-icon) {
  max-width: 0;
  opacity: 0;
}
body.is-sidebar-rail .hk-side-group-label,
body.is-sidebar-rail .hk-side-divider { display: none; }
body.is-sidebar-rail .hk-side-link,
body.is-sidebar-rail .sidebar__logout { justify-content: center; gap: 0; padding-left: 6px; padding-right: 6px; }

/* Ícone-círculo e logo MAIORES quando recolhida. */
body.is-sidebar-rail .sidebar__brand .brand__mark--img { width: 60px; height: 60px; }
body.is-sidebar-rail .sidebar__logout-icon svg { width: 24px; height: 24px; }

/* ---------------- Main column ---------------- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ============================================================
   TOP NAVIGATION — barra premium UNIFICADA (padrão de TODO o Halky Web).
   Um único contêiner arredondado e flutuante (não mais "pílulas soltas"):
   gradiente do tema + brilho radial no topo, borda quase invisível, linha de
   brilho na aresta superior, sombra fundida e blur de fundo. As OPÇÕES internas
   mudam conforme o módulo (slot em partials/topbar/*); o ESTILO é o mesmo em
   toda a plataforma. Theme-aware (segue os 21 temas via tokens); no tema padrão
   (Dark Neon Halky) fica roxo, como na referência.
   GPU-safe: só opacity/transform animam; blur e sombra são estáticos.
   IMPORTANTE: sem overflow:hidden — os balões do seletor de motor descem abaixo
   da barra e não podem ser cortados. --header-h (tokens.css) reserva a ALTURA
   TOTAL (72px da barra + 2×16px de margem = 104px) p/ o chat caber. */
.header {
  position: sticky;
  top: 16px;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 72px;
  margin: 16px;
  padding: 0 16px 0 22px;
  border-radius: 34px;
  isolation: isolate;
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--m-accent, var(--color-primary)) 18%, transparent);
  background:
    radial-gradient(140% 130% at 50% -45%,
      color-mix(in srgb, var(--m-accent, var(--color-primary)) 20%, transparent),
      transparent 58%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--m-accent, var(--color-primary)) 10%, var(--theme-sidebar-bg, var(--glass-bg))),
      var(--theme-sidebar-bg, var(--glass-bg)));
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow:
    0 20px 46px -20px color-mix(in srgb, #000 75%, transparent),
    0 6px 16px -10px color-mix(in srgb, var(--m-accent, var(--color-primary)) 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

/* Linha de brilho na aresta superior (estática). Recolhida das pontas p/ não
   vazar nos cantos arredondados. z-index:-1 => acima do fundo, abaixo do
   conteúdo (e dos balões de tooltip). */
.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 2px;
  z-index: -1;
  pointer-events: none;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--m-accent, var(--color-primary)) 75%, #fff),
    transparent);
  opacity: .6;
}

/* Aura que "respira" — camada própria animada SÓ por opacity/transform. */
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(85% 170% at 50% 0%,
    color-mix(in srgb, var(--m-accent, var(--color-primary)) 22%, transparent),
    transparent 56%);
  opacity: .5;
  animation: hkHeaderAura 8s ease-in-out infinite;
}
@keyframes hkHeaderAura {
  0%, 100% { opacity: .4;  transform: translateY(0) scale(1); }
  50%      { opacity: .78; transform: translateY(1px) scale(1.03); }
}

.header__spacer {
  flex: 1 1 auto;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Identidade padrão das páginas SEM slot dedicado: título do módulo + Online. */
.header__identity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.header__title {
  font-family: var(--font-display, var(--font-sans));
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: -.01em;
  color: var(--text-primary);
  white-space: nowrap;
}
.header__tm {
  font-size: .56em;
  vertical-align: super;
  margin-left: 1px;
  font-weight: var(--fw-bold);
  color: var(--m-accent, var(--color-primary));
}

/* Botões de ícone: círculo premium 42px; hover sobe + brilho na cor do tema.
   GPU-safe: o box-shadow do hover NÃO entra na transição (aparece no estalo);
   só transform/cor/fundo/borda animam. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--m-accent, var(--color-primary)) 14%, var(--border-color));
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-card) 50%, transparent);
  color: var(--text-primary);
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.icon-btn:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--m-accent, var(--color-primary)) 16%, transparent);
  border-color: color-mix(in srgb, var(--m-accent, var(--color-primary)) 55%, transparent);
  color: var(--m-accent, var(--color-primary));
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--m-accent, var(--color-primary)) 60%, transparent);
}

.menu-btn {
  display: none;
}

/* Barra com módulo aberto: mantém a cor PADRÃO do tema (brilho/itens seguem
   --m-accent = --color-primary). O motor QuantumMind preserva seu próprio roxo. */
.header--module {
  --m-accent: var(--color-primary);
  --m-accent-2: var(--color-secondary);
}

/* Slot com os controles do módulo dentro da barra única. */
.topbar-mod {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
/* O título e os rótulos do motor são ocultados em telas estreitas pelas media
   queries de chat.css, evitando aperto na barra única. */

.content {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

/* ============================================================
   Transições suaves ao TROCAR DE MÓDULO (página) e na barra superior.
   View Transitions (Chrome/Edge) cruza SÓ o conteúdo central entre páginas,
   mantendo o shell (fundo, sidebar, header) ESTÁVEL — sem "piscar". Nos demais
   navegadores, a animação de entrada dá o mesmo efeito "suave, sem soco". Tudo
   é 100% visual: nenhuma rota, controller ou forma de carregar muda.
   ============================================================ */
@view-transition { navigation: auto; }

/* Duração curta e discreta da troca de página (quase imperceptível). */
:root { --page-transition: 150ms; }

@keyframes app-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes app-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fallback (navegadores SEM View Transitions cruzada): o conteúdo central entra
   em fade curto — só opacidade, sem slide, sem zoom. */
.content { animation: app-enter var(--page-transition) ease both; }
.topbar-mod,
.header__actions { animation: app-fade var(--page-transition) ease both; }

/* Com View Transitions ativas (Chrome/Edge) o cross-fade nativo já cuida da
   entrada: suprimimos a animação de fallback durante a transição para não
   duplicar o efeito. Seletor ignorado (regra descartada) onde não há suporte. */
html:active-view-transition .content,
html:active-view-transition .topbar-mod,
html:active-view-transition .header__actions { animation: none; }

/* Persistir o shell entre páginas: nomear estes elementos (instâncias únicas
   por página) os retira do cross-fade do root, para que NÃO façam repaint/fade
   completo — só o conteúdo central transiciona. */
.hk-ambient { view-transition-name: hk-ambient; }
.sidebar    { view-transition-name: hk-sidebar; }
.header     { view-transition-name: hk-header; }
.content    { view-transition-name: hk-content; }

/* Duração curta e uniforme para toda a transição de página, quando suportada. */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation-duration: var(--page-transition); }

/* Fundo, sidebar e header mantêm-se ESTÁVEIS (sem fade/repaint completo),
   eliminando qualquer "piscar" do shell durante a troca — só o conteúdo central
   transiciona. Como o header é elemento nomeado, seus controles trocam de forma
   instantânea (feel de app desktop nativo: a barra atualiza na hora, o conteúdo
   é que faz a transição). */
::view-transition-group(hk-ambient),
::view-transition-old(hk-ambient),
::view-transition-new(hk-ambient),
::view-transition-group(hk-sidebar),
::view-transition-old(hk-sidebar),
::view-transition-new(hk-sidebar),
::view-transition-group(hk-header),
::view-transition-old(hk-header),
::view-transition-new(hk-header) { animation: none; }

/* Acessibilidade: respeita quem prefere menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .sidebar,
  .sidebar__brand,
  .sidebar__brand .brand,
  .sidebar__brand .brand__mark--img,
  .nav-link,
  .nav-link svg,
  .nav-link__label,
  .hk-side-link,
  .hk-side-link__icon,
  .hk-side-link__arrow,
  .hk-side-link__desc,
  .sidebar__tagline,
  .sidebar__brand-text,
  .sidebar__logout,
  .sidebar__logout > span:not(.sidebar__logout-icon),
  .sidebar__logout-icon svg { transition: none; }
  .content,
  .topbar-mod,
  .header__actions { animation: none; }
  .header::after { animation: none !important; }
  .home-modules,
  .home-card { animation: none !important; }
  .home-card__bar { transition: none; }
  .sidebar { animation: none !important; }
  .hk-side-link:not(.is-soon):hover,
  .hk-side-link:not(.is-soon):hover .hk-side-link__icon,
  .hk-side-link:not(.is-soon):hover .hk-side-link__arrow,
  .sidebar__brand:hover .brand__mark--img img { transform: none !important; }
  .sidebar__brand .brand__mark--img img { transition: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------------- Mobile bottom nav ---------------- */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--mobilenav-h);
  z-index: var(--z-header);
  padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--theme-sidebar-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: var(--theme-glass-border);
}

.mobile-nav__list {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 100%;
}

.mobile-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1 1 0;
  width: 100%;
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  color: var(--theme-sidebar-text-color);
  font-size: 10px;
  font-weight: var(--fw-medium);
}

.mobile-nav__item svg {
  color: var(--theme-sidebar-icon-color);
}

.mobile-nav__item.is-active,
.mobile-nav__item.is-active svg {
  color: var(--color-primary);
}

/* ---------------- Drawers (temas / nav) ---------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  pointer-events: none;
  visibility: hidden;
}

.drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity var(--transition);
}

.drawer.is-open .drawer-scrim {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-slow);
}

.drawer--right .drawer__panel {
  right: 0;
  border-left: var(--theme-glass-border);
  transform: translateX(100%);
}

.drawer--left .drawer__panel {
  left: 0;
  border-right: var(--theme-glass-border);
  transform: translateX(-100%);
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: var(--theme-glass-border);
}

.drawer__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  flex: 1 1 auto;
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-5);
}

body.drawer-open {
  overflow: hidden;
}

/* The left drawer (nav) only exists for small screens. */
#sidebar-drawer {
  display: none;
}

/* ---------------- Responsivo ---------------- */
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
  }

  #sidebar-drawer {
    display: block;
  }

  .content {
    padding: var(--space-6) var(--space-4) calc(var(--mobilenav-h) + var(--space-10));
  }

  .mobile-nav {
    display: block;
  }
}

@media (max-width: 560px) {
  .header {
    padding: 0 var(--space-4);
  }

  .content {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* ---------------- Marca (logo oficial), Sair, avatar e Platinum ---------------- */
.brand__mark.brand__mark--img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 57px;
  height: 57px;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.brand__mark--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand__mark.brand__mark--img.brand__mark--sm { width: 28px; height: 28px; }

.sidebar__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border: var(--theme-glass-border);
  background: var(--surface-card);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), gap var(--transition), padding var(--transition);
}
.sidebar__logout > span:not(.sidebar__logout-icon) {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  max-width: 14rem;
  transition: opacity var(--transition-fast), max-width var(--transition);
}
.sidebar__logout-icon { display: inline-flex; flex-shrink: 0; }
.sidebar__logout-icon svg { transition: width var(--transition), height var(--transition); }
.sidebar__logout:hover {
  color: #ef4444;
  border-color: color-mix(in srgb, #ef4444 50%, transparent);
  background: color-mix(in srgb, #ef4444 10%, transparent);
}
.sidebar__logout--drawer { margin-top: var(--space-4); }

.avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  background: var(--surface-card);
  /* GPU-safe: box-shadow fora da transição (estala); só transform/borda animam. */
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-btn:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

/* Variante do canto direito: só o logo oficial, maior e sem o fundo redondo. */
.avatar-btn--logo {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.avatar-btn--logo img { object-fit: contain; }
.avatar-btn--logo:hover {
  transform: translateY(-1px);
  box-shadow: none;
  filter: brightness(1.08);
}

/* Botão Platinum — vidro moderno THEME-AWARE.
   O texto/ícone usam a COR do tema (a "cor da letra do Platinum") e o fundo é um
   vidro translúcido com leve tom do acento. Como o acento SEMPRE contrasta com o
   fundo da página (que aparece através do vidro), o rótulo continua legível em
   todos os 21 temas — claros, escuros e o OLED (que antes ficava branco-no-branco,
   pois o antigo fundo era um gradiente sólido do acento #fff com texto #fff). */
.plan-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
  white-space: nowrap;
  isolation: isolate;
  /* Rótulo na COR DE TEXTO do tema (ink do tema, NÃO o acento) = projetado para
     legibilidade (alvo AA) em temas claros/escuros/OLED, evitando o branco-no-branco.
     O acento (cor da marca "Platinum") fica só no vidro, borda, brilho e coroa. */
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  backdrop-filter: blur(10px) saturate(135%);
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--color-primary) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
  /* GPU-safe: NÃO animar box-shadow/backdrop-filter (eles "snapam" no hover);
     só transform/fundo/borda transicionam. */
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}
/* Coroa na cor do acento = destaque de marca "Platinum" (decorativa, ao lado do
   rótulo legível). currentColor do SVG passa a ser o acento, não o texto. */
.plan-pill svg { color: var(--color-primary); }

/* Hover/foco: o vidro "enche" com MAIS do acento (a cor Platinum), mas o rótulo
   segue na cor de texto do tema — contraste preservado em qualquer tema. */
.plan-pill:hover,
.plan-pill:focus-visible {
  transform: translateY(-1px);
  background-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 58%, transparent);
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--color-primary) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}

@media (max-width: 560px) {
  .plan-pill__label { display: none; }
  .plan-pill { padding: 0 12px; }
}

/* Botão Platinum: no hover/foco troca o rótulo "Platinum" por "N dias restantes",
   mantendo o MESMO botão (cor, formato e ícone) — sem balão/tooltip. */
.plan-pill__label--alt { display: none; }
.plan-pill:hover .plan-pill__label--default,
.plan-pill:focus-visible .plan-pill__label--default { display: none; }
.plan-pill:hover .plan-pill__label--alt,
.plan-pill:focus-visible .plan-pill__label--alt { display: inline-flex; }

/* Em telas estreitas o botão fica só com o ícone (coroa); a troca de rótulo no
   hover/foco NÃO deve reaparecer e estourar o cabeçalho (inclusive via teclado).
   Regra depois do swap = vence por ordem de origem (mesma especificidade). */
@media (max-width: 560px) {
  .plan-pill:hover .plan-pill__label--default,
  .plan-pill:focus-visible .plan-pill__label--default,
  .plan-pill:hover .plan-pill__label--alt,
  .plan-pill:focus-visible .plan-pill__label--alt { display: none; }
}

/* ============================================================
   HOME V3 — Escada responsiva da SIDEBAR (sem rolagem).
   A sidebar tem 14 linhas (Início + 11 módulos + 2 utilitários) + 2 rótulos +
   divisor + marca + rodapé. Para caber sem barra de rolagem, compactamos
   progressivamente ícones/paddings/espaços conforme a LARGURA (1600/1400/1200/
   1080 — pontos pedidos) OU a ALTURA disponível (telas baixas de notebook). A
   vírgula em @media = OU lógico: qualquer condição ativa o nível. Níveis em
   ordem crescente de compactação → o mais agressivo (último) vence quando vários
   casam. Apêndice no fim do arquivo p/ vencer a ordem de origem (ex.: o tamanho
   fixo da marca definido mais acima). Só vale no desktop (>1024px); abaixo disso
   a sidebar vira drawer. NÃO afeta o modo trilho (regras body.is-sidebar-rail
   têm especificidade maior). GPU-safe: só dimensões/espaços, nada de animação.
   ============================================================ */

/* Nível A — desktops/notebooks comuns */
@media (max-width: 1600px), (max-height: 1000px) {
  .hk-side-nav { gap: 4px; }
  .hk-side-link { padding: 8px 12px; }
  .hk-side-link__icon { width: 42px; height: 42px; }
  .hk-side-group-label { margin-top: var(--space-2); }
  .sidebar__brand { padding-bottom: var(--space-3); }
  .sidebar__footer { padding-top: var(--space-3); }
}

/* Nível B — notebooks (esconde subtítulo da marca, encolhe ícones) */
@media (max-width: 1400px), (max-height: 920px) {
  .hk-side-nav { gap: 3px; }
  .hk-side-link { padding: 7px 12px; }
  .hk-side-link__icon { width: 40px; height: 40px; border-radius: 13px; }
  .hk-side-link__desc { font-size: 10.5px; }
  .sidebar__tagline { display: none; }
  .sidebar__brand { padding-bottom: var(--space-2); }
}

/* Nível C — esconde os subtítulos das linhas + encolhe a marca */
@media (max-width: 1200px), (max-height: 840px) {
  .hk-side-link__desc { display: none; }
  .hk-side-link__icon { width: 38px; height: 38px; }
  .hk-side-link { padding: 7px 11px; }
  .hk-side-group-label { margin-top: 6px; font-size: 9.5px; }
  .hk-side-divider { margin-top: 6px; }
  .sidebar__brand .brand__mark--img,
  .sidebar__brand .brand__mark--img img { width: 48px; height: 48px; }
}

/* Nível D — notebooks baixos (1080p / 768px de altura) */
@media (max-width: 1080px), (max-height: 760px) {
  .hk-side-nav { gap: 2px; }
  .hk-side-link { padding: 6px 10px; }
  .hk-side-link__icon { width: 34px; height: 34px; border-radius: 11px; }
  .sidebar__brand { padding-bottom: var(--space-1); }
  .sidebar__footer { padding-top: var(--space-2); }
  .sidebar__brand .brand__mark--img,
  .sidebar__brand .brand__mark--img img { width: 42px; height: 42px; }
}

/* Nível E — telas MUITO baixas: remove rótulos de grupo e divisor */
@media (max-height: 680px) {
  .hk-side-link__icon { width: 32px; height: 32px; }
  .hk-side-link { padding: 5px 10px; }
  .hk-side-group-label,
  .hk-side-divider { display: none; }
}