/* Bottom Nav Glass/Neon skin.
   WHY: Isolated visual override for the mobile dock. Remove this link to
   return to the previous nav without touching routing or app state. */

@media (max-width: 600px) {
  #mobile-bottom-nav {
    left: 10px;
    right: 10px;
    bottom: calc(var(--mobile-nav-lift, 0px) + 8px);
    height: 62px;
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 5px 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 230, 118, .28);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(20, 28, 36, .72), rgba(5, 9, 13, .88)),
      radial-gradient(circle at 18% 0%, rgba(64, 196, 255, .22), transparent 38%),
      radial-gradient(circle at 82% 100%, rgba(0, 230, 118, .2), transparent 42%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .06) inset,
      0 -10px 34px rgba(0, 230, 118, .15),
      0 18px 42px rgba(0, 0, 0, .55);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
  }

  #mobile-bottom-nav::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(64, 196, 255, .8), rgba(0, 230, 118, .85), transparent);
    opacity: .75;
    pointer-events: none;
  }

  #mobile-bottom-nav::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 19px;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .08) 45%, transparent 70%);
    transform: translateX(-70%);
    animation: bottomNavSweep 5.4s ease-in-out infinite;
    pointer-events: none;
  }

  #mobile-bottom-nav button {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    min-height: 0;
    padding: 4px 0 5px;
    border: 0;
    border-radius: 15px;
    color: rgba(136, 153, 170, .82);
    background: transparent;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    transition: color .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease;
  }

  #mobile-bottom-nav button .mbn-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-bottom: 2px;
    border-radius: 12px;
    font-size: 1.12rem;
    line-height: 1;
    background: rgba(255, 255, 255, .035);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .055) inset;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, filter .18s ease;
  }

  #mobile-bottom-nav button.on {
    color: #f0fff7;
    background:
      linear-gradient(180deg, rgba(0, 230, 118, .2), rgba(0, 230, 118, .08)),
      radial-gradient(circle at 50% 0%, rgba(64, 196, 255, .2), transparent 62%);
    box-shadow:
      0 0 0 1px rgba(0, 230, 118, .34) inset,
      0 0 18px rgba(0, 230, 118, .18);
  }

  #mobile-bottom-nav button.on .mbn-icon {
    transform: translateY(-1px) scale(1.04);
    background: rgba(0, 230, 118, .16);
    box-shadow:
      0 0 0 1px rgba(0, 230, 118, .45) inset,
      0 0 16px rgba(0, 230, 118, .38),
      0 0 24px rgba(64, 196, 255, .16);
    filter: saturate(1.2);
  }

  #mobile-bottom-nav button:active {
    transform: translateY(1px) scale(.98);
  }

  body::after,
  body.mobile-first::after {
    bottom: var(--mobile-nav-lift, 0px);
    height: 88px;
    background: linear-gradient(180deg, rgba(8, 12, 16, 0) 0%, rgba(8, 12, 16, .92) 54%, rgba(8, 12, 16, .98) 100%);
  }
}

@keyframes bottomNavSweep {
  0%, 46%, 100% { transform: translateX(-72%); opacity: 0; }
  58% { opacity: .75; }
  78% { transform: translateX(72%); opacity: 0; }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  #mobile-bottom-nav::after { animation: none; opacity: 0; }
  #mobile-bottom-nav button,
  #mobile-bottom-nav button .mbn-icon { transition-duration: .01ms; }
}