/* ==========================================================================
   YUKIMUSIC LIQUID GLASS SKIN
   Pairs with liquid-glass.js. Look: clear body, bright rim lit at the
   top-left and bottom-right corners, soft white inner glow at the edges,
   faint edge refraction (Chromium) or frost (other engines).

   NOTE: a refracting element (.lg-refractive under .lg-refract) must not
   paint outside its border box (outer box-shadow, overflowing children,
   outlines). Chrome offsets the backdrop-filter coordinate space by that
   ink overflow and the refraction map lands in the wrong place, so they
   get inset shadows only.
   ========================================================================== */
:root {
  --lg-fill: rgba(255, 255, 255, 0.025);
  --lg-fill-top: rgba(255, 255, 255, 0.05);
  /* Rim: bright at top-left and bottom-right, dim along the sides. */
  --lg-rim: linear-gradient(135deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.04) 28%,
      rgba(255, 255, 255, 0.04) 72%,
      rgba(255, 255, 255, 0.28) 100%);
  /* Lit rim + inner glow, drawn inside the box: bright hairline on the
     top-left and bottom-right edges, soft glow just inside them. */
  --lg-edge: transparent;
  --lg-glow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.05),
    inset 0.5px 0.5px 0 0 rgba(255, 255, 255, 0.28),
    inset -0.5px -0.5px 0 0 rgba(255, 255, 255, 0.28);
  --lg-drop: 0 8px 24px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
  --lg-blur: blur(4px) saturate(150%);
}

/* ---- Base glass ---- */
.app-viewport .lg-glass {
  border: 0.5px solid var(--lg-edge);
  background: linear-gradient(180deg, var(--lg-fill-top), var(--lg-fill));
  box-shadow: var(--lg-glow), var(--lg-drop);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  transition: transform 0.35s var(--ease-bounce), background 0.25s ease, box-shadow 0.25s ease, color 0.2s ease;
}

/* Refracting glass: no outer shadow (see note above). */
.lg-refract .app-viewport .lg-refractive {
  box-shadow: var(--lg-glow);
}

.app-viewport .lg-refractive:focus-visible { outline: none; }

.app-viewport button.lg-glass:active,
.app-viewport .chip.lg-glass:active,
.app-viewport .search-tab-pill.lg-glass:active {
  transform: scale(0.95);
}

/* Selected chips / tabs: brighter, milkier glass. */
.app-viewport .lg-glass.active {
  --lg-fill: rgba(255, 255, 255, 0.20);
  --lg-fill-top: rgba(255, 255, 255, 0.28);
  color: var(--text-primary);
}

/* ---- Large surfaces: a little more body so text over busy art stays readable ---- */
.app-viewport .bottom-nav-container .nav-pill.lg-glass,
.app-viewport .mini-player.lg-glass,
.app-viewport .player-tabs-pill.lg-glass {
  --lg-fill: rgba(10, 12, 16, 0.55);
  --lg-fill-top: rgba(22, 24, 30, 0.50);
  --lg-blur: blur(7px) saturate(170%);
}

.app-viewport .mini-player.lg-glass { border-radius: 22px; }

.app-viewport .pit-board-drawer.lg-glass {
  --lg-fill: rgba(14, 17, 23, 0.82);
  --lg-fill-top: rgba(24, 28, 36, 0.82);
  --lg-blur: blur(14px) saturate(180%);
  /* Sheet rising from the bottom edge: only the top edge catches light. */
  border: none;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.4), 0 -15px 40px rgba(0, 0, 0, 0.7);
}

.app-viewport .search-input.lg-glass:focus {
  --lg-edge: color-mix(in srgb, var(--accent) 70%, transparent);
}

/* Glass inputs form a stacking context; keep the icon/clear button above them. */
.search-input-wrap .search-input-icon,
.search-input-wrap .search-clear-btn { z-index: 1; }

/* Active tab inside the player tabs pill: an inner glass bead. */
.app-viewport .player-tabs-pill.lg-glass .player-tab-btn.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12));
  box-shadow:
    inset 0.5px 0.5px 0 0 rgba(255, 255, 255, 0.6),
    inset -0.5px -0.5px 0 0 rgba(255, 255, 255, 0.4);
}

/* Solid / filled buttons keep their fill; the lit rim is a masked overlay. */
.app-viewport :is(.auth-btn, .context-btn.primary, .play-pause-circle, .user-profile-btn) {
  position: relative;
}
.app-viewport :is(.auth-btn, .context-btn.primary, .play-pause-circle, .user-profile-btn)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.5px;
  background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  box-shadow: none;
  pointer-events: none;
}
.app-viewport .user-profile-btn { border-color: transparent; }

/* ==========================================================================
   BOTTOM NAV — liquid selection lens
   ========================================================================== */
.bottom-nav-container .nav-pill {
  position: relative;
  touch-action: none;
}

.nav-lens {
  position: absolute; /* geometry set by fitLens() */
  top: 0;
  left: 0;
  height: 48px;
  width: 68px;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 2;
  transform-origin: center;
  will-change: transform;
  scale: 1 1;
  transition: scale 0.45s var(--ease-bounce), opacity 0.25s ease, box-shadow 0.3s ease;
}

/* A clear glass bead over the active tab — must not frost the icon under it. */
.app-viewport .nav-lens {
  --lg-fill: rgba(255, 255, 255, 0.07);
  --lg-fill-top: rgba(255, 255, 255, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--lg-glow);
}
/* While held it refracts (filter set inline by the JS), so drop the tint. */
.lg-refract .app-viewport .nav-lens.lifted {
  --lg-fill: rgba(255, 255, 255, 0.03);
  --lg-fill-top: rgba(255, 255, 255, 0.08);
}

.nav-lens.hidden { opacity: 0; }

/* Pressed / dragged: the droplet swells. */
.nav-lens.lifted { scale: 1.12 1.1; }

.bottom-nav-container .nav-item.lens-over { color: var(--text-primary); }
.bottom-nav-container .nav-item.active svg { transform: none; }
.bottom-nav-container .nav-item svg { transition: transform 0.35s var(--ease-bounce); }
.bottom-nav-container .nav-item.lens-over svg { transform: scale(1.12); }

@media (prefers-reduced-motion: reduce) {
  .nav-lens, .app-viewport .lg-glass { transition: none; }
}