/*
 * Sidebar ↔ main: atmospheric edge (not a divider strip).
 * Loaded after style.css so these rules own .app-sidebar::after.
 */

.app-sidebar::after {
  content: "";
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: 12%;
  right: 0;
  pointer-events: none;
  z-index: 0;
  /* Brand wash (top) + darker navy veil (below) = slightly richer fade into main */
  background:
    radial-gradient(
      ellipse 125% 105% at 94% 48%,
      color-mix(in srgb, var(--brand-purple) 7%, transparent) 0%,
      color-mix(in srgb, var(--brand-magenta) 4%, transparent) 28%,
      color-mix(in srgb, var(--brand-cyan) 2.5%, transparent) 48%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 100% 120% at 100% 50%,
      rgba(2, 4, 12, 0.52) 0%,
      rgba(4, 6, 16, 0.24) 36%,
      rgba(6, 9, 20, 0.07) 58%,
      transparent 82%
    );
  filter: blur(38px);
  -webkit-filter: blur(38px);
  opacity: 0.5;
  transform: scale(1.08);
  transform-origin: 100% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar::after {
    transform: none;
  }
}

/* Drawer: keep glow inside panel width; slightly softer */
@media (max-width: 959px) {
  .app-sidebar::after {
    left: 8%;
    opacity: 0.42;
    filter: blur(30px);
    -webkit-filter: blur(30px);
    transform: scale(1.05);
    background:
      radial-gradient(
        ellipse 120% 100% at 92% 48%,
        color-mix(in srgb, var(--brand-purple) 6%, transparent) 0%,
        color-mix(in srgb, var(--brand-magenta) 3.5%, transparent) 30%,
        transparent 76%
      ),
      radial-gradient(
        ellipse 95% 115% at 100% 50%,
        rgba(2, 4, 12, 0.48) 0%,
        rgba(4, 6, 16, 0.18) 40%,
        transparent 80%
      );
  }
}