/* ─── Custom Dropdown ────────────────────────────────────────── */
.audio-section { width: 100%; }

.custom-dropdown { position: relative; width: 100%; margin-bottom: 1rem; }

.dropdown-trigger {
  width: 100%; display: flex; align-items: center; gap: 0.72rem;
  padding: 0.78rem 0.95rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(155,170,207,0.15);
  border-radius: 16px; color: var(--text);
  cursor: pointer; text-align: left;
  transition: background 0.2s, border-color 0.2s, border-radius 0.2s;
  font-family: 'Nunito Sans', sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.dropdown-trigger:hover { background: rgba(155,170,207,0.10); border-color: rgba(155,170,207,0.25); }
.custom-dropdown.open .dropdown-trigger {
  background: rgba(155,170,207,0.10);
  border-color: rgba(155,170,207,0.28);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dt-icon  { font-size: 1.2rem; flex-shrink: 0; line-height: 1; }
.dt-text  { flex: 1; display: flex; flex-direction: column; gap: 0.08rem; min-width: 0; }
.dt-name  { font-size: 0.81rem; font-weight: 400; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-desc  { font-size: 0.66rem; color: var(--mist); opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-chevron {
  font-size: 1rem; color: var(--mist); opacity: 0.65; flex-shrink: 0;
  transition: transform 0.25s ease; line-height: 1;
}
.custom-dropdown.open .dt-chevron { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(12, 11, 30, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(155,170,207,0.20);
  border-top: none;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  max-height: 0; overflow: hidden;
  transition: max-height 0.32s ease, opacity 0.22s ease;
  opacity: 0; z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: rgba(155,170,207,0.2) transparent;
}
.custom-dropdown.open .dropdown-menu { max-height: 280px; opacity: 1; overflow-y: auto; }
.dropdown-menu::-webkit-scrollbar { width: 4px; }
.dropdown-menu::-webkit-scrollbar-thumb { background: rgba(155,170,207,0.2); border-radius: 2px; }

.dropdown-option {
  display: flex; align-items: center; gap: 0.68rem;
  padding: 0.64rem 0.95rem; cursor: pointer;
  transition: background 0.16s;
  border-bottom: 1px solid rgba(155,170,207,0.05);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.dropdown-option:last-child { border-bottom: none; }
.dropdown-option:hover  { background: rgba(155,170,207,0.09); }
.dropdown-option.active { background: rgba(123,141,176,0.15); }

.do-active-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; opacity: 0;
}
.dropdown-option.active .do-active-dot { opacity: 1; }
.do-icon  { font-size: 1rem; flex-shrink: 0; }
.do-info  { flex: 1; min-width: 0; }
.do-name  { font-size: 0.80rem; font-weight: 400; color: var(--text); }
.do-desc  { font-size: 0.66rem; color: var(--mist); opacity: 0.62; margin-top: 0.05rem; }

.do-row-actions { display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0; }
.do-fav {
  background: none; border: none; cursor: pointer;
  font-size: 0.9rem; color: var(--mist);
  padding: 0.18rem 0.25rem; border-radius: 6px;
  transition: color 0.18s, transform 0.16s; line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.do-fav:hover  { transform: scale(1.25); }
.do-fav.is-fav { color: var(--fav); }
.do-cached { font-size: 0.68rem; color: var(--green); opacity: 0.8; }

/* ─── Now Playing ────────────────────────────────────────────── */
.now-playing {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.82rem 0.95rem; border-radius: 16px;
  background: rgba(155,170,207,0.07);
  border: 1px solid rgba(155,170,207,0.12);
  gap: 0.55rem; flex-wrap: wrap;
}
.np-info  { display: flex; align-items: center; gap: 0.55rem; flex: 1; min-width: 0; }
.np-icon  { font-size: 1.25rem; flex-shrink: 0; }
.np-title { font-size: 0.80rem; font-weight: 400; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-sub   { font-size: 0.65rem; color: var(--mist); opacity: 0.62; margin-top: 0.07rem; }
.np-controls { display: flex; align-items: center; gap: 0.28rem; flex-shrink: 0; }

.ctrl-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(155,170,207,0.12);
  border-radius: 10px; color: var(--text); cursor: pointer;
  width: 34px; height: 34px; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, transform 0.12s;
  font-family: 'Nunito Sans', sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ctrl-btn:hover  { background: rgba(155,170,207,0.18); transform: scale(1.08); }
.ctrl-btn:active { transform: scale(0.94); }
.ctrl-btn.play-btn {
  width: 42px; height: 42px; font-size: 1rem;
  background: rgba(123,141,176,0.22);
  border-color: rgba(155,170,207,0.25);
}
.ctrl-btn.fav-btn { color: var(--mist); }
.ctrl-btn.fav-btn.is-fav { color: var(--fav); }
.ctrl-btn.dl-btn  { color: var(--mist); font-size: 1rem; }
.ctrl-btn.dl-btn.cached { color: var(--green); }

@keyframes playPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123,141,176,0.32); }
  50%       { box-shadow: 0 0 0 8px rgba(123,141,176,0); }
}
.play-btn.playing { animation: playPulse 2s ease-in-out infinite; }

/* ─── Cache status strip ─────────────────────────────────────── */
.cache-status {
  display: flex; align-items: center; gap: 0.36rem;
  margin-top: 0.48rem; padding: 0 0.2rem;
  font-size: 0.62rem; color: var(--mist); opacity: 0.55; letter-spacing: 0.3px;
}
.cache-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--mist); opacity: 0.4;
  transition: background 0.35s, opacity 0.35s; flex-shrink: 0;
}
.cache-dot.cached { background: var(--green); opacity: 0.9; }

/* ─── Favourites ─────────────────────────────────────────────── */
.favourites-section {
  width: 100%; margin-top: 1.3rem; padding-top: 1.3rem;
  border-top: 1px solid var(--border);
}
.fav-list { display: flex; flex-direction: column; gap: 0.35rem; }
.fav-item {
  display: flex; align-items: center; gap: 0.68rem;
  padding: 0.58rem 0.9rem; border-radius: 13px;
  background: rgba(196,126,138,0.07);
  border: 1px solid rgba(196,126,138,0.12);
  cursor: pointer; transition: background 0.18s, transform 0.12s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.fav-item:hover  { background: rgba(196,126,138,0.12); transform: translateX(2px); }
.fav-item:active { transform: translateX(0); }
.fav-item.active { background: rgba(196,126,138,0.18); border-color: rgba(196,126,138,0.28); }
.fav-item .fi-icon  { font-size: 1rem; flex-shrink: 0; }
.fav-item .fi-info  { flex: 1; text-align: left; min-width: 0; }
.fav-item .fi-name  { font-size: 0.80rem; font-weight: 400; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-item .fi-desc  { font-size: 0.65rem; color: var(--mist); opacity: 0.62; margin-top: 0.05rem; }
.fav-item .fi-remove {
  background: none; border: none; cursor: pointer;
  font-size: 0.9rem; color: var(--fav); padding: 0.18rem 0.25rem;
  border-radius: 6px; transition: transform 0.16s; flex-shrink: 0;
  touch-action: manipulation;
}
.fav-item .fi-remove:hover { transform: scale(1.25); }

/* ─── Suggestion box ─────────────────────────────────────────── */
.suggestion-box {
  margin-top: 1.4rem; padding: 0.9rem 1.2rem;
  border-radius: 16px; background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
}
.suggestion-box h2 {
  font-size: 0.58rem; font-weight: 400; letter-spacing: 3px;
  text-transform: uppercase; color: var(--mist); margin-bottom: 0.42rem; opacity: 0.75;
}
.suggestion-box p { font-size: 0.77rem; line-height: 1.72; color: var(--dim); opacity: 0.62; }

/* ─── Manage bar ─────────────────────────────────────────────── */
.manage-bar {
  display: flex; gap: 0.5rem; margin-top: 1.3rem; padding-top: 1.3rem;
  border-top: 1px solid var(--border); justify-content: center; flex-wrap: wrap;
}
.manage-btn {
  font-family: 'Nunito Sans', sans-serif; font-size: 0.70rem;
  padding: 0.42rem 0.9rem;
  border-radius: 10px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.04); color: var(--mist);
  cursor: pointer; transition: background 0.18s, color 0.18s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.manage-btn:hover { background: rgba(155,170,207,0.10); color: var(--text); }
.manage-btn.danger { border-color: rgba(196,126,138,0.2); }
.manage-btn.danger:hover { background: rgba(196,126,138,0.10); color: var(--fav); }

/* ─── Mobile: tiny screens ───────────────────────────────────── */
@media (max-width: 359px) {
  .now-playing { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .np-controls { align-self: flex-end; }
  .ctrl-btn { width: 30px; height: 30px; font-size: 0.76rem; }
  .ctrl-btn.play-btn { width: 36px; height: 36px; }
  .dropdown-trigger { padding: 0.65rem 0.8rem; }
}

@media (max-width: 380px) {
  .now-playing { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .np-controls { align-self: flex-end; }
  .ctrl-btn { width: 32px; height: 32px; font-size: 0.78rem; }
  .ctrl-btn.play-btn { width: 38px; height: 38px; }
}

/* ─── Tablets ────────────────────────────────────────────────── */
@media (min-width: 520px) {
  .ctrl-btn { width: 38px; height: 38px; }
  .ctrl-btn.play-btn { width: 46px; height: 46px; font-size: 1.05rem; }
  .now-playing { padding: 0.95rem 1.1rem; }
  .dropdown-trigger { padding: 0.88rem 1.1rem; }
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .play-btn.playing { animation: none; }
  .fav-item:hover { transform: none; }
  .ctrl-btn:hover { transform: none; }
}