/* Liquid Glass — Apple-style refractive glass treatment.
   Loaded after every other stylesheet so it re-skins the existing
   glass surfaces. Uses only layered backgrounds + inset shadows
   (no pseudo-elements) to avoid colliding with per-component styles. */

/* ── Utility class ───────────────────────────────────────────── */
.liquid-glass,
.glass {
  background:
    var(--lg-sheen),
    linear-gradient(var(--lg-tint), var(--lg-tint));
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--border-glass);
  box-shadow: var(--lg-rim), var(--lg-shadow);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  background:
    var(--lg-sheen),
    linear-gradient(var(--lg-tint-heavy), var(--lg-tint-heavy));
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  /* Specular rim only on the inner (right) edge — the others touch the viewport */
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.07);
}

.nav-item.active,
.nav-item:hover {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.nav-item.active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

/* ── Mobile header ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-header {
    background:
      var(--lg-sheen),
      linear-gradient(var(--lg-tint-heavy), var(--lg-tint-heavy));
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  }
}

/* ── Floating panels: toasts, command palette ────────────────── */
.toast,
.cmdk-panel {
  background:
    var(--lg-sheen),
    linear-gradient(var(--lg-tint), var(--lg-tint));
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-rim), var(--shadow-modal);
}
.toast { border-left: 3px solid var(--accent); }
.toast-success { border-left-color: #34d399; }
.toast-error   { border-left-color: #f87171; }
.toast-warning { border-left-color: #fbbf24; }

/* ── Pills & capsule buttons ─────────────────────────────────── */
.pill {
  background:
    var(--lg-sheen),
    linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  transition: background var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast);
}
.pill:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.35);
}
.pill.active {
  background:
    var(--lg-sheen),
    linear-gradient(var(--accent-subtle), var(--accent-subtle));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 16px var(--accent-glow);
}

/* ── Player chrome ───────────────────────────────────────────── */
.skip-segment-btn {
  background:
    var(--lg-sheen),
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border-radius: var(--radius-full);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 4px 18px rgba(0, 0, 0, 0.4);
}

/* ── Primary buttons get a glass sheen over the accent fill ──── */
.btn-primary,
.empty-state-action {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.00) 50%),
    var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 2px 12px var(--accent-glow);
}
.btn-primary:hover,
.empty-state-action:hover {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.00) 50%),
    var(--accent-hover);
}
.btn-primary:active {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 50%),
    var(--accent-pressed);
}

/* ── Modals & dialogs ────────────────────────────────────────── */
/* Heavier tint than panels — these hold dense text and must stay readable. */
.tr-modal,
.brand-modal {
  background:
    var(--lg-sheen),
    linear-gradient(var(--lg-tint-heavy), var(--lg-tint-heavy));
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--border-glass);
  box-shadow: var(--lg-rim), var(--shadow-modal);
}

/* Deepen the dimming layers behind modals so the glass has something to refract */
.tr-modal-overlay,
.brand-modal-overlay,
.detail-backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Detail sheet close button — frosted circle */
.detail-close {
  background:
    var(--lg-sheen),
    linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10));
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Hide scrollbars inside modals (scrolling still works) */
.detail-sheet,
.tr-modal-bd,
.brand-modal,
.cmdk-results {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* legacy Edge */
}
.detail-sheet::-webkit-scrollbar,
.tr-modal-bd::-webkit-scrollbar,
.brand-modal::-webkit-scrollbar,
.cmdk-results::-webkit-scrollbar {
  display: none;               /* Chrome / Safari / Tizen */
}

/* ── Popovers & floating menus ───────────────────────────────── */
.audio-track-menu {
  background:
    var(--lg-sheen),
    linear-gradient(var(--lg-tint-heavy), var(--lg-tint-heavy));
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--border-glass);
  box-shadow: var(--lg-rim), var(--lg-shadow);
}

.sp-toast {
  background:
    var(--lg-sheen),
    linear-gradient(var(--lg-tint), var(--lg-tint));
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--border-glass);
  box-shadow: var(--lg-rim), var(--lg-shadow);
}

/* ── Inputs ──────────────────────────────────────────────────── */
.notif-input,
.cmdk-input-wrap {
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}

/* ── Fallback: no backdrop-filter support ────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass,
  .glass,
  .toast,
  .cmdk-panel,
  .tr-modal,
  .brand-modal,
  .audio-track-menu,
  .sp-toast {
    background: var(--bg-secondary);
  }
  .sidebar,
  .mobile-header {
    background: var(--bg-primary);
  }
}

/* ── Respect reduced transparency ────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .liquid-glass,
  .glass,
  .sidebar,
  .mobile-header,
  .toast,
  .cmdk-panel,
  .tr-modal,
  .brand-modal,
  .audio-track-menu,
  .sp-toast,
  .pill,
  .skip-segment-btn {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg-secondary);
  }
}