/* ─── custom scrollbar ─── */
:root {
  scrollbar-width: thin;
  scrollbar-color: rgba(157, 111, 255, 0.35) transparent;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(157, 111, 255, 0.35);
  border-radius: 9999px;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(157, 111, 255, 0.65);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Persistent wave canvas — fixed full-screen background */
wave-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
}

/* App shell — content layer above canvas */
#app {
  position: relative;
  z-index: var(--z-content);
  min-height: 100vh;
}

/* Nav sits above everything */
app-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
}

/* Footer */
app-footer {
  position: relative;
  z-index: var(--z-content);
}