/* CSS Variables for Glassmorphism Theme */
:root {
  /* M3 Expressive Dark Theme */
  --primary-dark: #1A1C1E; /* M3 Background */
  --primary-light: #1A1C1E; /* M3 Surface */
  --surface: rgba(26, 28, 30, 0.6); /* Glassy surface color */
  --glass-bg: rgba(26, 28, 30, 0.5);

  --accent: hwb(33 46% 5%); /* New warm, bright orange */
  --accent-rgb: 255, 140, 0;
  --accent-light: #FFA540; /* Lighter shade of the new accent */

  --text-primary: #E3E2E6; /* M3 On Background/On Surface */
  --text-secondary: #C4C7CF; /* M3 On Surface Variant */

  --glass-border: rgba(141, 145, 153, 0.2); /* M3 Outline @ 20% */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

  --card-radius: 20px;
  --element-radius: 12px;
  --transition: all 0.3s ease;
}

/* --- NEW: iPhone-style Toast Animations --- */
@keyframes slideDown {
  from { transform: translateY(-100%) scale(0.8); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(-100%) scale(0.8); opacity: 0; }
}

/* --- NEW: Slide Animations for Expanded Player --- */
@keyframes slideOutToLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-50%); opacity: 0; }
}

@keyframes slideInFromRight {
  from { transform: translateX(50%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutToRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(50%); opacity: 0; }
}

@keyframes slideInFromLeft {
  from { transform: translateX(-50%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-out-left { animation: slideOutToLeft 0.3s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.slide-in-right { animation: slideInFromRight 0.3s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.slide-out-right { animation: slideOutToRight 0.3s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.slide-in-left { animation: slideInFromLeft 0.3s forwards cubic-bezier(0.4, 0, 0.2, 1); }
/* --- End New Animations --- */

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

@keyframes pulse-animation {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(var(--accent-rgb), 0.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
  }
}

/* --- NEW: Player Breathing Animations --- */
@keyframes player-glow {
  0% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 5px rgba(var(--accent-rgb), 0.2);
  }
  50% {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(var(--accent-rgb), 0.4);
  }
  100% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 5px rgba(var(--accent-rgb), 0.2);
  }
}

@keyframes art-breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes subtle-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Custom Font: Coves --- */
/* Please place your font files in a 'public/fonts/' directory */
@font-face {
  font-family: 'Coves';
  src: url('./fonts/Coves-Light.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Coves';
  src: url('./fonts/Coves-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* --- End Custom Fonts --- */

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

/* --- Desktop-Only Hover Effects --- */
/* Apply hover effects only on devices that support true hovering */
@media (hover: hover) and (pointer: fine) {
  .nav-btn:hover {
    transform: translateY(-2px);
  }

  .search-bar button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
  }

  .suggestion-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
  }

  .discover-card:hover .play-btn {
    opacity: 1;
    transform: translateY(0);
  }

  .song:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-light);
  }

  .song:hover .play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .song:hover img {
    filter: brightness(0.7);
  }

  .player-like-btn:hover {
    color: var(--accent);
    transform: scale(1.1);
  }

  .player-controls button:hover {
    color: var(--accent);
    transform: scale(1.05);
    background: rgba(var(--accent-rgb), 0.1);
    outline: none;
  }

  .library-item:hover {
    transform: translateY(-3px); 
    box-shadow: var(--glass-shadow);
    border-color: var(--accent-light);
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-light);
  }

  .context-menu li:hover {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent-light);
    transform: translateX(5px);
  }

  .details-back-btn:hover,
  .details-header-actions .icon-btn:hover,
  .collapse-btn:hover,
  .player-options-btn:hover,
  .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
  }

  /* --- FIX: Move expanded player hover effects here --- */
  .now-playing-controls button:hover,
  .now-playing-actions button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
  }
}
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes slideInFromRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* --- Material 3 Inspired Ripple Animation --- */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
}
.ripple {
  animation: ripple 0.6s linear;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: 'Coves', sans-serif;
  background: var(--primary-dark);
  color: var(--text-primary);
  overflow: hidden;
  user-select: none; /* Disable text selection globally */
  -webkit-user-select: none; /* For Safari */
  transition: background 1s ease-in-out;
}

/* --- NEW: Enforce custom font on all interactive elements --- */
input, button, select, textarea {
  font-family: 'Coves', sans-serif;
}
/* --- End New Rule --- */

/* --- NEW: Disable Long-Press/Context Menu on Images --- */
img {
  -webkit-touch-callout: none; /* Disable the default long-press action on iOS */
  user-select: none; /* Prevent image selection */
}

/* --- NEW: Global Custom Scrollbar Styles --- */
/* This will apply to all scrollable elements, including select dropdowns in WebKit browsers */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 5px;
  border: 2px solid transparent; /* Creates padding around thumb */
  background-clip: content-box;
}

/* App container */
.app-container {
  display: flex;
  height: 100vh;
  position: relative;
  gap: 0;
  padding: 15px;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjAuNSIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idHJhbnNwYXJlbnQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSJ1cmwoI3BhdHRlcm4pIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PC9zdmc+');
}

/* Sidebar */
.sidebar {
  background: transparent; /* Make sidebar fully transparent to blend with app container */
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  width: 280px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--glass-shadow);
  margin-right: 0; /* Remove margin to use gap on app-container */
  height: calc(100vh - 30px);
  transition: var(--transition);
}

.sidebar-header {
  margin-bottom: 2rem;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.app-logo {
  height: 70px; /* Adjusted logo size for desktop */
  width: auto;
}

.app-logo-mobile {
    display: none; /* Hidden by default on desktop */
    height: 70px; /* Adjusted logo size for mobile */
    margin-bottom: 0.5rem;
}
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  padding: 1rem 1.2rem;
  border-radius: var(--element-radius);
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.nav-btn.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.2);
  border-color: transparent;
  box-shadow: none; /* Removed shadow for a flatter M3 look */
  transform: translateY(-2px);
}

.nav-btn i {
  min-width: 24px;
  text-align: center;
  font-size: 1.2rem;
}

/* Main Content */
.main-content {
  flex-grow: 1;
  background: transparent; /* Make main content transparent to blend with app container */
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 1.5rem 2rem 12rem 2rem; /* Increased bottom padding for player */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Prevents flex items from expanding the container */
  margin-left: 15px;
  box-shadow: var(--glass-shadow);
  height: calc(100vh - 30px);
}

/* Custom Scrollbar for Main Content */
.main-content::-webkit-scrollbar {
  width: 8px;
}

.main-content::-webkit-scrollbar-track {
  background: transparent; /* Make it less intrusive */
}

.main-content::-webkit-scrollbar-thumb {
  background: transparent; /* Hidden by default */
  border-radius: 4px;
  transition: background 0.3s ease-in-out;
}

.main-content.scrolling::-webkit-scrollbar-thumb {
  background: var(--accent); /* Visible when scrolling */
}

/* Search Bar */
.search-bar {
  position: relative;
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.search-header {
  margin-bottom: 1.5rem;
}

.search-input-container {
  position: relative;
  flex-grow: 1;
}

.search-bar input {
  flex-grow: 1;
  width: 100%;
  border-radius: 50px;
  border: 1px solid var(--glass-border);
  padding: 0.9rem 1.5rem; 
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: 1rem; 
  transition: var(--transition);
  animation: subtle-glow 4s infinite ease-in-out;
  user-select: text; /* Re-enable text selection for inputs */
}

.search-bar input:focus {
  outline: none; 
  border-color: var(--dynamic-accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
}

.search-bar input::placeholder {
  color: var(--text-secondary);
}

.search-bar button {
  background: var(--accent);
  border: none;
  border-radius: 50px;
  width: 52px;
  height: 52px;
  color: black;
  font-size: 1.3rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.search-bar button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}

.contextual-search-bar {
  position: relative;
  margin-bottom: 1rem;
}

.contextual-search-bar i {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}

.contextual-search-bar input {
    width: 100%;
    border-radius: 50px; /* Pill shape */
    border: 1px solid transparent; /* Remove default border */
    padding: 0.8rem 1.5rem 0.8rem 3.5rem; /* Adjust padding for icon */
    background: var(--surface); /* Use consistent surface color */
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition);
    animation: subtle-glow 4s infinite ease-in-out;
    user-select: text;
}

.contextual-search-bar input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2); /* Add focus glow */
    background: var(--glass-bg);
}

/* --- NEW: Glow Animation for Search Bars --- */
@keyframes subtle-glow {
  0% {
    box-shadow: 0 0 4px rgba(var(--accent-rgb), 0.15);
    border-color: var(--glass-border);
  }
  50% {
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
    border-color: rgba(var(--accent-rgb), 0.6);
  }
  100% {
    box-shadow: 0 0 4px rgba(var(--accent-rgb), 0.15);
    border-color: var(--glass-border);
  }
}

/* --- NEW: Filter Tabs --- */
.filter-tabs {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem; /* Space below the tabs */
}

.filter-tab-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 50px; /* Pill shape */
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-tab-btn.active {
    background: var(--accent);
    color: black;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.2);
}

.suggestion-item img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.suggestion-item div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.suggestion-item strong, .suggestion-item small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Sections */
.content-section {
  display: none;
  flex-direction: column;
  position: relative;
}
.content-section.active {
    display: flex;
    /* Use a more modern fade-in animation */
    animation: contentFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 1.5rem;
}

@keyframes contentFadeIn {
    from { opacity: 0; transform: translateY(15px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.content-section.active {
    display: flex;
    /* Use a more modern fade-in animation */
    animation: contentFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 1.5rem;
}
.content-section[id*="-details"].active {
    animation: slideInFromRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.search-results-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- FIX: Ensure search results container doesn't take up space when hidden --- */
.search-results-wrapper:not([style*="display: flex"]) {
    display: none;
}

.discover-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Headers */
h1, h2 {
  margin-bottom: 1rem; 
}

h1 {
  font-size: 2.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--text-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.history-group-header {
    font-size: 1rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1.5rem 0 0.5rem;
    border-bottom: 1px solid var(--glass-border);
}
.section-header .settings-btn {
    /* Adjust button size for the header context */
    padding: 0.6rem 1rem;
}

.history-header .settings-btn {
    /* Adjust button size for the header context */
    padding: 0.6rem 1rem;
}

.section-header h2 {
  margin-bottom: 0;
}

.view-all-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0; /* Prevent shrinking */
  font-size: 1rem; /* Adjust icon size */
}

.view-all-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.05);
}

/* Scrollable row */
.scrollable-row {
  display: flex;
  overflow-x: auto;
  gap: 1.5rem;
  padding: 1rem 0.5rem;
  margin: 0 -0.5rem;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.scrollable-row::-webkit-scrollbar {
  height: 8px;
}

.scrollable-row::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.scrollable-row::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

/* New Discover Card Style */
.discover-card {
  display: flex;
  flex-direction: column;
  width: 240px;
  flex-shrink: 0; 
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: subtle-scale-in 0.5s ease-out both;
}

.search-grid .discover-card {
    width: 100%; /* Allow card to fill grid cell */
    flex-shrink: 1;
}

.discover-card-art {
  position: relative;
  cursor: pointer;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}

.discover-card-art img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.discover-card-art .play-btn {
  position: absolute;
  bottom: 10px;
        right: 10px; 
  width: 52px;
  height: 52px;
  font-size: 1.2rem; 
  border-radius: 50%;
  background: var(--accent);
  color: black;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

/* Cards for Song, Playlist, Album, Artist */
.song, .playlist, .album, .artist {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  display: flex;
  gap: 1rem;
  cursor: pointer;
  user-select: none; 
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  align-items: center;
  box-shadow: var(--glass-shadow);
  padding: 1rem;
  border-color: transparent;
}

.song img, .playlist img, .album img, .artist img {
  width: 60px;
  height: 60px;
  object-fit: cover; 
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.song img, .playlist img, .album img, .artist img {
  width: 60px;
  height: 60px;
  object-fit: cover; 
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* --- 1. Songs: M3 Square Shape --- */
.discover-card[data-type="song"] .discover-card-art img {
    border-radius: 24px; /* Keep squircle for discover cards */
}

/* --- 2. Albums: Slanted Shape --- */
.discover-card[data-type="album"] .discover-card-art,
#albumDetailsHeader .details-header-content .image-container {
    border-radius: 24px;
    transform: skewX(-8deg);
    overflow: hidden; /* Hide the parts of the image that go out of bounds */
}
.discover-card[data-type="album"] .discover-card-art img,
#albumDetailsHeader .details-header-content .image-container img {
    transform: skewX(8deg) scale(1.15); /* Counter-skew the image and scale to fill */
}

/* --- 3. Playlists: Arch Shape --- */
.discover-card[data-type="playlist"] .discover-card-art img,
#playlistDetailsHeader .details-header-content img {
    /* M3 Pill Shape */
    clip-path: inset(0% 0% 0% 0% round 120px);
    border-radius: 0;
}

/* --- 4. Artists: 9-Sided "Cookie" Shape --- */
.discover-card[data-type="artist"] .discover-card-art,
#artistDetailsHeader .details-header-content .image-container {
    /* This container will be clipped and will hold the rotating image */
    overflow: hidden; /* Hide the parts of the image that rotate out of view */
    position: relative;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); /* Pentagon Shape */
}

.discover-card[data-type="artist"] .discover-card-art img,
#artistDetailsHeader .details-header-content .image-container img {
    /* The image is scaled up and rotates inside the clipped container */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes cookie-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Adjustments for details pages to ensure shapes look good */
#playlistDetailsHeader .details-header-content img,
#albumDetailsHeader .details-header-content img,
#artistDetailsHeader .details-header-content img {
    width: 220px;
    height: 220px;
    border-radius: 0; /* Important for clip-path shapes */
    object-fit: cover;
}

/* Ensure the container for the shape doesn't clip it */
.discover-card-art,
#playlistDetailsHeader .details-header-content,
#albumDetailsHeader .details-header-content,
#artistDetailsHeader .details-header-content {
    /* This container will hold the image and allow for rotation without affecting layout */
    position: relative;
}

.details-header-content .image-container {
    width: 220px;
    height: 220px;
    flex-shrink: 0; /* Prevent the image container from shrinking */
}

.song img {
    position: relative;
}

.song .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: rgba(var(--accent-rgb), 0.8);
    color: black;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
}

.song.is-playing .song-duration {
    display: none;
}

/* Dynamic buttons inside cards */
.song button, .playlist button, .album button, .artist button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto; /* Pushes button to the right */
  flex-shrink: 0; /* Prevent button from shrinking */
}
.song .remove-from-queue-btn {
    display: none; /* Hidden by default */
    margin-left: auto;
    flex-shrink: 0;
}
.song.is-playing {
    background: rgba(var(--dynamic-accent-rgb, var(--accent-rgb)), 0.15);
    border-color: rgba(var(--dynamic-accent-rgb, var(--accent-rgb)), 0.3);
}

.song.is-playing .song-duration {
    display: none;
}

.song.is-playing::after {
    /* Remove the icon and replace with a neon border effect */
    /* This pseudo-element is no longer needed for the border style */
    content: none;
}

.song .drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    margin-left: auto;
    flex-shrink: 0;
}

.song-duration {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-left: auto;
    padding: 0 1rem;
}

.song .play-btn {
    margin-left: 0; /* Remove auto margin */
}

.player-like-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.player-like-btn.active .fa-heart {
    /* Switch to the solid heart icon when active */
    font-family: "Font Awesome 7 Free";
    font-weight: 900; /* This selects the solid style */
    color: var(--accent);
}

.player-like-btn.active {
    transform: scale(1.1); /* Add a little pop effect */
}

.song div, .playlist div, .album div, .artist div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; /* Crucial for flexbox to allow text truncation */
}

.song strong, .playlist strong, .album strong, .artist strong {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.title-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}

.radio-indicator {
  display: none; /* Hidden by default */
  color: var(--accent);
  font-size: 0.9em;
  animation: pulse 2s infinite;
}

.radio-mode-active .radio-indicator {
  display: inline-block; /* Show when radio mode is active */
}

.song strong, #currentSongTitle, #nowPlayingTitle, #nowPlayingArtist {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent);
}

.marquee strong span, .marquee span {
    display: inline-block;
    padding-left: 100%; /* Ensures the text starts off-screen for a smooth entry */
    animation: marquee-scroll 15s linear infinite;
}

.now-playing-info h2 span, .now-playing-info p span, #nowPlayingTitle h2 span {
    display: inline-block;
    padding-right: 2em; /* Add space between duplicated text */
}


.song small, .playlist small, .album small, .artist small {
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Adds a consistent gap between song items */
}


.card-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.song-list::-webkit-scrollbar {
  width: 8px;
}

.song-list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.song-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

/* Album grid */
.search-grid {
  display: grid;
  /* Responsive grid: more columns on wider screens */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.5rem;
}

@media (min-width: 1200px) {
  .search-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (min-width: 1600px) {
  .search-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

.search-results-wrapper .horizontal-section .album,
.search-results-wrapper .horizontal-section .artist {
  flex-direction: column; /* Keep column layout for horizontal scroll */
  text-align: center; /* Center text for column layout */
  min-width: auto;
}

.search-grid .album, .search-grid .artist {
    flex-direction: column;
    text-align: center;
}

.album div, .artist div {
    align-items: center;
}

.album img, .artist img {
  width: 160px;
  height: 160px;
  margin-bottom: 1rem;
}

/* Bottom Player */
.bottom-player {
  position: fixed;
  bottom: 15px;
  left: 15px; 
  right: 15px;
  background: rgba(22, 27, 34, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 1rem 1.5rem;
  color: var(--text-primary);
  display: grid; /* Use grid for stable layout */
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  box-shadow: var(--glass-shadow);
  z-index: 100; /* Keep player on top */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  transform: translateY(120%); /* Start hidden */
  opacity: 0;
  pointer-events: none;
}

.player-song-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  grid-column: 1 / 2;
  min-width: 0; /* Prevent flex item from overflowing */
}

.bottom-player.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


.player-song-info img {
  width: 56px;
  height: 56px;
  border-radius: var(--element-radius);
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease;
}

.player-text {
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.song strong,
#currentSongTitle,
#currentSongArtist,
.now-playing-info h2,
.now-playing-info p {
    white-space: nowrap;
    overflow: hidden;
}

#currentSongTitle, #currentSongArtist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Fallback for non-marquee */
}

#currentSongArtist {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.player-center-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    grid-column: 2 / 3;
    max-width: 600px;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
}

.player-right-controls {
    grid-column: 3 / 4;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
}

.player-right-controls button {
    color: var(--text-primary);
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
}

.volume-control i {
    font-size: 1.2rem;
    transition: var(--transition);
}

/* --- Custom Volume Slider --- */
.volume-control input[type="range"], #progressBar, .now-playing-progress input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

/* Generic Track styles */
.volume-control input[type="range"]::-webkit-slider-runnable-track,
.player-center-section .progress-container input[type="range"]::-webkit-slider-runnable-track,
.now-playing-progress input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.2);
    height: 6px;
    border-radius: 3px;
    transition: height 0.2s ease;
}
.player-center-section .progress-container input[type="range"]::-webkit-slider-runnable-track {
    background: var(--glass-bg);
}

/* Generic Thumb styles */
.volume-control input[type="range"]::-webkit-slider-thumb,
.player-center-section .progress-container input[type="range"]::-webkit-slider-thumb,
.now-playing-progress input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -5px; /* (16px thumb - 6px track) / 2 */
    background-color: white;
    height: 16px; /* M3 standard thumb size */
    width: 16px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Specific overrides for bottom player volume */
.bottom-player .volume-control input[type="range"] {
    width: 100px;
}

.bottom-player .volume-control input[type="range"] {
    background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--volume-progress, 100%), var(--glass-bg) var(--volume-progress, 100%), var(--glass-bg) 100%);
}

.bottom-player .volume-control input[type="range"]::-webkit-slider-runnable-track {
    background: var(--glass-bg);
    height: 4px;
    border-radius: 2px;
}

.bottom-player .volume-control input[type="range"]::-webkit-slider-thumb {
    margin-top: -6px;
    background-color: var(--accent);
    border: 2px solid var(--primary-dark);
}

.player-controls button {
  color: var(--text-secondary);
  background: transparent; /* M3 Icon Button style */
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  cursor: pointer;
  position: relative; /* For ripple */
  overflow: hidden; /* For ripple */
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-controls button.prev-btn, .player-controls button.next-btn {
    font-size: 1.5rem;
}

.player-controls button:hover,
.player-controls button.active, .player-controls button:hover {
  color: var(--accent);
}

.player-controls button:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

.player-controls button:hover {
  transform: scale(1.05);
  background: rgba(var(--accent-rgb), 0.1);
  outline: none;
}

#playPauseBtn {
  width: 48px;
  height: 48px;
  font-size: 1.6rem; 
  background: var(--accent); /* M3 Filled Tonal Button */
  color: black;
  box-shadow: var(--glass-shadow);
}
.progress-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
#progressBar {
  display: block;
}

.player-center-section .progress-container input[type="range"] {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--progress, 0%), var(--glass-bg) var(--progress, 0%), var(--glass-bg) 100%);
  outline: none;
  border: none;
}

.player-mobile-controls {
    display: none; /* Hidden by default on desktop */
}

/* --- NEW: Accordion-based Settings Page Layout --- */
.settings-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.settings-accordion {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--element-radius);
    transition: background 0.3s ease;
}

.settings-accordion[open] {
    background: var(--surface);
}

.settings-accordion summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none; /* Remove default marker */
    transition: color 0.3s ease;
}

.settings-accordion[open] summary {
    color: var(--accent);
}

.settings-accordion summary::-webkit-details-marker {
    display: none; /* Hide default marker in Chrome/Safari */
}

.settings-accordion summary::after {
    content: '\f078'; /* Font Awesome chevron-down */
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    margin-left: auto;
    transition: transform 0.3s ease;
}

.settings-accordion[open] summary::after {
    transform: rotate(180deg);
}

.settings-accordion-content {
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--glass-border);
}

.settings-accordion-content .settings-option:first-child {
    padding-top: 1.5rem;
}

.settings-accordion-content .settings-option:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.about-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--element-radius);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.settings-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--glass-border);
}

.settings-option h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.settings-option p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.settings-btn {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  padding: 0.7rem 1.2rem;
  border-radius: var(--element-radius);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: var(--accent);
}

.settings-btn.danger-btn {
  background: #c0392b !important; color: white !important;
}
.settings-btn.reset-btn {
  background: #e74c3c !important;
}

.about-logo {
  width: 100px;
  height: auto;
  margin-bottom: 1rem;
}

.about-section h3 {
  font-size: 1.5rem;
  color: var(--text-primary);
}

.about-section p {
  color: var(--text-secondary);
  max-width: 400px;
}

.about-links {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.about-links a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.creator-info {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--glass-border);
  width: 100%;
  max-width: 400px;
}
.creator-info p {
  font-style: italic;
}
.creator-info .last-updated {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  font-style: normal;
}

.creator-info .contact-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* --- NEW: Custom Select Dropdown Styling --- */
.settings-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23C4C7CF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 10px;
    transition: var(--transition);
}

.settings-select:hover {
    border-color: var(--accent);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px; /* More compact width */
  height: 30px; /* More compact height */
  flex-shrink: 0; /* Prevent the switch from shrinking in flex layouts */
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--surface); /* Use a slightly darker background for contrast */
  border: 1px solid var(--glass-border);
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother transition */
  border-radius: 30px; /* Fully rounded */
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px; /* Smaller knob */
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother slide animation */
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Add depth to the knob */
}

input:checked + .slider {
  background-color: var(--accent);
  border-color: var(--accent);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--accent);
}

input:checked + .slider:before {
  transform: translateX(22px); /* Adjust translation distance for new size */
}

/* Loading and Error states */
.loading, .error, .initial-prompt {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
  width: 100%;
  flex-grow: 1; /* Allow it to fill available vertical space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  animation: fadeIn 0.5s ease;
}

.surprise-btn {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    border: none;
    color: black;
    font-size: 1.1rem;
    padding: 0.8rem 1.5rem;
    animation: pulse-animation 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.surprise-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    border: none;
}

.loader-svg {
  width: 80px;
  height: auto;
  color: var(--accent);
}

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid var(--glass-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loader-tube {
  width: 60px;
  height: 60px;
  position: relative;
}
.loader-tube::before, .loader-tube::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: var(--accent);
  animation: spin 1.5s linear infinite;
}
.loader-tube::after {
  border: 5px solid transparent;
  border-bottom-color: var(--accent);
  animation: spin 2s linear infinite reverse;
}

.loader-blur {
  width: 100px;
  height: 20px;
  position: relative;
}
.loader-blur span {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  animation: motion-blur 1s linear infinite;
}
.loader-blur span:nth-child(1) { animation-delay: 0s; }
.loader-blur span:nth-child(2) { animation-delay: 0.2s; }
.loader-blur span:nth-child(3) { animation-delay: 0.4s; }
/* .loader-blur span:nth-child(4) { animation-delay: 0.6s; } */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes motion-blur {
  0% { left: 0; opacity: 0; }
  10% { left: 0; opacity: 1; }
  90% { left: 100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}


.error {
  color: #ff8a80; /* A soft red for errors */
}

.loading-more {
  text-align: center;
  padding: 1.5rem;
  font-style: italic;
  display: flex;
  justify-content: center;
}

.loading-more .loader-spinner {
    width: 30px;
    height: 30px;
}
/* --- Sorting Controls --- */
.sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-controls label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.sort-controls select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
}

.sort-dir-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Details Page Redesign (Playlist, Album, Artist) --- */
.details-page-wrapper {
    position: relative;
    padding-top: 50px; /* Space for the back button */
}

.details-back-btn {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
}

.details-header-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
  padding-bottom: 2rem; /* Add more space at the bottom */
  margin-bottom: 1rem;
}

.details-header-content img {
  width: 220px;
  height: 220px;
  border-radius: var(--element-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.details-type {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.details-header-text h1 {
  font-size: 2.5rem;
  margin-bottom: 0;
}

.details-header-text h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); /* Fluid font size */
  margin-bottom: 0;
}

.details-header-text .meta-info {
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}

.details-header-text .description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 0.5rem;
}

.description.expandable {
    max-height: 6.4em; /* Approx 4 lines */
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease-out;
}
.description.expandable.expanded {
    max-height: 500px; /* Large value */
    transition: max-height 0.5s ease-in;
}

.show-more-btn {
    background: none;
    border: none;
    color: var(--dynamic-accent);
    font-weight: 600;
    cursor: pointer; 
    padding: 0.5rem 0;
    text-align: left;
}

.details-meta-and-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.details-meta-and-actions .meta-info {
    margin: 0; /* Reset margin from the generic rule */
}

.secondary-actions .icon-btn:hover {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.05);
}

.details-actions-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.play-all-btn {
    width: auto;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    border: none;
    background: var(--accent);
    color: black;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.play-all-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.03);
}

.details-actions-bar .icon-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0; /* Prevent shrinking */
}

.details-actions-bar .icon-btn.active {
    color: var(--accent);
}
/* Responsive Design */
@media (max-width: 1200px) {
    .album-grid, .artist-list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .scrollable-row {
        /* On tablets, let's make the cards a bit smaller to fit more */
        gap: 1rem;
    }
    .discover-card { width: 180px; }
}

/* Tablet and Mobile Styles */
@media (max-width: 1024px) {
    .app-container {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }

    /* --- Sidebar becomes Bottom Nav --- */
    .sidebar {
        order: 3; /* Move to bottom */
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        flex-direction: row;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
        z-index: 102;
    }
    .sidebar-header { display: none; }

    .search-header {
        display: flex;
        flex-direction: column;
    }

    .nav-list {
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        gap: 0;
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--glass-border);
        padding: 8px 0;
    }

    .nav-btn {
        flex: 1;
        flex-direction: column;
        padding: 4px 0;
        font-size: 0.75rem;
        gap: 4px;
        justify-content: center;
        border-radius: 16px;
        background: transparent;
        border: none;
        height: 56px;
        min-width: 60px; /* Ensure tappable area */
        z-index: 1;
    }

    .mobile-refresh-fab {
        display: flex; /* Show the button on mobile */
        right: 25px;
        /* Position above player (72px) and nav (72px) with margins */
        bottom: calc(72px + 72px + 25px);
    }

    .discover-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .discover-header h1 { font-size: 1.8rem; margin-bottom: 0; }

    .nav-btn .icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 32px;
        border-radius: 16px;
        transition: background-color 0.4s cubic-bezier(0.2, 0.0, 0.0, 1.0);
    }

    .nav-btn i {
        font-size: 1.2rem;
    }

    .nav-btn.active {
        color: var(--accent); /* Use the default accent, not the dynamic one */
        background: transparent;
        border: none;
        box-shadow: none;
        transform: none;
        font-weight: 700;
    }
    .app-logo-mobile {
        display: block !important; /* Ensure it's visible on mobile */
    }

    /* --- Main Content Adjustments --- */
    .main-content {
        order: 1; /* Main content should be first */
        /* Padding for player and bottom nav */
        padding: 1rem 1.5rem calc(72px + 65px + 20px) 1.5rem; /* player + nav + gap */
        height: 100%; /* Let it fill available space */
        margin-bottom: 0;
    }
    .song-list { max-height: none; }
    .discover-card { width: 140px; }
    /* --- Player Adjustments --- */
    .bottom-player {
        order: 2; /* Player comes after main content in source, but is fixed */
        position: fixed;
        bottom: 75px; /* Position it above the nav bar (65px) with a 10px gap */
        left: 10px;
        right: 10px;
        width: auto;
        padding: 0.75rem 1rem;
        grid-template-columns: 1fr auto;
        border-radius: 15px; /* Match other elements */
        height: 72px;
        transform: none;
    }
    .player-center-section, .player-right-controls .volume-control {
        display: none;
    }
    .player-song-info {
        flex-grow: 1;
        gap: 0.8rem;
        cursor: pointer;
        /* Make the entire info section swipeable */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .player-like-btn {
        display: none; /* Hide like button on mobile as requested */
    }
    .player-right-controls {
        margin-left: auto;
        padding: 0.5rem;
    }
    .player-mobile-controls .play-btn {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
        background: var(--accent);
        border-radius: 50%; /* This will make the button circular */
        color: black;
    }
    .player-mobile-controls {
        display: flex; /* Make it visible on mobile */
        align-items: center;
        justify-content: center;
        grid-column: 2 / 3;
        justify-self: end;
    }
    .player-mobile-controls .play-btn {
        position: relative; /* For ripple effect */
        overflow: hidden; /* For ripple effect */
    }

    /* --- Smaller Cards and Grids --- */
    .album img, .artist img {
        width: 120px;
        height: 120px;
    }
    .song-list {
        gap: 0.5rem; /* Tighter gap on mobile */
    }
    .song-list .song {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    .song-list .song img {
        width: 50px;
        height: 50px;
    }
}

/* Phone-specific adjustments */
@media (max-width: 480px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    .main-content {
        padding-left: 1rem;
        padding-right: 1rem; 
        /* Adjust bottom padding for player and nav bar on smaller phones */
        padding-bottom: calc(72px + 72px + 20px);
    }
    .discover-card { width: 45%; } /* 2-column layout */
    .player-song-info img {
        width: 48px;
        height: 48px;
        border-radius: 8px;
    }
    .player-text {
        /* Give text a bit more room */
        flex-basis: 60%;
    }
    #currentSongTitle strong { font-size: 0.9rem; }
    #currentSongArtist { font-size: 0.75rem; }
}
    
    .details-header-text {
        align-items: center;
    }
    .details-header-actions {
        text-align: center;
    }
    .settings-group {
        padding: 1rem 1.2rem;
    }
    .settings-option {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .settings-nav {
        width: 100%;
        flex-direction: column; /* Stack items vertically on mobile */
        overflow-x: hidden;
        margin-bottom: 1rem; /* Add space between nav and content */
        background: var(--glass-bg);
        border-radius: var(--element-radius);
    }

    /* Hide the remove-from-queue button on mobile, as swipe is used */
    .queue-container .song .remove-from-queue-btn {
        display: none;
    }

    /* Show remove button on desktop inside queue */
    .queue-container .song .remove-from-queue-btn {
        display: flex;
    }

/* --- Expanded Now Playing View --- */
.now-playing-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
  visibility: hidden;
}

.now-playing-view.active {
  transform: translateY(0);
  visibility: visible;
}

.now-playing-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(60px) brightness(0.5);
  transform: scale(1.1);
  z-index: -1;
}

.now-playing-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* Push content to top and bottom */
  padding: 1rem 2rem; /* Reduced top and bottom padding */
  color: white;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s 0.2s ease, transform 0.5s 0.2s ease;
}

.collapse-btn {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition);
}

.now-playing-view.active .now-playing-content {
    opacity: 1;
    transform: translateY(0);
}

.player-options-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
}

.now-playing-art img {
  width: 300px;
  height: 300px;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  cursor: grab; /* Indicate swipeable */
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.now-playing-art {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.now-playing-info h2 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.now-playing-info-text {
    width: 100%;
    max-width: 300px; /* Match the artwork's width */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    min-width: 0; /* Allow flex item to shrink */
}

.now-playing-info h2 {
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Crucial fix: Allows the flex item to shrink and be contained */
  width: 100%;
}

.now-playing-info h2 {
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  background: none;
  -webkit-text-fill-color: unset;
}

.now-playing-info .title-container h2 {
  margin-bottom: 0;
  white-space: nowrap;
}

.now-playing-info p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  width: 100%;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
  /* width: 100% is inherited from .now-playing-info-text */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent);
  white-space: nowrap;
}

.now-playing-progress {
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.now-playing-progress input[type="range"] {
  flex-grow: 1;
}

.now-playing-progress span {
  min-width: 40px;
}

@keyframes progress-wave {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}



.player-center-section .progress-container input[type="range"] {
    /* Removed wave animation for a cleaner look */
    background: var(--glass-bg);
}

.now-playing-controls button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Improves icon visibility on any background */
  transition: var(--transition);
}

.now-playing-controls {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space out controls */
    width: 100%;
    max-width: 400px;
    margin: 0.5rem 0; /* Reduced vertical margin */
}

.now-playing-controls button:active,
.now-playing-actions button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.now-playing-controls button.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.2);
}

.now-playing-controls .play-btn {
  background: var(--accent);
  color: black;
  font-size: 2.2rem; /* Larger icon */ 
  width: 80px; /* Larger button */
  height: 80px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.now-playing-extra-controls {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 1rem; /* Add some space from the bottom edge */
}

.now-playing-actions {
  display: flex;
  justify-content: center; /* Center the buttons */
  gap: 1rem;
}
.now-playing-actions button {
  background: transparent;
  border: none;
  color: white;
  width: 44px; 
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Improves icon visibility */
  transition: var(--transition);
}

/* New Volume Panel */
.volume-panel-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem 2rem;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--glass-border);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  z-index: 10;
}

.volume-panel-container.active {
  transform: translateY(0);
  visibility: visible;
}

.volume-panel-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
  color: white;
}

.volume-panel-content input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px; /* Thicker track */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  outline: none;
  cursor: pointer;
}

.volume-panel-content input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; /* Larger thumb */
  height: 24px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

/* Sleep Timer Panel Styles */
.sleep-timer-display {
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 70px; /* Ensure space for "01:30 hr" */
    font-size: 0.9rem;
}

.sleep-timer-cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid transparent;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.library-item {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--element-radius);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.library-quick-access {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}


.library-item i {
  font-size: 1.5rem;
  color: var(--accent);
}
.mobile-refresh-fab {
  display: none; /* Hidden by default on desktop */
  position: fixed;
  width: 56px;
  height: 56px;
  border-radius: 50%; background-color: var(--accent); color: black; border: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 101; /* Above main content, below modals */
  transition: transform 0.3s ease, background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-refresh-fab:active {
  transform: scale(0.95);
}

.playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}

.playlist-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    animation: subtle-scale-in 0.5s ease-out both;
}

.playlist-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--glass-shadow);
    border-color: var(--accent);
}

.playlist-art-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1 / 1;
    background-color: var(--primary-light); /* Fallback color */
}

.playlist-art-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-art-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--surface);
}

.playlist-art-placeholder i {
    font-size: 4rem;
    color: var(--accent);
    opacity: 0.5;
}

.playlist-card-info {
    padding: 1rem;
}

.playlist-card-info strong {
    display: block;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- FIX: Increase specificity to prevent being overridden by other button styles --- */
.suggestion-item .remove-history-item-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    margin-left: auto;
    /* --- FIX: Make button smaller and compact --- */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem; /* Match the icon size of the clear all button */
}
.remove-history-item-btn:hover {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
}

.playlist-card-info small {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.add-new-playlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Custom Notifications / Toasts */
#notification-container {
    position: fixed;
    top: 15px; /* Position from the top */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center; /* Center toasts within the container */
    width: 90%;
    max-width: 400px;
    pointer-events: none; /* Allow clicks to pass through the container */
}

.toast-notification {
    background: rgba(30, 30, 30, 0.8); /* Dark, semi-transparent background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px; /* Pill shape */
    padding: 0.8rem 1.2rem;
    color: var(--text-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    animation: slideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto; /* Re-enable clicks on the toast itself */
}
.toast-notification.swiping {
  transition: none !important; /* Disable transitions during swipe */
  transform: translateY(var(--swipe-translate-y, 0));
  cursor: grabbing;
}

.toast-notification.closing {
    animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.toast-notification.error {
    background: rgba(227, 76, 76, 0.8);
    color: white;
}

.toast-notification.success {
    background: rgba(39, 174, 96, 0.8);
    color: white;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Drag and Drop styles */
.song.dragging {
    opacity: 0.5;
    background: var(--accent);
}

/* Bottom Sheet Context Menu */
.bottom-sheet {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
}

.bottom-sheet.active {
    visibility: visible;
    pointer-events: auto;
}

.bottom-sheet-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bottom-sheet.active .bottom-sheet-overlay {
    opacity: 1;
}

.bottom-sheet-content {
    background: var(--primary-light);
    width: 100%; 
    max-width: 600px;
    border-top-left-radius: var(--card-radius);
    border-top-right-radius: var(--card-radius);
    padding: 1rem;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.bottom-sheet.active .bottom-sheet-content {
    transform: translateY(0);
}

.bottom-sheet ul {
    list-style: none;
    display: grid;
    /* Create a responsive grid of buttons, aiming for around 85px per button */
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
}
.bottom-sheet li {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    aspect-ratio: 1 / 1; /* This makes the button a perfect square */
    cursor: pointer;
    display: flex;
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Space between icon and text */
    border-radius: var(--element-radius);
    transition: all 0.2s ease;
    text-align: center;
    font-size: 0.8rem; /* Smaller font for the button layout */
    font-weight: 600;
    padding: 0.5rem;
}

.bottom-sheet li i {
    font-size: 1.8rem; /* Increased icon size */
    color: var(--accent); /* Apply accent color to all icons */
    margin-bottom: 0.25rem; /* Add a bit of space above the text */
}

.bottom-sheet li:hover {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: var(--accent);
    transform: translateY(-3px);
}
.bottom-sheet .separator { display: none; }

/* Queue Container */
.queue-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-light);
  backdrop-filter: blur(10px);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  color: white;
  transform: translateY(-100%);
  will-change: transform; /* Optimization: Hint to the browser */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}

.queue-header {
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem;
  position: sticky;
  top: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
  z-index: 2;
  flex-shrink: 0;
  justify-content: space-between;
}

.queue-search-bar {
    /* --- FIX: Use margin to control width instead of padding to not affect icon position --- */
    margin-left: 2rem;
    margin-right: 2rem;
    margin-top: 1rem;
    /* The icon is positioned relative to this container, so we need to adjust its left position
       to account for the new margin. */
    --icon-offset: -0.8rem;
}

.queue-header .collapse-btn {
    position: static; /* Override absolute positioning */
}

.queue-header-title {
    font-size: 1.4rem;
    font-weight: 700;
}

.queue-header h2 {
    margin: 0;
    flex-grow: 1; /* Allow title to take available space */
}

.queue-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem 0;
}

.queue-subheader h2 {
    margin: 0;
}

.clear-queue-btn {
  background: none;
  border: none;
  color: var(--dynamic-primary-light);
  cursor: pointer;
  font-weight: 600;
}

.queue-container.active {
  transform: translateX(0);
  visibility: visible;
}

.queue-container .song-list {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s 0.2s ease, transform 0.3s 0.2s ease; /* Delay fade-in */
}

.queue-container.active .song-list {
    opacity: 1;
    transform: translateY(0);
  overflow-y: auto;
  padding: 1.5rem 2rem;
  gap: 0.5rem; /* Add a small gap between songs */
}

.queue-container .song {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.1);
  padding: 0.75rem 1rem; /* Slightly reduce padding */
  height: 76px; /* Enforce a consistent height */
  box-sizing: border-box;
}
.queue-container .song.is-playing {
    border-left: 4px solid var(--accent); /* Use primary accent color */
    background: rgba(var(--accent-rgb), 0.1);
    /* Subtle background highlight */
    padding-left: calc(1rem - 4px); /* Adjust padding to account for border */
}


.queue-container .song small {
  color: rgba(255, 255, 255, 0.7);
}

.queue-container .song {
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
    will-change: transform, opacity; /* Optimization: Hint to the browser */
}

.queue-container .song.is-swiping {
    transition: none; /* Disable transition during active swipe */
}

.queue-container .song.removing {
    transform: translateX(-100%);
    opacity: 0;
}
.queue-container .song.dragging {
    opacity: 0.5;
    background: var(--accent);
    border-style: dashed;
}

.queue-container .placeholder {
    background: rgba(var(--accent-rgb), 0.1);
    border: 2px dashed var(--accent);
    border-radius: var(--card-radius);
}

.song.is-swiping {
    transition: none; /* Disable transition during active swipe */
}




@media (max-width: 768px) {
    .now-playing-info {
        margin-top: 2rem;
    }
    .now-playing-controls {
        order: 1; /* Move controls below progress bar */
        margin: 2rem 0;
    }
    .now-playing-progress {
        order: 0;
    }
    .now-playing-extra-controls {
        order: 2;
        width: 100%;
    }
    .queue-header, .now-playing-in-queue, .queue-container .song-list {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Hide the remove-from-queue button on mobile, as swipe is used */
    .queue-container .song .remove-from-queue-btn {
        display: none;
    }

    /* Show remove button on desktop inside queue */
    @media (hover: hover) and (pointer: fine) {
        .queue-container .song .remove-from-queue-btn {
            display: flex;
        }
    }

    .details-header-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .details-header-content img {
        width: 60vw;
        height: 60vw;
        max-width: 250px;
        max-height: 250px;
    }

    .details-header-text h1 {
        font-size: 2rem;
    }


}

/* Drag and Drop styles */
.song.dragging {
    opacity: 0.5;
    background: var(--accent);
    border-style: dashed;
}

/* Drag and Drop styles */
.song.dragging {
    opacity: 0.5;
    background: var(--accent);
}
/* Context Menu */
.context-menu {
    position: fixed;
    background: var(--surface);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--element-radius);
    box-shadow: var(--glass-shadow);
    z-index: 1000;
    min-width: 200px;
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top left;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.context-menu.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}

.context-menu ul {
    list-style: none;
    padding: 0.5rem 0;
}

.context-menu li {
    padding: 0.8rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-primary);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    opacity: 0;
    transform: translateY(10px);
    animation: menuItemFadeIn 0.3s ease forwards;
}

.context-menu.active li {
    /* Staggered animation for list items */
    animation-delay: calc(0.03s * var(--i));
}

.context-menu li i {
    font-size: 1rem;
    width: 20px; /* Align icons */
}

.context-menu .separator {
    height: 1px;
    background: var(--glass-border);
    margin: 0.5rem 0;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes menuItemFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.modal-content {
    background: var(--primary-light);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--glass-shadow);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.4rem;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.create-playlist-btn-modal {
    width: 100%;
    padding: 1rem;
    background: var(--accent);
    border: 1px solid transparent;
    color: black;
    border-radius: var(--element-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer; 
    margin-bottom: 1.5rem;
    transition: var(--transition);
}

.modal-playlist-list {
    list-style: none;
}

.modal-playlist-list li {
    padding: 1rem;
    border-radius: var(--element-radius);
    cursor: pointer;
    transition: background 0.2s ease;
}

.empty-modal-list {
    text-align: center;
    color: var(--text-secondary);
    padding: 1rem;
}
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes slideInFromRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* --- Material 3 Inspired Ripple Animation --- */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
}
.ripple {
  animation: ripple 0.6s linear;
}

/* --- NEW: Sleep Timer Dynamic Island --- */
.sleep-timer-island {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translate(-50%, -150%); /* Start hidden above the screen */
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  border-radius: 50px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 1500;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

.sleep-timer-island.active {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: 'Coves', sans-serif;
  background: var(--primary-dark);
  color: var(--text-primary);
  overflow: hidden;
  user-select: none; /* Disable text selection globally */
  -webkit-user-select: none; /* For Safari */
  transition: background 1s ease-in-out;
}

/* --- NEW: Enforce custom font on all interactive elements --- */
input, button, select, textarea {
  font-family: 'Coves', sans-serif;
}
/* --- End New Rule --- */

/* --- NEW: Disable Long-Press/Context Menu on Images --- */
img {
  -webkit-touch-callout: none; /* Disable the default long-press action on iOS */
  user-select: none; /* Prevent image selection */
}

/* --- NEW: Global Custom Scrollbar Styles --- */
/* This will apply to all scrollable elements, including select dropdowns in WebKit browsers */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 5px;
  border: 2px solid transparent; /* Creates padding around thumb */
  background-clip: content-box;
}

/* App container */
.app-container {
  display: flex;
  height: 100vh;
  position: relative;
  gap: 0;
  padding: 15px;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjAuNSIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idHJhbnNwYXJlbnQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSJ1cmwoI3BhdHRlcm4pIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PC9zdmc+');
}

/* Sidebar */
.sidebar {
  background: transparent; /* Make sidebar fully transparent to blend with app container */
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  width: 280px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--glass-shadow);
  margin-right: 0; /* Remove margin to use gap on app-container */
  height: calc(100vh - 30px);
  transition: var(--transition);
}

.sidebar-header {
  margin-bottom: 2rem;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.app-logo {
  height: 70px; /* Adjusted logo size for desktop */
  width: auto;
}

.app-logo-mobile {
    display: none; /* Hidden by default on desktop */
    height: 70px; /* Adjusted logo size for mobile */
    margin-bottom: 0.5rem;
}
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  padding: 1rem 1.2rem;
  border-radius: var(--element-radius);
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.nav-btn.active, .nav-btn.active:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

.nav-btn.active {
    background: rgba(var(--accent-rgb), 0.2);
}


.nav-btn i {
  min-width: 24px;
  text-align: center;
  font-size: 1.2rem;
}

/* Main Content */
.main-content {
  flex-grow: 1;
  background: transparent; /* Make main content transparent to blend with app container */
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 1.5rem 2rem 12rem 2rem; /* Increased bottom padding for player */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Prevents flex items from expanding the container */
  margin-left: 15px;
  box-shadow: var(--glass-shadow);
  height: calc(100vh - 30px);
}

/* Custom Scrollbar for Main Content */
.main-content::-webkit-scrollbar {
  width: 8px;
}

.main-content::-webkit-scrollbar-track {
  background: transparent; /* Make it less intrusive */
}

.main-content::-webkit-scrollbar-thumb {
  background: transparent; /* Hidden by default */
  border-radius: 4px;
  transition: background 0.3s ease-in-out;
}

.main-content.scrolling::-webkit-scrollbar-thumb {
  background: var(--accent); /* Visible when scrolling */
}

/* Search Bar */
.search-bar {
  position: relative;
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.search-header {
  margin-bottom: 1.5rem;
}

.search-input-container {
  position: relative;
  flex-grow: 1;
}

.search-bar input {
  flex-grow: 1;
  width: 100%;
  border-radius: 50px;
  border: 1px solid var(--glass-border);
  padding: 0.9rem 1.5rem; 
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: 1rem; 
  transition: var(--transition);
  animation: subtle-glow 4s infinite ease-in-out;
  user-select: text; /* Re-enable text selection for inputs */
}

.search-bar input:focus {
  outline: none; 
  border-color: var(--dynamic-accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
}

.search-bar input::placeholder {
  color: var(--text-secondary);
}

.search-bar button {
  background: var(--accent);
  border: none;
  border-radius: 50px;
  width: 52px;
  height: 52px;
  color: black;
  font-size: 1.3rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.search-bar button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}

.contextual-search-bar {
  position: relative;
  margin-bottom: 1rem;
}

.contextual-search-bar i {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}

.contextual-search-bar input {
    width: 100%;
    border-radius: 50px; /* Pill shape */
    border: 1px solid transparent; /* Remove default border */
    padding: 0.8rem 1.5rem 0.8rem 3.5rem; /* Adjust padding for icon */
    background: var(--surface); /* Use consistent surface color */
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition);
    animation: subtle-glow 4s infinite ease-in-out;
    user-select: text;
}

.contextual-search-bar input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2); /* Add focus glow */
    background: var(--glass-bg);
}

/* --- NEW: Glow Animation for Search Bars --- */
@keyframes subtle-glow {
  0% {
    box-shadow: 0 0 4px rgba(var(--accent-rgb), 0.15);
    border-color: var(--glass-border);
  }
  50% {
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
    border-color: rgba(var(--accent-rgb), 0.6);
  }
  100% {
    box-shadow: 0 0 4px rgba(var(--accent-rgb), 0.15);
    border-color: var(--glass-border);
  }
}

/* --- NEW: Filter Tabs --- */
.filter-tabs {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem; /* Space below the tabs */
}

.filter-tab-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 50px; /* Pill shape */
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-tab-btn.active {
    background: var(--accent);
    color: black;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.2);
}

/* --- NEW: Filter Dropdown Styles --- */
.filter-dropdown-container {
    position: relative;
    width: fit-content; /* Container is only as wide as the button */
    margin-bottom: 1.5rem;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: var(--surface);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}

.filter-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--primary-light);
    border: 1px solid var(--glass-border);
    border-radius: var(--element-radius);
    box-shadow: var(--glass-shadow);
    z-index: 10;
    min-width: 200px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.filter-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.filter-dropdown a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.filter-dropdown a:hover, .filter-dropdown a.active {
    background-color: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
}
.search-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 10px); /* Adjust top position for new parent */
  left: 0;
  right: 0;
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius); /* Match main content radius */
  margin-top: 0.5rem;
  z-index: 1001;
  max-height: 300px;
  overflow-y: auto;
}

/* Custom Scrollbar for Search Suggestions */
.search-suggestions::-webkit-scrollbar {
  width: 6px;
}

.search-suggestions::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

.search-suggestions.active {
  display: block;
}

.suggestion-item {
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: var(--transition);
}

.suggestion-item img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.suggestion-item div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.suggestion-item strong, .suggestion-item small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Sections */
.content-section {
  display: none;
  flex-direction: column;
  position: relative;
}
.content-section.active {
    display: flex;
    /* Use a more modern fade-in animation */
    animation: fadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 1.5rem;
}
.content-section[id*="-details"].active {
    animation: slideInFromRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.search-results-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- FIX: Ensure search results container doesn't take up space when hidden --- */
.search-results-wrapper:not([style*="display: flex"]) {
    display: none;
}

.discover-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Headers */
h1, h2 {
  margin-bottom: 1rem; 
}

h1 {
  font-size: 2.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--text-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.history-group-header {
    font-size: 1rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1.5rem 0 0.5rem;
    border-bottom: 1px solid var(--glass-border);
}
.section-header .settings-btn {
    /* Adjust button size for the header context */
    padding: 0.6rem 1rem;
}

.history-header .settings-btn {
    /* Adjust button size for the header context */
    padding: 0.6rem 1rem;
}

.section-header h2 {
  margin-bottom: 0;
}

.view-all-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0; /* Prevent shrinking */
  font-size: 1rem; /* Adjust icon size */
}

.view-all-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.05);
}

/* Scrollable row */
.scrollable-row {
  display: flex;
  overflow-x: auto;
  gap: 1.5rem;
  padding: 1rem 0.5rem;
  margin: 0 -0.5rem;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.scrollable-row::-webkit-scrollbar {
  height: 8px;
}

.scrollable-row::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.scrollable-row::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

/* New Discover Card Style */
.discover-card {
  display: flex;
  flex-direction: column;
  width: 240px;
  flex-shrink: 0; 
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: subtle-scale-in 0.5s ease-out both;
}

.search-grid .discover-card {
    width: 100%; /* Allow card to fill grid cell */
    flex-shrink: 1;
}

.discover-card-art {
  position: relative;
  cursor: pointer;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}

.discover-card-art img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.discover-card-art .play-btn {
  position: absolute;
  bottom: 10px;
        right: 10px; 
  width: 52px;
  height: 52px;
  font-size: 1.2rem; 
  border-radius: 50%;
  background: var(--accent);
  color: black;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

/* Cards for Song, Playlist, Album, Artist */
.song, .playlist, .album, .artist {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  display: flex;
  gap: 1rem;
  cursor: pointer;
  user-select: none; 
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  align-items: center;
  box-shadow: var(--glass-shadow);
  padding: 1rem;
  border-color: transparent;
}

.song img, .playlist img, .album img, .artist img {
  width: 60px;
  height: 60px;
  object-fit: cover; 
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.song img, .playlist img, .album img, .artist img {
  width: 60px;
  height: 60px;
  object-fit: cover; 
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* --- 1. Songs: M3 Square Shape --- */
.discover-card[data-type="song"] .discover-card-art img {
    border-radius: 24px; /* Keep squircle for discover cards */
}

/* --- 2. Albums: Slanted Shape --- */
.discover-card[data-type="album"] .discover-card-art,
#albumDetailsHeader .details-header-content .image-container {
    border-radius: 24px;
    transform: skewX(-8deg);
    overflow: hidden; /* Hide the parts of the image that go out of bounds */
}
.discover-card[data-type="album"] .discover-card-art img,
#albumDetailsHeader .details-header-content .image-container img {
    transform: skewX(8deg) scale(1.15); /* Counter-skew the image and scale to fill */
}

/* --- 3. Playlists: Arch Shape --- */
.discover-card[data-type="playlist"] .discover-card-art img,
#playlistDetailsHeader .details-header-content img {
    /* M3 Pill Shape */
    clip-path: inset(0% 0% 0% 0% round 120px);
    border-radius: 0;
}

/* --- 4. Artists: 9-Sided "Cookie" Shape --- */
.discover-card[data-type="artist"] .discover-card-art,
#artistDetailsHeader .details-header-content .image-container {
    /* This container will be clipped and will hold the rotating image */
    overflow: hidden; /* Hide the parts of the image that rotate out of view */
    position: relative;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); /* Pentagon Shape */
}

.discover-card[data-type="artist"] .discover-card-art img,
#artistDetailsHeader .details-header-content .image-container img {
    /* The image is scaled up and rotates inside the clipped container */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes cookie-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Adjustments for details pages to ensure shapes look good */
#playlistDetailsHeader .details-header-content img,
#albumDetailsHeader .details-header-content img,
#artistDetailsHeader .details-header-content img {
    width: 220px;
    height: 220px;
    border-radius: 0; /* Important for clip-path shapes */
    object-fit: cover;
}

/* Ensure the container for the shape doesn't clip it */
.discover-card-art,
#playlistDetailsHeader .details-header-content,
#albumDetailsHeader .details-header-content,
#artistDetailsHeader .details-header-content {
    /* This container will hold the image and allow for rotation without affecting layout */
    position: relative;
}

.details-header-content .image-container {
    width: 220px;
    height: 220px;
    flex-shrink: 0; /* Prevent the image container from shrinking */
}

.song img {
    position: relative;
}

.song .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: rgba(var(--accent-rgb), 0.8);
    color: black;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
}

/* Dynamic buttons inside cards */
.song button, .playlist button, .album button, .artist button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto; /* Pushes button to the right */
  flex-shrink: 0; /* Prevent button from shrinking */
}
.song .remove-from-queue-btn {
    display: none; /* Hidden by default */
    margin-left: auto;
    flex-shrink: 0;
}
.song.is-playing {
    background: rgba(var(--dynamic-accent-rgb, var(--accent-rgb)), 0.15);
    border-color: rgba(var(--dynamic-accent-rgb, var(--accent-rgb)), 0.3);
}

.song.is-playing::after {
    /* Remove the icon and replace with a neon border effect */
    /* This pseudo-element is no longer needed for the border style */
    content: none;
}

.song .drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    margin-left: auto;
    flex-shrink: 0;
}

.song-duration {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-left: auto;
    padding: 0 1rem;
}

.song .play-btn {
    margin-left: 0; /* Remove auto margin */
}

.player-like-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.player-like-btn.active .fa-heart {
    /* Switch to the solid heart icon when active */
    font-family: "Font Awesome 7 Free";
    font-weight: 900; /* This selects the solid style */
    color: var(--accent);
}

.player-like-btn.active {
    transform: scale(1.1); /* Add a little pop effect */
}

.song div, .playlist div, .album div, .artist div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; /* Crucial for flexbox to allow text truncation */
}

.song strong, .playlist strong, .album strong, .artist strong {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.title-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}

.radio-indicator {
  display: none; /* Hidden by default */
  color: var(--accent);
  font-size: 0.9em;
  animation: pulse 2s infinite;
}

.radio-mode-active .radio-indicator {
  display: inline-block; /* Show when radio mode is active */
}

.song strong, #currentSongTitle, #nowPlayingTitle, #nowPlayingArtist {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent);
}

.marquee strong span, .marquee span {
    display: inline-block;
    padding-left: 100%; /* Ensures the text starts off-screen for a smooth entry */
    animation: marquee-scroll 15s linear infinite;
}

.now-playing-info h2 span, .now-playing-info p span, #nowPlayingTitle h2 span {
    display: inline-block;
    padding-right: 2em; /* Add space between duplicated text */
}


.song small, .playlist small, .album small, .artist small {
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Adds a consistent gap between song items */
}


.card-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.song-list::-webkit-scrollbar {
  width: 8px;
}

.song-list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.song-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

/* Album grid */
.search-grid {
  display: grid;
  /* Responsive grid: more columns on wider screens */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.5rem;
}

@media (min-width: 1200px) {
  .search-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (min-width: 1600px) {
  .search-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

.search-results-wrapper .horizontal-section .album,
.search-results-wrapper .horizontal-section .artist {
  flex-direction: column; /* Keep column layout for horizontal scroll */
  text-align: center; /* Center text for column layout */
  min-width: auto;
}

.search-grid .album, .search-grid .artist {
    flex-direction: column;
    text-align: center;
}

.album div, .artist div {
    align-items: center;
}

.album img, .artist img {
  width: 160px;
  height: 160px;
  margin-bottom: 1rem;
}

/* Bottom Player */
.bottom-player {
  position: fixed;
  bottom: 15px;
  left: 15px; 
  right: 15px;
  background: rgba(22, 27, 34, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 1rem 1.5rem;
  color: var(--text-primary);
  display: grid; /* Use grid for stable layout */
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  box-shadow: var(--glass-shadow);
  z-index: 100; /* Keep player on top */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  transform: translateY(120%); /* Start hidden */
  opacity: 0;
  pointer-events: none;
}

.player-song-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  grid-column: 1 / 2;
  min-width: 0; /* Prevent flex item from overflowing */
}

.bottom-player.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


.player-song-info img {
  width: 56px;
  height: 56px;
  border-radius: var(--element-radius);
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease;
}

.player-text {
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.song strong,
#currentSongTitle,
#currentSongArtist,
.now-playing-info h2,
.now-playing-info p {
    white-space: nowrap;
    overflow: hidden;
}

#currentSongTitle, #currentSongArtist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Fallback for non-marquee */
}

#currentSongArtist {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.player-center-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    grid-column: 2 / 3;
    max-width: 600px;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
}

.player-right-controls {
    grid-column: 3 / 4;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
}

.player-right-controls button {
    color: var(--text-primary);
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
}

.volume-control i {
    font-size: 1.2rem;
    transition: var(--transition);
}

/* --- Custom Volume Slider --- */
.volume-control input[type="range"], #progressBar, .now-playing-progress input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

/* Generic Track styles */
.volume-control input[type="range"]::-webkit-slider-runnable-track,
.player-center-section .progress-container input[type="range"]::-webkit-slider-runnable-track,
.now-playing-progress input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.2);
    height: 6px;
    border-radius: 3px;
    transition: height 0.2s ease;
}
.player-center-section .progress-container input[type="range"]::-webkit-slider-runnable-track {
    background: var(--glass-bg);
}

/* Generic Thumb styles */
.volume-control input[type="range"]::-webkit-slider-thumb,
.player-center-section .progress-container input[type="range"]::-webkit-slider-thumb,
.now-playing-progress input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -5px; /* (16px thumb - 6px track) / 2 */
    background-color: white;
    height: 16px; /* M3 standard thumb size */
    width: 16px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Specific overrides for bottom player volume */
.bottom-player .volume-control input[type="range"] {
    width: 100px;
}

.bottom-player .volume-control input[type="range"] {
    background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--volume-progress, 100%), var(--glass-bg) var(--volume-progress, 100%), var(--glass-bg) 100%);
}

.bottom-player .volume-control input[type="range"]::-webkit-slider-runnable-track {
    background: var(--glass-bg);
    height: 4px;
    border-radius: 2px;
}

.bottom-player .volume-control input[type="range"]::-webkit-slider-thumb {
    margin-top: -6px;
    background-color: var(--accent);
    border: 2px solid var(--primary-dark);
}

.player-controls button {
  color: var(--text-secondary);
  background: transparent; /* M3 Icon Button style */
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  cursor: pointer;
  position: relative; /* For ripple */
  overflow: hidden; /* For ripple */
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-controls button.prev-btn, .player-controls button.next-btn {
    font-size: 1.5rem;
}

.player-controls button:hover,
.player-controls button.active, .player-controls button:hover {
  color: var(--accent);
}

.player-controls button:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

.player-controls button:hover {
  transform: scale(1.05);
  background: rgba(var(--accent-rgb), 0.1);
  outline: none;
}

#playPauseBtn {
  width: 48px;
  height: 48px;
  font-size: 1.6rem; 
  background: var(--accent); /* M3 Filled Tonal Button */
  color: black;
  box-shadow: var(--glass-shadow);
}
.progress-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
#progressBar {
  display: block;
}

.player-center-section .progress-container input[type="range"] {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--progress, 0%), var(--glass-bg) var(--progress, 0%), var(--glass-bg) 100%);
  outline: none;
  border: none;
}

.player-mobile-controls {
    display: none; /* Hidden by default on desktop */
}

/* --- NEW: Accordion-based Settings Page Layout --- */
.settings-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.settings-accordion {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--element-radius);
    transition: background 0.3s ease;
}

.settings-accordion[open] {
    background: var(--surface);
}

.settings-accordion summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none; /* Remove default marker */
    transition: color 0.3s ease;
}

.settings-accordion[open] summary {
    color: var(--accent);
}

.settings-accordion summary::-webkit-details-marker {
    display: none; /* Hide default marker in Chrome/Safari */
}

.settings-accordion summary::after {
    content: '\f078'; /* Font Awesome chevron-down */
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    margin-left: auto;
    transition: transform 0.3s ease;
}

.settings-accordion[open] summary::after {
    transform: rotate(180deg);
}

.settings-accordion-content {
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--glass-border);
}

.settings-accordion-content .settings-option:first-child {
    padding-top: 1.5rem;
}

.settings-accordion-content .settings-option:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.about-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--element-radius);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.settings-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--glass-border);
}

.settings-option h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.settings-option p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.settings-btn {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  padding: 0.7rem 1.2rem;
  border-radius: var(--element-radius);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: var(--accent);
}

.settings-btn.danger-btn {
  background: #c0392b !important; color: white !important;
}
.settings-btn.reset-btn {
  background: #e74c3c !important;
}

.about-logo {
  width: 100px;
  height: auto;
  margin-bottom: 1rem;
}

.about-section h3 {
  font-size: 1.5rem;
  color: var(--text-primary);
}

.about-section p {
  color: var(--text-secondary);
  max-width: 400px;
}

.about-links {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.about-links a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.creator-info {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--glass-border);
  width: 100%;
  max-width: 400px;
}
.creator-info p {
  font-style: italic;
}
.creator-info .last-updated {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  font-style: normal;
}

.creator-info .contact-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* --- NEW: Custom Select Dropdown Styling --- */
.settings-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23C4C7CF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 10px;
    transition: var(--transition);
}

.settings-select:hover {
    border-color: var(--accent);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px; /* More compact width */
  height: 30px; /* More compact height */
  flex-shrink: 0; /* Prevent the switch from shrinking in flex layouts */
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--surface); /* Use a slightly darker background for contrast */
  border: 1px solid var(--glass-border);
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother transition */
  border-radius: 30px; /* Fully rounded */
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px; /* Smaller knob */
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother slide animation */
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Add depth to the knob */
}

input:checked + .slider {
  background-color: var(--accent);
  border-color: var(--accent);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--accent);
}

input:checked + .slider:before {
  transform: translateX(22px); /* Adjust translation distance for new size */
}

/* --- NEW: Theme Switcher --- */
.theme-switcher {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.theme-option {
  position: relative;
  cursor: pointer;
}

.theme-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-option .swatch {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  transition: all 0.2s ease;
}

.theme-option input[type="radio"]:checked + .swatch {
  border-color: white;
  box-shadow: 0 0 0 2px var(--accent); /* Use the current accent as the outer ring */
}
/* Loading and Error states */
.loading, .error, .initial-prompt {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
  width: 100%;
  flex-grow: 1; /* Allow it to fill available vertical space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  animation: fadeIn 0.5s ease;
}

.surprise-btn {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    border: none;
    color: black;
    font-size: 1.1rem;
    padding: 0.8rem 1.5rem;
    animation: pulse-animation 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.surprise-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    border: none;
}

.loader-svg {
  width: 80px;
  height: auto;
  color: var(--accent);
}

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid var(--glass-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loader-tube {
  width: 60px;
  height: 60px;
  position: relative;
}
.loader-tube::before, .loader-tube::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: var(--accent);
  animation: spin 1.5s linear infinite;
}
.loader-tube::after {
  border: 5px solid transparent;
  border-bottom-color: var(--accent);
  animation: spin 2s linear infinite reverse;
}

.loader-blur {
  width: 100px;
  height: 20px;
  position: relative;
}
.loader-blur span {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  animation: motion-blur 1s linear infinite;
}
.loader-blur span:nth-child(1) { animation-delay: 0s; }
.loader-blur span:nth-child(2) { animation-delay: 0.2s; }
.loader-blur span:nth-child(3) { animation-delay: 0.4s; }
/* .loader-blur span:nth-child(4) { animation-delay: 0.6s; } */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes motion-blur {
  0% { left: 0; opacity: 0; }
  10% { left: 0; opacity: 1; }
  90% { left: 100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}


.error {
  color: #ff8a80; /* A soft red for errors */
}

.loading-more {
  text-align: center;
  padding: 1.5rem;
  font-style: italic;
  display: flex;
  justify-content: center;
}

.loading-more .loader-spinner {
    width: 30px;
    height: 30px;
}
/* --- Sorting Controls --- */
.sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-controls label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.sort-controls select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
}

.sort-dir-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Details Page Redesign (Playlist, Album, Artist) --- */
.details-page-wrapper {
    position: relative;
    padding-top: 50px; /* Space for the back button */
}

.details-back-btn {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
}

.details-header-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
  padding-bottom: 2rem; /* Add more space at the bottom */
  margin-bottom: 1rem;
}

.details-header-content img {
  width: 220px;
  height: 220px;
  border-radius: var(--element-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.details-type {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.details-header-text h1 {
  font-size: 2.5rem;
  margin-bottom: 0;
}

.details-header-text h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); /* Fluid font size */
  margin-bottom: 0;
}

.details-header-text .meta-info {
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}

.details-header-text .description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 0.5rem;
}

.description.expandable {
    max-height: 6.4em; /* Approx 4 lines */
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease-out;
}
.description.expandable.expanded {
    max-height: 500px; /* Large value */
    transition: max-height 0.5s ease-in;
}

.show-more-btn {
    background: none;
    border: none;
    color: var(--dynamic-accent);
    font-weight: 600;
    cursor: pointer; 
    padding: 0.5rem 0;
    text-align: left;
}

.details-meta-and-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.details-meta-and-actions .meta-info {
    margin: 0; /* Reset margin from the generic rule */
}

.secondary-actions .icon-btn:hover {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.05);
}

.details-actions-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.play-all-btn {
    width: auto;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    border: none;
    background: var(--accent);
    color: black;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.play-all-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.03);
}

.details-actions-bar .icon-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0; /* Prevent shrinking */
}

.details-actions-bar .icon-btn.active {
    color: var(--accent);
}
/* Responsive Design */
@media (max-width: 1200px) {
    .album-grid, .artist-list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .scrollable-row {
        /* On tablets, let's make the cards a bit smaller to fit more */
        gap: 1rem;
    }
    .discover-card { width: 180px; }
}

/* Tablet and Mobile Styles */
@media (max-width: 1024px) {
    .app-container {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }

    /* --- Sidebar becomes Bottom Nav --- */
    .sidebar {
        order: 3; /* Move to bottom */
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        flex-direction: row;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
        z-index: 102;
    }
    .sidebar-header { display: none; }

    .search-header {
        display: flex;
        flex-direction: column;
    }

    .nav-list {
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        gap: 0;
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--glass-border);
        padding: 8px 0;
    }

    .nav-btn {
        flex: 1;
        flex-direction: column;
        padding: 4px 0;
        font-size: 0.75rem;
        gap: 4px;
        justify-content: center;
        border-radius: 16px;
        background: transparent;
        border: none;
        height: 56px;
        min-width: 60px; /* Ensure tappable area */
        z-index: 1;
    }

    .mobile-refresh-fab {
        display: flex; /* Show the button on mobile */
        right: 25px;
        /* Position above player (72px) and nav (72px) with margins */
        bottom: calc(72px + 72px + 25px);
    }

    .discover-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .discover-header h1 { font-size: 1.8rem; margin-bottom: 0; }

    .nav-btn .icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 32px;
        border-radius: 16px;
        transition: background-color 0.4s cubic-bezier(0.2, 0.0, 0.0, 1.0);
    }

    .nav-btn i {
        font-size: 1.2rem;
    }

    .nav-btn.active .icon-container {
        background-color: rgba(var(--accent-rgb), 0.25);
        transform: scale(1.05);
    }

    .nav-btn.active {
        color: var(--accent);
        font-weight: 700;
        transform: none; /* Override desktop hover effect */
        background: transparent; /* Remove desktop background */
    }

    .app-logo-mobile {
        display: block !important; /* Ensure it's visible on mobile */
    }

    /* --- Main Content Adjustments --- */
    .main-content {
        order: 1; /* Main content should be first */
        /* Padding for player and bottom nav */
        padding: 1rem 1.5rem calc(72px + 65px + 20px) 1.5rem; /* player + nav + gap */
        height: 100%; /* Let it fill available space */
        margin-bottom: 0;
    }
    .song-list { max-height: none; }
    .discover-card { width: 140px; }
    /* --- Player Adjustments --- */
    .bottom-player {
        order: 2; /* Player comes after main content in source, but is fixed */
        position: fixed;
        bottom: 75px; /* Position it above the nav bar (65px) with a 10px gap */
        left: 10px;
        right: 10px;
        width: auto;
        padding: 0.75rem 1rem;
        grid-template-columns: 1fr auto;
        border-radius: 15px; /* Match other elements */
        height: 72px;
        transform: none;
    }
    .player-center-section, .player-right-controls .volume-control {
        display: none;
    }
    .player-song-info {
        flex-grow: 1;
        gap: 0.8rem;
        cursor: pointer;
        /* Make the entire info section swipeable */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .player-like-btn {
        display: none; /* Hide like button on mobile as requested */
    }
    .player-right-controls {
        margin-left: auto;
        padding: 0.5rem;
    }
    .player-mobile-controls .play-btn {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
        background: var(--accent);
        border-radius: 50%; /* This will make the button circular */
        color: black;
    }
    .player-mobile-controls {
        display: flex; /* Make it visible on mobile */
        align-items: center;
        justify-content: center;
        grid-column: 2 / 3;
        justify-self: end;
    }
    .player-mobile-controls .play-btn {
        position: relative; /* For ripple effect */
        overflow: hidden; /* For ripple effect */
    }

    /* --- Smaller Cards and Grids --- */
    .album img, .artist img {
        width: 120px;
        height: 120px;
    }
    .song-list {
        gap: 0.5rem; /* Tighter gap on mobile */
    }
    .song-list .song {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    .song-list .song img {
        width: 50px;
        height: 50px;
    }
}

/* Phone-specific adjustments */
@media (max-width: 480px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    .main-content {
        padding-left: 1rem;
        padding-right: 1rem; 
        /* Adjust bottom padding for player and nav bar on smaller phones */
        padding-bottom: calc(72px + 72px + 20px);
    }
    .discover-card { width: 45%; } /* 2-column layout */
    .player-song-info img {
        width: 48px;
        height: 48px;
        border-radius: 8px;
    }
    .player-text {
        /* Give text a bit more room */
        flex-basis: 60%;
    }
    #currentSongTitle strong { font-size: 0.9rem; }
    #currentSongArtist { font-size: 0.75rem; }
}
    
    .details-header-text {
        align-items: center;
    }
    .details-header-actions {
        text-align: center;
    }
    .settings-group {
        padding: 1rem 1.2rem;
    }
    .settings-option {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .settings-nav {
        width: 100%;
        flex-direction: column; /* Stack items vertically on mobile */
        overflow-x: hidden;
        margin-bottom: 1rem; /* Add space between nav and content */
        background: var(--glass-bg);
        border-radius: var(--element-radius);
    }

    /* Hide the remove-from-queue button on mobile, as swipe is used */
    .queue-container .song .remove-from-queue-btn {
        display: none;
    }

    /* Show remove button on desktop inside queue */
    .queue-container .song .remove-from-queue-btn {
        display: flex;
    }

/* --- Expanded Now Playing View --- */
.now-playing-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
  visibility: hidden;
}

.now-playing-view.active {
  transform: translateY(0);
  visibility: visible;
}

.now-playing-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(60px) brightness(0.5);
  transform: scale(1.1);
  z-index: -1;
  transition: opacity 0.8s ease-in-out; /* Smooth cross-fade transition */
}

.now-playing-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* Push content to top and bottom */
  padding: 1rem 2rem; /* Reduced top and bottom padding */
  color: white;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s 0.2s ease, transform 0.5s 0.2s ease;
}

.collapse-btn {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition);
}

.now-playing-view.active .now-playing-content {
    opacity: 1;
    transform: translateY(0);
}

.player-options-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
}

.now-playing-art img {
  /* --- FIX: Make artwork responsive to screen size --- */
  width: 75vw; /* 75% of the viewport width */
  height: 75vw; /* Maintain a square aspect ratio */
  max-width: 320px; /* But don't let it get bigger than 320px on large screens */
  max-height: 320px;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  cursor: grab; /* Indicate swipeable */
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.now-playing-art {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.now-playing-info h2 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.now-playing-info-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    min-width: 0; /* Crucial fix: Allows the flex item to shrink and be contained */
}

.now-playing-info {
    min-width: 0; /* Allow flex item to shrink */
}

.now-playing-info h2 {
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Crucial fix: Allows the flex item to shrink and be contained */
  width: 100%;
}

.now-playing-info h2 {
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  background: none;
  -webkit-text-fill-color: unset;
}

.now-playing-info .title-container h2 {
  margin-bottom: 0;
  white-space: nowrap;
}

.now-playing-info p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  width: 100%;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
  /* width: 100% is inherited from .now-playing-info-text */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent);
  white-space: nowrap;
}

.now-playing-progress {
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.now-playing-progress input[type="range"] {
  flex-grow: 1;
}

.now-playing-progress span {
  min-width: 40px;
}

@keyframes progress-wave {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}



.player-center-section .progress-container input[type="range"] {
    /* Removed wave animation for a cleaner look */
    background: var(--glass-bg);
}

.now-playing-controls button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Improves icon visibility on any background */
  transition: var(--transition);
}

.now-playing-controls {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space out controls */
    width: 100%;
    max-width: 400px;
    margin: 0.5rem 0; /* Reduced vertical margin */
}

.now-playing-controls button:active,
.now-playing-actions button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.now-playing-controls button.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.2);
}

.now-playing-controls .play-btn {
  background: var(--accent);
  color: black;
  font-size: 2.2rem; /* Larger icon */ 
  width: 80px; /* Larger button */
  height: 80px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.now-playing-extra-controls {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 1rem; /* Add some space from the bottom edge */
}

.now-playing-actions {
  display: flex;
  justify-content: center; /* Center the buttons */
  gap: 1rem;
}
.now-playing-actions button {
  background: transparent;
  border: none;
  color: white;
  width: 44px; 
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Improves icon visibility */
  transition: var(--transition);
}

/* New Volume Panel */
.volume-panel-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem 2rem;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--glass-border);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  z-index: 10;
}

.volume-panel-container.active {
  transform: translateY(0);
  visibility: visible;
}

.volume-panel-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
  color: white;
}

.volume-panel-content input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px; /* Thicker track */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  outline: none;
  cursor: pointer;
}

.volume-panel-content input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; /* Larger thumb */
  height: 24px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

/* Sleep Timer Panel Styles */
.sleep-timer-display {
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 70px; /* Ensure space for "01:30 hr" */
    font-size: 0.9rem;
}

.sleep-timer-cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid transparent;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.library-item {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--element-radius);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.library-quick-access {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}


.library-item i {
  font-size: 1.5rem;
  color: var(--accent);
}
.mobile-refresh-fab {
  display: none; /* Hidden by default on desktop */
  position: fixed;
  width: 56px;
  height: 56px;
  border-radius: 50%; background-color: var(--accent); color: black; border: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 101; /* Above main content, below modals */
  transition: transform 0.3s ease, background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-refresh-fab:active {
  transform: scale(0.95);
}

.playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}

.playlist-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    animation: subtle-scale-in 0.5s ease-out both;
}

.playlist-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--glass-shadow);
    border-color: var(--accent);
}

.playlist-art-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1 / 1;
    background-color: var(--primary-light); /* Fallback color */
}

.playlist-art-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-art-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--surface);
}

.playlist-art-placeholder i {
    font-size: 4rem;
    color: var(--accent);
    opacity: 0.5;
}

.playlist-card-info {
    padding: 1rem;
}

.playlist-card-info strong {
    display: block;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--glass-border);
}

.suggestion-header button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.suggestion-header button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent);
}

.remove-history-item-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    margin-left: auto;
    /* --- FIX: Make button smaller and compact --- */
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem; /* Keep the icon size proportional to the smaller button */
}
.remove-history-item-btn:hover {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
}

.playlist-card-info small {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.add-new-playlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Custom Notifications / Toasts */
#notification-container {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Drag and Drop styles */
.song.dragging {
    opacity: 0.5;
    background: var(--accent);
}

/* Bottom Sheet Context Menu */
.bottom-sheet {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
}

.bottom-sheet.active {
    visibility: visible;
    pointer-events: auto;
}

.bottom-sheet-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bottom-sheet.active .bottom-sheet-overlay {
    opacity: 1;
}

.bottom-sheet-content {
    background: var(--primary-light);
    width: 100%; 
    max-width: 600px;
    border-top-left-radius: var(--card-radius);
    border-top-right-radius: var(--card-radius);
    padding: 1rem;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.bottom-sheet.active .bottom-sheet-content {
    transform: translateY(0);
}

.bottom-sheet ul {
    list-style: none;
    display: grid;
    /* Create a responsive grid of buttons, aiming for around 85px per button */
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
}
.bottom-sheet li {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    aspect-ratio: 1 / 1; /* This makes the button a perfect square */
    cursor: pointer;
    display: flex;
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Space between icon and text */
    border-radius: var(--element-radius);
    transition: all 0.2s ease;
    text-align: center;
    font-size: 0.8rem; /* Smaller font for the button layout */
    font-weight: 600;
    padding: 0.5rem;
}

.bottom-sheet li i {
    font-size: 1.8rem; /* Increased icon size */
    color: var(--accent); /* Apply accent color to all icons */
    margin-bottom: 0.25rem; /* Add a bit of space above the text */
}

.bottom-sheet .separator { display: none; }

/* Queue Container */
.queue-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-light);
  backdrop-filter: blur(10px);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  color: white;
  transform: translateY(-100%);
  will-change: transform; /* Optimization: Hint to the browser */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}

.queue-header {
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem;
  position: sticky;
  top: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
  z-index: 2;
  flex-shrink: 0;
  justify-content: space-between;
}

.queue-search-bar {
    /* --- FIX: Use margin to control width instead of padding to not affect icon position --- */
    margin-left: 2rem;
    margin-right: 2rem;
    margin-top: 1rem;
    /* The icon is positioned relative to this container, so we need to adjust its left position
       to account for the new margin. */
    --icon-offset: -0.8rem;
}

.queue-header .collapse-btn {
    position: static; /* Override absolute positioning */
}

.queue-header-title {
    font-size: 1.4rem;
    font-weight: 700;
}

.queue-header h2 {
    margin: 0;
    flex-grow: 1; /* Allow title to take available space */
}

.queue-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem 0;
}

.queue-subheader h2 {
    margin: 0;
}

.clear-queue-btn {
  background: none;
  border: none;
  color: var(--dynamic-primary-light);
  cursor: pointer;
  font-weight: 600;
}

.queue-container.active {
  transform: translateX(0);
  visibility: visible;
}

.queue-container .song-list {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s 0.2s ease, transform 0.3s 0.2s ease; /* Delay fade-in */
}

.queue-container.active .song-list {
    opacity: 1;
    transform: translateY(0);
  overflow-y: auto;
  padding: 1.5rem 2rem;
  gap: 0.5rem; /* Add a small gap between songs */
}

.queue-container .song {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.1);
  padding: 0.75rem 1rem; /* Slightly reduce padding */
  height: 76px; /* Enforce a consistent height */
  box-sizing: border-box;
}
.queue-container .song.is-playing {
    border-left: 4px solid var(--accent); /* Use primary accent color */
    background: rgba(var(--accent-rgb), 0.1);
    /* Subtle background highlight */
    padding-left: calc(1rem - 4px); /* Adjust padding to account for border */
}


.queue-container .song small {
  color: rgba(255, 255, 255, 0.7);
}

.queue-container .song {
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
    will-change: transform, opacity; /* Optimization: Hint to the browser */
}

.queue-container .song.is-swiping {
    transition: transform 0.3s ease, opacity 0.3s ease, height 0.3s 0.1s ease !important;
    transform: translateX(-110%);
    opacity: 0;
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.queue-container .song.removing {
    transform: translateX(-100%);
    opacity: 0;
}
.queue-container .song.dragging {
    opacity: 0.5;
    background: var(--accent);
    border-style: dashed;
}

.queue-container .placeholder {
    background: rgba(var(--accent-rgb), 0.1);
    border: 2px dashed var(--accent);
    border-radius: var(--card-radius);
}

.song.is-swiping {
    transition: none; /* Disable transition during active swipe */
}




@media (max-width: 768px) {
    .now-playing-info {
        margin-top: 2rem;
    }
    .now-playing-controls {
        order: 1; /* Move controls below progress bar */
        margin: 2rem 0;
    }
    .now-playing-progress {
        order: 0;
    }
    .now-playing-extra-controls {
        order: 2;
        width: 100%;
    }
    .queue-header, .now-playing-in-queue, .queue-container .song-list {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Hide the remove-from-queue button on mobile, as swipe is used */
    .queue-container .song .remove-from-queue-btn {
        display: none;
    }

    /* Show remove button on desktop inside queue */
    @media (hover: hover) and (pointer: fine) {
        .queue-container .song .remove-from-queue-btn {
            display: flex;
        }
    }

    .details-header-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .details-header-content img {
        width: 60vw;
        height: 60vw;
        max-width: 250px;
        max-height: 250px;
    }

    .details-header-text h1 {
        font-size: 2rem;
    }


}

/* Drag and Drop styles */
.song.dragging {
    opacity: 0.5;
    background: var(--accent);
    border-style: dashed;
}

/* Drag and Drop styles */
.song.dragging {
    opacity: 0.5;
    background: var(--accent);
}
/* Context Menu */
.context-menu {
    position: fixed;
    background: var(--surface);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--element-radius);
    box-shadow: var(--glass-shadow);
    z-index: 1000;
    min-width: 200px;
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top left;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.context-menu.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}

.context-menu ul {
    list-style: none;
    padding: 0.5rem 0;
}

.context-menu li {
    padding: 0.8rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-primary);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    opacity: 0;
    transform: translateY(10px);
    animation: menuItemFadeIn 0.3s ease forwards;
}

.context-menu.active li {
    /* Staggered animation for list items */
    animation-delay: calc(0.03s * var(--i));
}

.context-menu li i {
    font-size: 1rem;
    width: 20px; /* Align icons */
}

.context-menu .separator {
    height: 1px;
    background: var(--glass-border);
    margin: 0.5rem 0;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes menuItemFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.modal-content {
    background: var(--primary-light);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--glass-shadow);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.4rem;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.create-playlist-btn-modal {
    width: 100%;
    padding: 1rem;
    background: var(--accent);
    border: 1px solid transparent;
    color: black;
    border-radius: var(--element-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer; 
    margin-bottom: 1.5rem;
    transition: var(--transition);
}

.modal-playlist-list {
    list-style: none;
}

.modal-playlist-list li {
    padding: 1rem;
    border-radius: var(--element-radius);
    cursor: pointer;
    transition: background 0.2s ease;
}

.empty-modal-list {
    text-align: center;
    color: var(--text-secondary);
    padding: 1rem;
}