/* ================================================================
   Chirag's Music — Web Player Styles v3
   Apple-inspired dark theme with fluid motion
   Guided by ui.md design principles
   ================================================================ */

*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg:           #000000;
  --surface:      #0A0A0A;
  --surface2:     #111111;
  --surface3:     #1A1A1A;
  --border:       #1C1C1C;
  --border-light: #2A2A2A;
  --text:         #F5F5F5;
  --text-muted:   #999999;
  --text-subtle:  #555555;
  --accent:       #FFFFFF;
  --accent-glow:  rgba(255,255,255,0.06);
  --green:        #1DB954;
  --green-dim:    rgba(29,185,84,0.15);
  --red:          #EF4444;
  --heart:        #FF2D55;
  --blue:         #0A84FF;
  --glass:        rgba(12,12,12,0.82);
  --glass-border: rgba(255,255,255,0.06);
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;
  --font:         'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --tab-bar-h:    60px;
  --player-bar-h: 64px;

  /* ── Design-token easing (from ui.md) ─────────────────────── */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

html, body {
  height: 100%;
  height: 100dvh; /* real mobile viewport height — 100% tracks the layout viewport, which sits behind the browser's address/toolbar and pushes fixed bottom bars off-screen */
  background: var(--bg); color: var(--text);
  font-family: var(--font); -webkit-font-smoothing: antialiased;
  overflow: hidden; overscroll-behavior: none; touch-action: manipulation;
}

.hidden { display: none !important; }

/* ── Tab Pages ─────────────────────────────────────────────────── */
.tab-page {
  display: none;
  flex-direction: column;
  height: calc(100% - var(--tab-bar-h) - var(--safe-bottom));
  padding-top: var(--safe-top);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tab-page.active { display: flex; }

/* ── Page Header ───────────────────────────────────────────────── */
.page-header {
  padding: 20px 20px 10px;
  flex-shrink: 0;
}
.page-header h1 {
  font-size: 30px; font-weight: 800;
  letter-spacing: -1px; color: var(--text);
  line-height: 1.05;
}

/* ── Bottom Tab Bar ────────────────────────────────────────────── */
#tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  background: var(--glass);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border-top: 1px solid var(--glass-border);
  padding-bottom: var(--safe-bottom);
  height: calc(var(--tab-bar-h) + var(--safe-bottom));
}
.tab-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; background: none; border: none; cursor: pointer;
  color: var(--text-subtle);
  transition: color 200ms var(--ease-out), transform 120ms var(--ease-out);
  font-family: var(--font); padding: 6px 0;
}
.tab-btn:active { transform: scale(0.92); }
.tab-btn.active { color: var(--text); }
.tab-btn svg { width: 22px; height: 22px; }
.tab-btn span { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; }

/* Mini player stacks ON TOP of the tab bar (it is anchored above it), so the tab
   bar itself never moves — only the scroll area gets shorter. */
body.has-player .tab-page {
  height: calc(100% - var(--tab-bar-h) - var(--safe-bottom) - var(--player-bar-h));
}

/* ── Search ────────────────────────────────────────────────────── */
#search-container { padding: 4px 20px 12px; flex-shrink: 0; }
#search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0 14px; height: 44px;
  transition: border-color 250ms var(--ease-out), background 250ms var(--ease-out);
}
#search-box:focus-within { border-color: var(--border-light); background: var(--surface3); }
.icon-sm { width: 18px; height: 18px; color: var(--text-subtle); flex-shrink: 0; }
#search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 16px; font-family: var(--font); caret-color: var(--text);
}
#search-input::placeholder { color: var(--text-subtle); }
#search-clear {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--text-subtle);
  transition: color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
#search-clear:active { transform: scale(0.85); }
#search-clear svg { width: 18px; height: 18px; }

/* ── Search History Chips ──────────────────────────────────────── */
#search-history { padding: 0 20px 12px; flex-shrink: 0; }
#search-history-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
#search-history-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.history-chip {
  background: var(--surface3); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 6px 14px;
  font-size: 13px; color: var(--text-muted); cursor: pointer;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out), transform 120ms var(--ease-out);
  font-family: var(--font);
}
.history-chip:active { background: var(--border-light); color: var(--text); transform: scale(0.95); }

/* ── Section Headers ───────────────────────────────────────────── */
.section-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px 10px;
}
.section-label {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.text-btn {
  background: none; border: none; cursor: pointer;
  color: var(--blue); font-size: 13px; font-weight: 600;
  font-family: var(--font);
  transition: opacity 150ms, transform 120ms var(--ease-out);
}
.text-btn:active { opacity: 0.6; transform: scale(0.95); }

/* ── Loading / Error ───────────────────────────────────────────── */
#loading { display: flex; justify-content: center; padding: 40px 0; }
.loading-container {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.loading-bars {
  display: flex; align-items: flex-end; gap: 4px; height: 28px;
}
.loading-bars span {
  display: block; width: 4px; border-radius: 2px;
  background: var(--accent);
  animation: loadingBar 1s ease-in-out infinite;
}
.loading-bars span:nth-child(1) { height: 10px; animation-delay: 0s; }
.loading-bars span:nth-child(2) { height: 18px; animation-delay: 0.15s; }
.loading-bars span:nth-child(3) { height: 24px; animation-delay: 0.3s; }
.loading-bars span:nth-child(4) { height: 14px; animation-delay: 0.45s; }
@keyframes loadingBar {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}
.loading-text {
  font-size: 13px; color: var(--text-muted);
  letter-spacing: 0.5px; font-weight: 500;
}
.spinner {
  width: 24px; height: 24px; border: 2px solid var(--border);
  border-top-color: var(--text-muted); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#error-banner {
  margin: 0 20px 12px; padding: 10px 14px;
  background: #1A0A0A; border: 1px solid #3F1515;
  border-radius: var(--radius-sm); color: var(--red); font-size: 14px;
  animation: fadeIn 250ms var(--ease-out);
}

/* ── Track List Items ──────────────────────────────────────────── */
.track-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px; cursor: pointer;
  transition: background 200ms var(--ease-out), transform 120ms var(--ease-out);
  user-select: none; -webkit-user-select: none;
  position: relative;
  /* Stagger entrance */
  opacity: 0; animation: trackEnter 350ms var(--ease-out) forwards;
}
.track-item:active { background: var(--accent-glow); transform: scale(0.98); }

@keyframes trackEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.track-artwork {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--surface2); flex-shrink: 0;
}
.track-info { flex: 1; min-width: 0; }
.track-title {
  font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.2px;
  transition: color 200ms var(--ease-out);
}
.track-title.is-playing { color: var(--green); }
/* Artist + duration share one line so the whole right-hand duration column can go,
   giving the title back more room than the 44px tap targets took. */
.track-meta {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 2px; min-width: 0;
}
.track-artist {
  font-size: 13px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.05px; min-width: 0;
}
.track-duration {
  font-size: 12px; color: var(--text-subtle);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.track-meta-dot { color: var(--text-subtle); font-size: 12px; flex-shrink: 0; }
.track-actions { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.track-action-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-subtle); padding: 0;
  /* 44px is Apple's minimum tap target; the icon inside stays 18px */
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  transition: color 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.track-action-btn:active { transform: scale(0.8); }
.track-action-btn svg { width: 18px; height: 18px; }
.track-action-btn.liked svg { fill: var(--heart); stroke: var(--heart); color: var(--heart); }
.track-action-btn.downloaded svg { color: var(--green); }

/* Like button pop animation */
.track-action-btn.like-pop {
  animation: likePop 400ms var(--ease-spring);
}
@keyframes likePop {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ── Recents horizontal scroll ─────────────────────────────────── */
#recents-section { padding-bottom: 20px; }
#recents-list {
  display: flex; gap: 14px; overflow-x: auto;
  padding: 0 20px 8px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#recents-list::-webkit-scrollbar { display: none; }
.recent-card {
  flex-shrink: 0; width: 130px; cursor: pointer;
  transition: transform 200ms var(--ease-out);
  /* Stagger entrance */
  opacity: 0; animation: recentFadeIn 400ms var(--ease-out) forwards;
}
.recent-card:active { transform: scale(0.95); }

@keyframes recentFadeIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.recent-card-img {
  width: 130px; height: 130px; border-radius: var(--radius-md);
  object-fit: cover; background: var(--surface2);
  transition: box-shadow 300ms var(--ease-out);
}
.recent-card:active .recent-card-img {
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.recent-card-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-top: 8px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.recent-card-artist {
  font-size: 11px; color: var(--text-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}

/* ── Empty States ──────────────────────────────────────────────── */
#empty-state { flex: 1; overflow-y: auto; }
#brand-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 80px 40px; gap: 12px; text-align: center;
  animation: fadeIn 500ms var(--ease-out);
}
.empty-icon { width: 48px; height: 48px; color: var(--text-subtle); }
.empty-heading {
  font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.4px;
}
.empty-sub {
  font-size: 14px; color: var(--text-subtle); line-height: 1.5;
}
#no-results {
  display: flex; flex-direction: column; align-items: center;
  padding: 80px 40px; text-align: center;
  animation: fadeIn 300ms var(--ease-out);
}

/* ── Results container ─────────────────────────────────────────── */
#results { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ════════════════════════════════════════════════════════════════
   LIBRARY
   ════════════════════════════════════════════════════════════════ */
#library-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.library-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; cursor: pointer;
  transition: background 200ms var(--ease-out), transform 120ms var(--ease-out);
}
.library-row:active { background: var(--accent-glow); transform: scale(0.98); }
.library-row-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.library-row-icon svg { width: 22px; height: 22px; }
.fav-icon { background: linear-gradient(135deg, #FF2D55, #FF6B8A); color: #fff; }
.dl-icon { background: linear-gradient(135deg, #0A84FF, #5AC8FA); color: #fff; }
.library-row-info { flex: 1; min-width: 0; }
.library-row-title {
  font-size: 16px; font-weight: 600; color: var(--text);
}
.library-row-sub {
  font-size: 13px; color: var(--text-muted); margin-top: 2px;
}
.icon-chevron {
  width: 18px; height: 18px; color: var(--text-subtle); flex-shrink: 0;
  transition: transform 200ms var(--ease-out);
}
.library-row:active .icon-chevron { transform: translateX(2px); }
.library-divider {
  height: 1px; background: var(--border); margin: 8px 20px;
}

/* Playlist items in library */
.playlist-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; cursor: pointer;
  transition: background 200ms var(--ease-out), transform 120ms var(--ease-out);
}
.playlist-item:active { background: var(--accent-glow); transform: scale(0.98); }
.playlist-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--surface3); display: flex;
  align-items: center; justify-content: center;
  color: var(--text-muted); flex-shrink: 0;
}
.playlist-icon svg { width: 22px; height: 22px; }
.playlist-info { flex: 1; min-width: 0; }
.playlist-name {
  font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.playlist-count {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
.playlist-delete {
  background: none; border: none; cursor: pointer;
  color: var(--text-subtle); padding: 8px;
  border-radius: var(--radius-full);
  transition: color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.playlist-delete:active { color: var(--red); transform: scale(0.85); }
.playlist-delete svg { width: 18px; height: 18px; }

#playlists-empty { padding: 30px 20px; text-align: center; }

/* ── Sub View (Favourites / Playlist / Downloads detail) ───────── */
.sub-view {
  /* Below the tab bar (90) and mini player (95): drilling into a playlist must
     not strand you without transport controls or navigation. The list scrolls
     underneath the translucent chrome, which reserves its space via padding. */
  position: fixed; inset: 0; z-index: 80;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding-top: var(--safe-top);
  transform: translateX(100%);
  transition: transform 350ms var(--ease-drawer);
}
.sub-view.visible { transform: translateX(0); }
.sub-view.hiding { display: flex !important; transform: translateX(100%); }

.sub-view-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 10px;
}
.sub-view-header h1 { font-size: 18px; font-weight: 700; text-align: center; flex: 1; }
#sub-view-back {
  background: none; border: none; cursor: pointer;
  color: var(--text); padding: 4px; width: 32px; height: 32px;
  transition: transform 120ms var(--ease-out);
}
#sub-view-back:active { transform: scale(0.85) translateX(-2px); }
#sub-view-back svg { width: 24px; height: 24px; }
.track-list-container {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--player-bar-h) + var(--tab-bar-h) + var(--safe-bottom) + 20px);
}

/* ════════════════════════════════════════════════════════════════
   MINI PLAYER BAR
   ════════════════════════════════════════════════════════════════ */
#player-bar {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--tab-bar-h) + var(--safe-bottom));
  z-index: 95;
  background: var(--glass);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  cursor: pointer;
  transition: transform 300ms var(--ease-drawer);
  animation: playerBarEnter 400ms var(--ease-out);
}
@keyframes playerBarEnter {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

#player-progress-track { height: 2px; background: var(--border); }
#player-progress-fill {
  height: 100%; width: 0%; background: var(--text);
  transition: width 0.3s linear;
}
#player-content {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
}
#player-artwork {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--surface2);
  transition: transform 300ms var(--ease-out);
}
#player-bar:active #player-artwork { transform: scale(0.92); }
#player-info { flex: 1; min-width: 0; }
#player-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#player-artist {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
#player-controls { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
#player-controls button {
  background: none; border: none; cursor: pointer;
  color: var(--text); padding: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  transition: transform 120ms var(--ease-out), background 200ms var(--ease-out);
}
#player-controls button:active { transform: scale(0.85); background: var(--accent-glow); }
#player-controls button svg { width: 22px; height: 22px; }
#btn-play svg { width: 26px; height: 26px; }

/* ════════════════════════════════════════════════════════════════
   EXPANDED PLAYER
   ════════════════════════════════════════════════════════════════ */
#player-expanded {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 400ms var(--ease-drawer);
}
#player-expanded.visible { transform: translateY(0); }
#player-expanded.hiding { display: flex !important; transform: translateY(100%); }

/* Fully opaque — at 0.97 the search list underneath bled through and read as a
   rendering glitch. A modal task should occlude what it covers. */
#expanded-backdrop {
  position: absolute; inset: 0; background: var(--bg);
  overflow: hidden;
}
/* Blurred artwork wash. --art is set from JS on track change. */
#expanded-backdrop::before {
  content: ''; position: absolute; inset: -25%;
  background-image: var(--art, none);
  background-size: cover; background-position: center;
  filter: blur(64px) saturate(1.7) brightness(0.55);
  opacity: 0.6;
  transition: opacity 500ms var(--ease-out);
}
/* Darken toward the bottom so the controls always sit on a legible field */
#expanded-backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.90) 100%);
}

#expanded-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  height: 100%;
  padding: calc(var(--safe-top) + 8px) 32px calc(var(--safe-bottom) + 20px);
  overflow-y: auto;
}

#expanded-close {
  background: none; border: none; cursor: pointer;
  padding: 12px 40px; align-self: center; margin-bottom: 8px;
}
.drag-pill {
  width: 36px; height: 5px; background: var(--border-light);
  border-radius: var(--radius-full); margin: 0 auto;
}

#expanded-artwork {
  width: min(80vw, 340px); height: min(80vw, 340px);
  border-radius: var(--radius-lg); object-fit: cover;
  background: var(--surface2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.3);
  /* auto top margin absorbs half the leftover height (the other half goes above
     the seek bar) so tall screens stay balanced instead of dumping all the slack
     at the bottom. Collapses to 0 on short screens, where the panel scrolls. */
  margin-top: auto;
  margin-bottom: 28px;
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
/* Subtle breathing animation when playing */
.is-playing-art {
  animation: artworkBreathe 3s ease-in-out infinite alternate;
}
@keyframes artworkBreathe {
  from { transform: scale(1); box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.3); }
  to { transform: scale(1.02); box-shadow: 0 28px 70px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.25); }
}

#expanded-info { width: 100%; text-align: center; margin-bottom: 20px; }
#expanded-title {
  font-size: 21px; font-weight: 700; color: var(--text);
  letter-spacing: -0.5px; line-height: 1.2;
  /* Two lines before truncating — song titles here routinely carry a
     " - Album | Artist" tail that a single line cuts off immediately. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
#expanded-artist {
  font-size: 15px; color: var(--text-muted); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.1px;
}

/* Seek bar */
#seek-container { width: 100%; margin-top: auto; margin-bottom: 16px; }
#seek-bar {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; background: var(--border);
  border-radius: 2px; outline: none; cursor: pointer;
  transition: height 150ms var(--ease-out);
}
#seek-bar:active { height: 6px; }
#seek-bar::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--text); border: none; cursor: pointer;
  box-shadow: 0 0 8px rgba(255,255,255,0.2);
  margin-top: -5px; /* center 14px thumb on 4px track */
  transition: transform 150ms var(--ease-out), box-shadow 150ms;
}
#seek-bar:active::-webkit-slider-thumb {
  transform: scale(1.3);
  box-shadow: 0 0 14px rgba(255,255,255,0.35);
}
#seek-bar::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text); border: none; cursor: pointer;
}
#seek-bar::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    var(--text) 0%, var(--text) var(--seek-pct, 0%),
    var(--border) var(--seek-pct, 0%), var(--border) 100%
  );
  height: 4px; border-radius: 2px;
}
#seek-times {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 12px; color: var(--text-subtle); font-variant-numeric: tabular-nums;
}

/* Controls */
#expanded-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; width: 100%;
}
#expanded-secondary {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; width: 100%; margin-top: 24px; padding-bottom: 8px;
}
.ctrl-secondary {
  background: none; border: none; cursor: pointer;
  color: var(--text-subtle); padding: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  transition: color 200ms var(--ease-out), transform 120ms var(--ease-out), background 200ms var(--ease-out);
}
.ctrl-secondary:active { transform: scale(0.85); background: var(--accent-glow); }
.ctrl-secondary svg { width: 22px; height: 22px; }
.ctrl-secondary.active { color: var(--green); }

.ctrl-main {
  background: none; border: none; cursor: pointer;
  color: var(--text); padding: 12px;
  border-radius: var(--radius-full);
  transition: transform 120ms var(--ease-out), background 200ms var(--ease-out);
}
.ctrl-main:active { transform: scale(0.82); background: var(--accent-glow); }
.ctrl-main svg { width: 28px; height: 28px; }

.ctrl-play {
  background: var(--text); border: none; cursor: pointer;
  color: var(--bg); width: 64px; height: 64px;
  border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  transition: transform 150ms var(--ease-out), box-shadow 200ms;
  box-shadow: 0 4px 20px rgba(255,255,255,0.1);
}
.ctrl-play:active { transform: scale(0.9); }
.ctrl-play svg { width: 28px; height: 28px; }

.liked svg { fill: var(--heart) !important; stroke: var(--heart) !important; color: var(--heart) !important; }
.downloaded svg { color: var(--green) !important; }

/* Like pop for expanded player */
.ctrl-secondary.like-pop {
  animation: likePop 400ms var(--ease-spring);
}

.ctrl-play.buffering { opacity: 0.6; animation: pulse-glow 1.2s ease-in-out infinite; }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.2); }
  50% { box-shadow: 0 0 20px 4px rgba(255,255,255,0.15); }
}

/* ════════════════════════════════════════════════════════════════
   MODALS (Add to Playlist / Queue)
   ════════════════════════════════════════════════════════════════ */
#modal-overlay, #queue-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; justify-content: flex-end;
}
#modal-backdrop, #queue-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 200ms var(--ease-out);
}
#modal-sheet, #queue-sheet {
  position: relative; z-index: 1;
  background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border-top: 1px solid var(--glass-border);
  padding: 8px 20px calc(var(--safe-bottom) + 20px);
  max-height: 70vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: sheetUp 350ms var(--ease-drawer);
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

#modal-title, .modal-title-text {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin-bottom: 16px; letter-spacing: -0.3px;
}
#modal-body { }

.modal-playlist-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; cursor: pointer;
  transition: background 200ms var(--ease-out), transform 120ms var(--ease-out);
  border-bottom: 1px solid var(--border);
}
.modal-playlist-item:last-child { border-bottom: none; }
.modal-playlist-item:active { background: var(--accent-glow); transform: scale(0.98); }
.modal-pl-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--surface3); display: flex;
  align-items: center; justify-content: center; color: var(--text-muted);
}
.modal-pl-icon svg { width: 18px; height: 18px; }
.modal-pl-name { font-size: 15px; font-weight: 500; color: var(--text); }

.modal-new-pl {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; cursor: pointer; color: var(--blue);
  transition: transform 120ms var(--ease-out);
}
.modal-new-pl:active { transform: scale(0.97); }
.modal-new-pl svg { width: 20px; height: 20px; }
.modal-new-pl span { font-size: 15px; font-weight: 600; }

#modal-actions { margin-top: 16px; text-align: center; }
.modal-btn {
  background: var(--surface3); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 10px 28px;
  color: var(--text); font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: background 200ms var(--ease-out), transform 120ms var(--ease-out);
}
.modal-btn:active { background: var(--border-light); transform: scale(0.95); }

/* Queue items */
.queue-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.queue-item:last-child { border-bottom: none; }
.queue-item-art {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--surface2); flex-shrink: 0;
}
.queue-item-info { flex: 1; min-width: 0; }
.queue-item-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.queue-item-artist {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.queue-now-label {
  font-size: 11px; font-weight: 700; color: var(--green);
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════
   TOAST — fade-in from bottom, exit same direction
   ════════════════════════════════════════════════════════════════ */
#toast {
  position: fixed; bottom: calc(var(--tab-bar-h) + var(--player-bar-h) + var(--safe-bottom) + 16px);
  left: 50%; transform: translateX(-50%) translateY(12px) scale(0.96);
  background: var(--surface3); border: 1px solid var(--border-light);
  border-radius: var(--radius-full); padding: 10px 20px;
  color: var(--text); font-size: 14px; font-weight: 500;
  white-space: nowrap; z-index: 500;
  opacity: 0;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  pointer-events: none;
}
#toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL ANIMATIONS
   ════════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Scrollbars ────────────────────────────────────────────────── */
#results::-webkit-scrollbar,
#library-content::-webkit-scrollbar,
.track-list-container::-webkit-scrollbar,
#modal-sheet::-webkit-scrollbar,
#queue-sheet::-webkit-scrollbar { width: 0; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (min-width: 600px) {
  #expanded-artwork { width: 320px; height: 320px; }
  #expanded-content { max-width: 420px; margin: 0 auto; }
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION — respect prefers-reduced-motion
   (ui.md: replace slides/springs with short fades, drop overshoot)
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .track-item { animation: none; opacity: 1; }
  .recent-card { animation: none; opacity: 1; }
  #player-bar { animation: none; }
  #player-expanded { transition: opacity 200ms ease; transform: none !important; }
  #player-expanded.visible { opacity: 1; }
  #player-expanded.hiding { opacity: 0; }
  .sub-view { transition: opacity 200ms ease; transform: none !important; }
  .sub-view.visible { opacity: 1; }
  .sub-view.hiding { opacity: 0; }
  #modal-sheet, #queue-sheet { animation: none; }
  #expanded-artwork { animation: none; }
}

/* ── Reduced transparency: make the glass chrome solid ─────────── */
@media (prefers-reduced-transparency: reduce) {
  #tab-bar, #player-bar {
    background: #0A0A0A;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #modal-backdrop, #queue-backdrop {
    background: rgba(0,0,0,0.85);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #expanded-backdrop::before { display: none; }
}

/* Show More button */
.show-more-btn {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms, transform 150ms;
}
.show-more-btn:active {
  background: rgba(255,255,255,0.12);
  transform: scale(0.98);
}