/* Independent backdrop planes: the existing navigation stays above both.
   No scroll listeners, animated filters, or permanent will-change layers. */
@media (max-width: 991px) {
  body > .nav-fixed-wrapper {
    --nav-backdrop-rgb: 245, 247, 250;
    --nav-backdrop-bottom: calc(-26px - env(safe-area-inset-bottom, 0px));
    bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important;
  }

  :root.dark body > .nav-fixed-wrapper {
    --nav-backdrop-rgb: 15, 19, 25;
  }

  body > .nav-fixed-wrapper::before,
  body > .nav-fixed-wrapper::after {
    content: "";
    position: absolute;
    top: -24px;
    bottom: var(--nav-backdrop-bottom);
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
  }

  /* Graceful fade for browsers without backdrop filtering or masks. */
  body > .nav-fixed-wrapper::before {
    z-index: -2;
    background: linear-gradient(to bottom,
      rgba(var(--nav-backdrop-rgb), 0) 0%,
      rgba(var(--nav-backdrop-rgb), 0.08) 35%,
      rgba(var(--nav-backdrop-rgb), 0.35) 70%,
      rgba(var(--nav-backdrop-rgb), 0.55) 100%);
  }

  body > .nav-fixed-wrapper::after {
    z-index: -1;
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
    and ((mask-image: linear-gradient(black, transparent)) or (-webkit-mask-image: linear-gradient(black, transparent))) {
    /* First plane softly introduces blur above the floating bar. */
    body > .nav-fixed-wrapper::before {
      background: linear-gradient(to bottom,
        rgba(var(--nav-backdrop-rgb), 0),
        rgba(var(--nav-backdrop-rgb), 0.06));
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
      -webkit-mask-image: linear-gradient(to bottom, transparent, black 44px);
      mask-image: linear-gradient(to bottom, transparent, black 44px);
    }

    /* Keep the content above the bar clear. The stronger plane peaks
       below the bar's midpoint, then continues through the safe area. */
    body > .nav-fixed-wrapper::after {
      background: linear-gradient(to bottom,
        rgba(var(--nav-backdrop-rgb), 0) 0%,
        rgba(var(--nav-backdrop-rgb), 0.12) 64px,
        rgba(var(--nav-backdrop-rgb), 0.28) 100%);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      -webkit-mask-image: linear-gradient(to bottom, transparent 16px, black 64px);
      mask-image: linear-gradient(to bottom, transparent 16px, black 64px);
    }
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* Frost only what is behind the bar; its children remain unfiltered.
       Keep the established border, radius, colors, and selected pill. */
    body > .nav-fixed-wrapper .bottom-nav {
      background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.62) !important;
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      backdrop-filter: blur(14px) saturate(140%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -1px 0 rgba(15, 23, 42, 0.035),
        0 16px 28px -12px rgba(15, 23, 42, 0.12) !important;
    }

    :root.dark body > .nav-fixed-wrapper .bottom-nav {
      background: linear-gradient(to bottom,
        rgba(157, 180, 212, 0.075), rgba(157, 180, 212, 0)),
        rgba(20, 20, 28, 0.56) !important;
      box-shadow: inset 0 1px 0 rgba(157, 180, 212, 0.18),
        inset 0 -1px 0 rgba(157, 180, 212, 0.035),
        0 16px 28px -12px rgba(0, 0, 0, 0.5) !important;
    }
  }
}