/*
 * Rolyang Player — Full Mobile-First CSS
 */
:root {
  --rmp-bar-h:    64px;
  --rmp-accent:   #e63946;
  --rmp-accent2:  #c1121f;
  --rmp-bg:       #111113;
  --rmp-surface:  rgba(28,28,32,0.98);
  --rmp-border:   rgba(255,255,255,0.07);
  --rmp-text:     #f2f2f2;
  --rmp-mute:     #888;
  --rmp-faint:    #444;
}

/* ── HIDDEN ───────────────────────────────────────────────── */
.rmp-hidden { display: none !important; }

/* ── BAR ──────────────────────────────────────────────────── */
.rmp-player-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--rmp-bg);
  border-top: 1px solid var(--rmp-border);
}

/* ── DESKTOP: 3-col grid ──────────────────────────────────── */
.rmp-player-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--rmp-bar-h);
  padding: 0 20px;
}

/* LEFT */
.rmp-player-track {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding-right: 12px;
}
.rmp-thumb-wrap {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  background: #222;
  cursor: pointer; /* tap to expand */
}
.rmp-player-thumb {
  width: 44px; height: 44px;
  object-fit: cover;
  display: block;
}
.rmp-player-thumb[src=""], .rmp-player-thumb:not([src]) { display: none; }
.rmp-thumb-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#1a1a2e,#2a1a2e);
}
.rmp-thumb-placeholder svg { width: 20px; height: 20px; fill: #444; }
.rmp-thumb-wrap.has-cover .rmp-thumb-placeholder { display: none; }

.rmp-player-info { min-width: 0; flex: 1; }
.rmp-player-title { display: block; font-size: 13px; font-weight: 600; color: var(--rmp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmp-player-artist { display: block; font-size: 11px; color: var(--rmp-mute); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rmp-btn-fav svg { fill: currentColor; }
.rmp-btn-fav.rmp-fav-active { color: var(--rmp-accent) !important; }

/* CENTER */
.rmp-player-controls {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 460px; max-width: 44vw;
}
.rmp-controls-row { display: flex; align-items: center; gap: 6px; }
.rmp-seek-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.rmp-time { font-size: 10px; color: #555; flex-shrink: 0; min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }

/* RIGHT */
.rmp-player-right {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 4px; padding-left: 12px;
}
.rmp-volume-wrap { display: flex; align-items: center; gap: 6px; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.rmp-btn-icon {
  background: none; border: none; cursor: pointer;
  color: var(--rmp-mute); display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
  transition: color .15s, background .15s; flex-shrink: 0;
}
.rmp-btn-icon svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.rmp-btn-icon:hover { color: var(--rmp-text); background: rgba(255,255,255,.07); }
.rmp-btn-icon.rmp-active { color: var(--rmp-accent); }

#rmp-btn-play {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: none; cursor: pointer;
  color: #000; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: transform .1s, background .15s; flex-shrink: 0;
}
#rmp-btn-play svg { width: 16px; height: 16px; fill: currentColor; display: block; }
#rmp-btn-play:hover { transform: scale(1.08); background: #e0e0e0; }
#rmp-btn-play:active { transform: scale(.94); }

/* ── SEEK BAR ─────────────────────────────────────────────── */
.rmp-seek-bar-wrap {
  flex: 1; height: 18px; display: flex; align-items: center; cursor: pointer;
}
.rmp-seek-bar {
  width: 100%; height: 3px; background: rgba(255,255,255,.12); border-radius: 99px;
  position: relative; transition: height .15s;
}
.rmp-seek-bar-wrap:hover .rmp-seek-bar { height: 5px; }
.rmp-seek-fill {
  height: 100%; background: #ccc; border-radius: 99px; width: 0%;
}
.rmp-seek-bar-wrap:hover .rmp-seek-fill { background: var(--rmp-accent); }
.rmp-seek-thumb {
  position: absolute; top: 50%; left: 0%; transform: translate(-50%,-50%);
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.rmp-seek-bar-wrap:hover .rmp-seek-thumb { opacity: 1; }

/* ── VOLUME ───────────────────────────────────────────────── */
#rmp-volume {
  -webkit-appearance: none; appearance: none;
  width: 76px; height: 3px; background: rgba(255,255,255,.12); border-radius: 99px;
  outline: none; cursor: pointer;
}
#rmp-volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #fff;
}
#rmp-volume::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: none; }

/* ── BODY OFFSET ──────────────────────────────────────────── */
body.rmp-has-player { padding-bottom: calc(var(--rmp-bar-h) + 1px); }

/* Mobile: extra offset for bottom nav */
@media (max-width: 768px) {
  /* Account for player bar sitting on top of bottom nav */
  body.rmp-has-player { padding-bottom: calc(var(--rmp-bar-h) + 56px + 8px); }
}

/* ══════════════════════════════════════════════════════════
   FULL-SCREEN NOW PLAYING (tap album art or swipe up)
══════════════════════════════════════════════════════════ */
.rmp-nowplaying {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999999;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform .4s cubic-bezier(.32,.72,0,1);
  transition: transform .4s cubic-bezier(.32,.72,0,1);
  overflow: hidden;
  background: #0d0d0f;
}
.rmp-nowplaying.open {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
/* .open handled above */

.rmp-np-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: var(--np-cover);
  background-size: cover; background-position: center;
  filter: blur(80px) brightness(.25) saturate(1.8);
  transform: scale(1.15);
}
.rmp-np-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.7) 100%);
}
.rmp-np-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  height: 100%;
  padding: 0 28px 32px;
  padding-bottom: calc(32px + constant(safe-area-inset-bottom));
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Drag handle */
.rmp-np-handle {
  width: 36px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.3); margin: 14px auto 20px;
  flex-shrink: 0; cursor: pointer;
}

/* Header */
.rmp-np-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-bottom: 16px; flex-shrink: 0;
}
.rmp-np-header-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.5); }
.rmp-np-close { background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer; padding: 6px; }
.rmp-np-close svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* Big cover art */
.rmp-np-cover {
  width: 68vw; width: min(260px, 68vw); height: 68vw; height: min(260px, 68vw);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  margin-bottom: 24px; flex-shrink: 0;
  background: #222;
  transition: transform .3s;
}
.rmp-np-cover.playing { transform: scale(1.04); }
.rmp-np-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rmp-np-cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#1a1a2e,#2a1a2e); }
.rmp-np-cover-placeholder svg { width: 80px; height: 80px; fill: #333; }

/* Track info */
.rmp-np-info { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-shrink: 0; }
.rmp-np-text { min-width: 0; flex: 1; }
.rmp-np-title { font-size: 1.2rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-bottom: 4px; }
.rmp-np-artist { font-size: 14px; color: rgba(255,255,255,.55); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmp-np-fav { flex-shrink: 0; margin-left: 16px; background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; padding: 4px; }
.rmp-np-fav svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.rmp-np-fav.rmp-fav-active { color: var(--rmp-accent); }

/* Progress */
.rmp-np-seek-wrap {
  width: 100%; margin-bottom: 6px; flex-shrink: 0;
  height: 20px; display: flex; align-items: center; cursor: pointer;
}
.rmp-np-seek-bar {
  width: 100%; height: 4px; background: rgba(255,255,255,.2); border-radius: 99px; position: relative;
}
.rmp-np-seek-bar-wrap:hover .rmp-np-seek-bar { height: 6px; }
.rmp-np-seek-fill { height: 100%; background: #fff; border-radius: 99px; width: 0%; transition: width .1s linear; }
.rmp-np-seek-thumb { position: absolute; top: 50%; left: 0%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; pointer-events: none; }

.rmp-np-times { width: 100%; display: flex; justify-content: space-between; margin-bottom: 28px; flex-shrink: 0; }
.rmp-np-times span { font-size: 11px; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; }

/* Controls */
.rmp-np-controls { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 20px; flex-shrink: 0; }
.rmp-np-btn { background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; transition: color .15s; }
.rmp-np-btn svg { fill: currentColor; display: block; }
.rmp-np-btn:hover { color: #fff; }
.rmp-np-btn.rmp-active { color: var(--rmp-accent); }

.rmp-np-play-btn {
  width: 64px; height: 64px; border-radius: 50%; background: #fff;
  border: none; cursor: pointer; color: #000;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s, background .15s;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.rmp-np-play-btn svg { width: 28px; height: 28px; fill: currentColor; display: block; }
.rmp-np-play-btn:hover { transform: scale(1.06); }
.rmp-np-play-btn:active { transform: scale(.94); }

/* Volume */
.rmp-np-volume { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-shrink: 0; }
.rmp-np-volume svg { width: 16px; height: 16px; fill: rgba(255,255,255,.4); flex-shrink: 0; }
#rmp-np-volume {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 3px; background: rgba(255,255,255,.2); border-radius: 99px;
  outline: none; cursor: pointer;
}
#rmp-np-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
#rmp-np-volume::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: none; }

/* Queue in NP */
.rmp-np-queue-title { width: 100%; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.35); margin-bottom: 14px; flex-shrink: 0; }
.rmp-np-queue { width: 100%; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.rmp-np-queue-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.rmp-np-queue-item:hover { background: rgba(255,255,255,.08); }
.rmp-np-queue-item.active { background: rgba(255,255,255,.1); }
.rmp-np-queue-item img { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.rmp-np-queue-item-title { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmp-np-queue-item-artist { font-size: 11px; color: rgba(255,255,255,.4); }

/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
══════════════════════════════════════════════════════════ */
.rmp-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 9998;
  background: #0d0d0f;
  border-top: 1px solid var(--rmp-border);
  height: 56px;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.rmp-bottom-nav-inner {
  display: flex; align-items: center; justify-content: space-around;
  height: 56px; max-width: 500px; margin: 0 auto;
}
.rmp-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: rgba(255,255,255,.4);
  padding: 6px 16px; border-radius: 8px;
  transition: color .15s; min-width: 56px;
  background: none; border: none; cursor: pointer;
}
.rmp-nav-item svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.rmp-nav-item span { font-size: 10px; font-weight: 600; }
.rmp-nav-item.active { color: var(--rmp-accent); }
.rmp-nav-item:hover { color: rgba(255,255,255,.8); }

@media (max-width: 768px) {
  .rmp-bottom-nav { display: block; }
  /* Player bar sits above bottom nav */
  .rmp-player-bar { bottom: 56px; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE PLAYER BAR (simplified 2-row)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --rmp-bar-h: 60px; }

  .rmp-player-inner {
    grid-template-columns: 1fr auto auto auto;
    gap: 0;
    padding: 0 14px;
    height: var(--rmp-bar-h);
  }

  .rmp-player-controls,
  .rmp-player-right { display: none; }

  /* TOS: YouTube icon still accessible on mobile */
  .rmp-yt-link-btn {
    display: inline-flex !important;
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    opacity: 0.7;
  }

  /* Show YouTube link on mobile - TOS compliance */
  .rmp-yt-link-btn {
    display: inline-flex !important;
    width: 28px;
    height: 28px;
    opacity: 0.6;
  }
  .rmp-yt-link-btn:hover { opacity: 1; }

  /* Progress bar runs across full top of mobile player */
  .rmp-player-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 2px;
    width: var(--rmp-progress, 0%);
    background: var(--rmp-accent);
    transition: width .1s linear;
  }

  /* Mobile: show only prev, play, next in bar */
  .rmp-mobile-prev, .rmp-mobile-play, .rmp-mobile-next { display: flex !important; }

  .rmp-thumb-wrap { width: 40px; height: 40px; border-radius: 4px; }
  .rmp-player-thumb { width: 40px; height: 40px; }
  .rmp-player-title { font-size: 13px; }
  .rmp-player-artist { display: block; font-size: 11px; }

  #rmp-btn-play { width: 34px; height: 34px; }
  #rmp-btn-play svg { width: 14px; height: 14px; }
}

/* Mobile prev/next in player bar (hidden on desktop) */
.rmp-mobile-prev,
.rmp-mobile-next {
  display: none;
  background: none; border: none; color: rgba(255,255,255,.7);
  cursor: pointer; padding: 4px; align-items: center; justify-content: center;
}
.rmp-mobile-prev svg, .rmp-mobile-next svg { width: 20px; height: 20px; fill: currentColor; display: block; }

/* ══════════════════════════════════════════════════════════
   SEARCH OVERLAY
══════════════════════════════════════════════════════════ */
.rmp-search-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: #0d0d0f;
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
}
.rmp-search-overlay.open { transform: translateY(0); }

.rmp-search-overlay-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px;
  padding-top: calc(16px + env(safe-area-inset-top, 0));
  flex-shrink: 0;
}
.rmp-search-overlay-input {
  flex: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 12px 16px; color: #fff; font-size: 16px;
  outline: none; font-family: inherit;
}
.rmp-search-overlay-input::placeholder { color: rgba(255,255,255,.3); }
.rmp-search-overlay-cancel { background: none; border: none; color: var(--rmp-accent); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }

.rmp-search-overlay-body { flex: 1; overflow-y: auto; padding: 0 16px; }
.rmp-search-overlay-recent { margin-top: 16px; }
.rmp-search-recent-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.35); margin-bottom: 12px; }
.rmp-search-recent-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer; }
.rmp-search-recent-item svg { width: 16px; height: 16px; fill: rgba(255,255,255,.3); flex-shrink: 0; }
.rmp-search-recent-item span { font-size: 14px; color: rgba(255,255,255,.7); }

/* ══════════════════════════════════════════════════════════
   SLEEP TIMER MODAL
══════════════════════════════════════════════════════════ */
.rmp-sleep-modal {
  position: fixed; inset: 0; z-index: 10002;
  background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.rmp-sleep-modal.open { opacity: 1; pointer-events: all; }
.rmp-sleep-sheet {
  background: #1a1a1e; border-radius: 16px 16px 0 0;
  width: 100%; max-width: 480px; padding: 20px 24px 40px;
  transform: translateY(100%); transition: transform .35s cubic-bezier(.32,.72,0,1);
}
.rmp-sleep-modal.open .rmp-sleep-sheet { transform: translateY(0); }
.rmp-sleep-title { font-size: 16px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 20px; }
.rmp-sleep-options { display: flex; flex-direction: column; gap: 4px; }
.rmp-sleep-opt {
  padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,.05);
  border: none; color: rgba(255,255,255,.85); font-size: 15px; cursor: pointer;
  text-align: left; transition: background .15s;
}
.rmp-sleep-opt:hover { background: rgba(255,255,255,.1); }
.rmp-sleep-opt.active { color: var(--rmp-accent); background: rgba(230,57,70,.1); }
.rmp-sleep-cancel { margin-top: 12px; width: 100%; padding: 14px; border-radius: 10px; background: rgba(255,255,255,.08); border: none; color: rgba(255,255,255,.6); font-size: 15px; cursor: pointer; }

/* ══════════════════════════════════════════════════════════
   QUEUE / PLAYLIST DRAWERS
══════════════════════════════════════════════════════════ */
.rmp-queue-drawer {
  position: absolute; bottom: 100%; right: 16px;
  width: 320px; max-height: 380px;
  background: #1a1a1e; border: 1px solid var(--rmp-border);
  border-radius: 12px 12px 0 0; overflow: hidden; display: flex; flex-direction: column;
}
@media (max-width: 480px) {
  .rmp-queue-drawer { right: 0; left: 0; width: 100%; border-radius: 12px 12px 0 0; max-height: 60vh; }
}
.rmp-queue-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--rmp-border); flex-shrink: 0; }
.rmp-queue-header h3 { color: #fff; font-size: 13px; font-weight: 600; margin: 0; }
.rmp-btn-text { background: none; border: none; color: var(--rmp-mute); font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.rmp-btn-text:hover { color: var(--rmp-accent); }
#rmp-queue-list { list-style: none; padding: 6px 0; margin: 0; overflow-y: auto; flex: 1; }
.rmp-queue-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; transition: background .1s; border-left: 2px solid transparent; }
.rmp-queue-item:hover { background: rgba(255,255,255,.05); }
.rmp-queue-item:hover .rmp-qi-remove { opacity: 1; }
.rmp-queue-item.rmp-queue-active { border-left-color: var(--rmp-accent); background: rgba(255,255,255,.04); }
.rmp-queue-item.rmp-qi-dragging { opacity: .35; }
.rmp-queue-item.rmp-qi-dragover { box-shadow: inset 0 2px 0 var(--rmp-accent); }
.rmp-queue-item img { width: 34px; height: 34px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.rmp-qi-noart { width: 34px; height: 34px; border-radius: 3px; flex-shrink: 0; background: var(--rmp-surface2,#2a2a2e); display: block; }
.rmp-qi-drag {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 34px; flex-shrink: 0; cursor: grab;
  color: var(--rmp-mute); opacity: .4; touch-action: none;
}
.rmp-qi-drag svg { fill: currentColor; }
.rmp-qi-num {
  width: 20px; flex-shrink: 0; text-align: center;
  font-size: 12px; color: var(--rmp-mute); font-variant-numeric: tabular-nums;
}
.rmp-qi-now {
  width: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--rmp-accent);
}
.rmp-qi-now svg { fill: currentColor; }
.rmp-qi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rmp-qi-title { font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmp-qi-artist { font-size: 11px; color: var(--rmp-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmp-queue-active .rmp-qi-title { color: var(--rmp-accent); font-weight: 700; }
.rmp-qi-remove {
  background: none; border: none; color: var(--rmp-mute);
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity .15s, color .15s;
}
.rmp-qi-remove:hover { color: var(--rmp-accent); background: rgba(255,255,255,.08); }
.rmp-qi-remove svg { fill: currentColor; pointer-events: none; }
.rmp-queue-empty { padding: 24px 16px; text-align: center; color: var(--rmp-mute); font-size: 13px; }

/* On touch devices, always show remove button (no hover) */
@media (hover: none) {
  .rmp-qi-remove { opacity: .6; }
}

.rmp-playlist-drawer {
  position: absolute; bottom: 100%; right: 56px; width: 300px;
  background: #1a1a1e; border: 1px solid var(--rmp-border); border-radius: 12px 12px 0 0;
  display: flex; flex-direction: column;
}
.rmp-pl-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--rmp-border); }
.rmp-pl-header h3 { color: #fff; font-size: 13px; font-weight: 600; margin: 0; }
.rmp-pl-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.rmp-pl-input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid var(--rmp-border); border-radius: 6px; padding: 8px 12px; color: #fff; font-size: 13px; outline: none; transition: border-color .15s; }
.rmp-pl-input:focus { border-color: var(--rmp-accent); }
.rmp-pl-input::placeholder { color: #444; }
.rmp-pl-songs { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.rmp-pl-song-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.04); }
.rmp-pl-song-item img { width: 28px; height: 28px; border-radius: 3px; object-fit: cover; }
.rmp-pl-song-title { flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.rmp-pl-song-remove { background: none; border: none; color: #444; cursor: pointer; transition: color .15s; }
.rmp-pl-song-remove:hover { color: var(--rmp-accent); }
.rmp-pl-song-remove svg { width: 13px; height: 13px; fill: currentColor; display: block; }
.rmp-pl-limit { font-size: 11px; color: var(--rmp-accent); }
.rmp-pl-limit a { color: inherit; font-weight: 600; }
.rmp-pl-footer { display: flex; justify-content: flex-end; }
.rmp-pl-save-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--rmp-accent); color: #fff; border: none; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; cursor: pointer; }
.rmp-pl-save-btn:hover { background: var(--rmp-accent2); }
.rmp-pl-share-row { display: flex; gap: 8px; align-items: center; }
.rmp-pl-share-input { flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--rmp-border); border-radius: 6px; padding: 6px 10px; color: var(--rmp-mute); font-size: 11px; outline: none; }
.rmp-pl-copy-btn { background: rgba(255,255,255,.06); border: 1px solid var(--rmp-border); border-radius: 6px; padding: 6px 10px; cursor: pointer; color: var(--rmp-mute); display: flex; align-items: center; }
.rmp-pl-copy-btn:hover { color: var(--rmp-accent); }
.rmp-pl-copy-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; display: block; }

/* ══════════════════════════════════════════════════════════
   SONG CARDS
══════════════════════════════════════════════════════════ */
.rmp-song-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 16px; }
.rmp-song-card { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); cursor: pointer; transition: background .2s, transform .2s; }
.rmp-song-card:hover { background: rgba(255,255,255,.07); transform: translateY(-2px); }
.rmp-song-card-thumb { position: relative; aspect-ratio: 1; background: #1a1a1a; overflow: hidden; }
.rmp-song-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.rmp-song-card:hover .rmp-song-card-thumb img { transform: scale(1.05); }
.rmp-song-card-badge { position: absolute; top: 6px; left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .4px; padding: 3px 7px; border-radius: 5px; pointer-events: none; }
.rmp-badge-viral { background: rgba(0,0,0,.7); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rmp-song-card-info { padding: 10px 12px 12px; }
.rmp-song-card-title { display: block; font-size: 13px; font-weight: 600; color: #f2f2f2; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.rmp-song-card-title:hover { color: var(--rmp-accent); }
.rmp-song-card-artist { font-size: 11px; color: #666; display: block; }

/* Play button overlay */
.rmp-play-btn {
  position: absolute; bottom: 8px; right: 8px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--rmp-accent); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0;
  transform: translateY(6px) scale(.85);
  transition: opacity .2s, transform .2s;
  padding: 0; box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.rmp-play-btn svg { width: 13px; height: 13px; fill: currentColor; display: block; }
.rmp-song-card:hover .rmp-play-btn,
.rmp-track-row:hover .rmp-play-btn,
.spl-track-row:hover .rmp-play-btn,
.rap-tl-row:hover .rmp-play-btn { opacity: 1; transform: translateY(0) scale(1); }
.rmp-play-btn:hover { background: var(--rmp-accent2); transform: scale(1.1) !important; }

/* Hero/action context play buttons */
.song-actions .rmp-play-btn, .rmp-album-actions .rmp-play-btn,
.rmp-playlist-actions .rmp-play-btn, .spl-actions .rmp-play-btn {
  position: static; opacity: 1; transform: none;
  width: auto; height: auto; border-radius: 50px;
  padding: 11px 26px; font-size: 14px; font-weight: 700;
  gap: 8px; box-shadow: 0 4px 20px rgba(230,57,70,.3); display: inline-flex;
}
.song-actions .rmp-play-btn svg, .rmp-album-actions .rmp-play-btn svg { width: 16px; height: 16px; }
.song-actions .rmp-play-btn:hover, .rmp-album-actions .rmp-play-btn:hover { transform: scale(1.03) !important; background: var(--rmp-accent2); }

/* ── DESKTOP RESPONSIVE ───────────────────────────────────── */
@media (max-width: 1100px) {
  .rmp-player-controls { width: 380px; }
}
@media (max-width: 900px) {
  .rmp-player-controls { max-width: 38vw; }
  #rmp-volume { width: 60px; }
  #rmp-btn-shuffle, #rmp-btn-repeat { display: none; }
}

/* ── SAVE TO PLAYLIST BUTTON (visible, labeled) ─────────── */
.rmp-btn-add-playlist-visible {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(230,57,70,.15);
    border: 1px solid rgba(230,57,70,.4);
    color: var(--rmp-accent, #e63946);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    white-space: nowrap;
    font-family: inherit;
    letter-spacing: .3px;
}
.rmp-btn-add-playlist-visible svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}
.rmp-btn-add-playlist-visible:hover {
    background: rgba(230,57,70,.25);
    border-color: rgba(230,57,70,.7);
    transform: scale(1.03);
}
.rmp-btn-add-playlist-visible:active { transform: scale(.97); }

/* Hide the label on very small screens, show just the icon */
@media (max-width: 480px) {
    .rmp-btn-add-playlist-visible span { display: none; }
    .rmp-btn-add-playlist-visible { padding: 6px 10px; border-radius: 50%; }
}

/* ═══════════════════════════════════════════════════════════
   ADD TO PLAYLIST MODAL
═══════════════════════════════════════════════════════════ */
.rmp-atp-overlay {
    position: fixed; inset: 0; z-index: 20001;
    background: rgba(0,0,0,.75); backdrop-filter: blur(8px);
    display: flex; align-items: flex-end; justify-content: center;
    transition: opacity .2s;
}
.rmp-atp-overlay.rmp-hidden { display: none; }

.rmp-atp-modal {
    background: var(--rmp-surface2, #1e1e22);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px 16px 0 0;
    width: 100%; max-width: 500px;
    max-height: 85vh; display: flex; flex-direction: column;
    overflow: hidden;
    animation: atpSlideUp .25s ease;
}
@media (min-width: 600px) {
    .rmp-atp-overlay { align-items: center; }
    .rmp-atp-modal { border-radius: 16px; max-height: 70vh; }
}
@keyframes atpSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.rmp-atp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.rmp-atp-title {
    font-size: 15px; font-weight: 700; color: var(--rmp-text, #f2f2f2);
}

.rmp-atp-song-preview {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.rmp-atp-song-preview img {
    width: 40px; height: 40px; border-radius: 5px; object-fit: cover;
}
.rmp-atp-song-preview-info { min-width: 0; }
.rmp-atp-song-preview-title {
    font-size: 13px; font-weight: 600; color: var(--rmp-text, #f2f2f2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.rmp-atp-song-preview-artist {
    font-size: 11px; color: var(--rmp-text-mute, #888); display: block;
}

.rmp-atp-body { overflow-y: auto; flex: 1; padding: 16px 20px; }

/* New playlist row */
.rmp-atp-new {
    display: flex; gap: 8px; margin-bottom: 16px;
    padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.rmp-atp-input {
    flex: 1; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
    padding: 10px 12px; color: var(--rmp-text, #f2f2f2);
    font-size: 13px; font-family: inherit; outline: none;
    transition: border-color .2s;
}
.rmp-atp-input:focus { border-color: var(--rmp-accent, #e63946); }
.rmp-atp-input::placeholder { color: rgba(255,255,255,.25); }
.rmp-atp-create-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; background: var(--rmp-accent, #e63946); color: #fff;
    border: none; border-radius: 8px; font-size: 13px; font-weight: 700;
    cursor: pointer; white-space: nowrap; transition: background .15s;
    font-family: inherit;
}
.rmp-atp-create-btn:hover { background: #c1121f; }

/* Guest prompt */
.rmp-atp-guest {
    text-align: center; padding: 24px 16px; display: flex;
    flex-direction: column; align-items: center; gap: 10px;
}
.rmp-atp-guest p { font-size: 14px; color: var(--rmp-text-mute, #888); margin: 0; }
.rmp-atp-login-btn, .rmp-atp-register-btn {
    display: inline-block; padding: 9px 20px; border-radius: 8px;
    font-size: 13px; font-weight: 700; text-decoration: none; transition: .15s;
}
.rmp-atp-login-btn { background: rgba(255,255,255,.1); color: var(--rmp-text, #f2f2f2); }
.rmp-atp-register-btn { background: var(--rmp-accent, #e63946); color: #fff; margin-left: 6px; }

/* Existing playlist list */
.rmp-atp-list { display: flex; flex-direction: column; gap: 4px; }
.rmp-atp-loading { font-size: 13px; color: var(--rmp-text-mute, #888); text-align: center; padding: 16px; }
.rmp-atp-empty  { font-size: 13px; color: var(--rmp-text-mute, #888); text-align: center; padding: 16px; }

.rmp-atp-pl-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    transition: background .15s; border: none; background: none;
    width: 100%; text-align: left; font-family: inherit;
}
.rmp-atp-pl-item:hover { background: rgba(255,255,255,.06); }
.rmp-atp-pl-item.added { background: rgba(34,197,94,.08); }

.rmp-atp-pl-thumb {
    width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0;
    background: var(--rmp-surface3, #2a2a2a); overflow: hidden;
}
.rmp-atp-pl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rmp-atp-pl-thumb-ph {
    width: 100%; height: 100%;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
}
.rmp-atp-pl-thumb-ph div { display: flex; align-items: center; justify-content: center; }
.rmp-atp-pl-thumb-ph div:nth-child(1) { background: #1e1e3e; }
.rmp-atp-pl-thumb-ph div:nth-child(2) { background: #1e2e1e; }
.rmp-atp-pl-thumb-ph div:nth-child(3) { background: #2e1e1e; }
.rmp-atp-pl-thumb-ph div:nth-child(4) { background: #2e2e1e; }

.rmp-atp-pl-info { flex: 1; min-width: 0; }
.rmp-atp-pl-name {
    font-size: 13px; font-weight: 600; color: var(--rmp-text, #f2f2f2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.rmp-atp-pl-count { font-size: 11px; color: var(--rmp-text-mute, #888); }
.rmp-atp-pl-check { color: #22c55e; }
.rmp-atp-pl-check svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Toast notification */
.rmp-atp-toast {
    margin: 0 20px 16px; padding: 10px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600; text-align: center;
    background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.3);
    color: #4ade80;
}
.rmp-atp-toast.error {
    background: rgba(230,57,70,.15); border-color: rgba(230,57,70,.3); color: #f87171;
}
.rmp-atp-toast.rmp-hidden { display: none; }

/* Add to playlist button on song cards (dot-menu style) */
.rmp-add-to-pl-btn {
    position: absolute; top: 6px; left: 6px; z-index: 2;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,0,0,.7); border: none; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    color: #fff; transition: background .15s; padding: 0;
}
.rmp-add-to-pl-btn svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.rmp-add-to-pl-btn:hover { background: var(--rmp-accent, #e63946); }
/* Show on hover of the parent card */
.home-card:hover .rmp-add-to-pl-btn,
.rmp-song-card:hover .rmp-add-to-pl-btn { display: flex; }


/* TOS-compliant YouTube player container */
/* YouTube container - must be visible (not display:none) for iOS Safari audio playback */
#rmp-yt-container {
  position: fixed;
  /* Default: tiny and off-screen but not display:none — iOS Safari needs it visible */
  right: -2px;
  bottom: calc(var(--player-h, 80px) + 60px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9998;
  background: #000;
  opacity: 0.01; /* nearly invisible but technically visible to browser */
  pointer-events: none;
  -webkit-transform: translateZ(0); /* force GPU layer in Safari */
  transform: translateZ(0);
}
/* Expanded video panel when user clicks TV button */
#rmp-yt-container.rmp-yt-visible {
  right: 16px;
  bottom: calc(var(--player-h, 80px) + 8px);
  width: 320px;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  opacity: 1;
  pointer-events: auto;
  transition: all .3s ease;
}
#rmp-yt-player {
  width: 320px !important;
  height: 180px !important;
  min-width: 320px;
  min-height: 180px;
}
/* Watch on YouTube attribution - TOS required */
.rmp-yt-attribution {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
  transition: .15s;
  flex-shrink: 0;
}
.rmp-yt-attribution:hover {
  color: #fff;
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.05);
}
.rmp-yt-attribution svg { flex-shrink: 0; }

/* Video toggle button */
.rmp-yt-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: .15s;
}
.rmp-yt-toggle:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════
   MOBILE APP-LIKE EXPERIENCE
═══════════════════════════════════════════════════════════ */

/* Prevent text selection on interactive elements */
.rmp-player-bar, .rmp-track-row, .rap-tl-row, .pl-track-row {
  -webkit-user-select: none;
  user-select: none;
}

/* Larger tap targets on mobile */
@media (max-width: 768px) {
  /* Player bar buttons - minimum 44px tap target */
  .rmp-mobile-prev,
  .rmp-mobile-play,
  .rmp-mobile-next {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Track rows - taller for easier tapping */
  .rmp-track-row {
    min-height: 56px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .pl-track-row {
    min-height: 56px !important;
  }
  .rap-tl-row {
    min-height: 52px !important;
  }

  /* Remove hover effects on touch (use active instead) */
  .rmp-track-row:hover { background: transparent !important; }
  .rmp-track-row:active { background: rgba(255,255,255,.06) !important; }
  .pl-track-row:hover { background: transparent !important; }
  .pl-track-row:active { background: rgba(255,255,255,.06) !important; }
  .rap-tl-row:hover { background: transparent !important; }
  .rap-tl-row:active { background: var(--surface2) !important; }

  /* Always show ATP/play buttons (no hover needed on touch) */
  .rmp-track-add-pl,
  .rap-atp-btn,
  .pl-atp-btn { opacity: 1 !important; }

  /* Smooth scrolling for track lists */
  .rmp-album-tracks,
  .pl-tracks,
  .rap-tl-list { -webkit-overflow-scrolling: touch; }

  /* Player bar — no text selection, smooth touch */
  .rmp-player-bar {
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
  }

  /* Progress bar — thicker on mobile for easier interaction */
  .rmp-player-bar::before {
    height: 3px !important;
  }

  /* Cover art tap — ripple effect */
  .rmp-thumb-wrap {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
}

/* Active state for all buttons on mobile */
@media (max-width: 768px) {
  .rmp-btn:active,
  .rmp-btn-icon:active,
  .rmp-play-btn:active,
  .rap-tl-play:active {
    transform: scale(0.92) !important;
    opacity: 0.7 !important;
  }
}

/* ── MOBILE MINI-PLAYER IMPROVEMENTS ─────────────────────── */

/* Swipe up hint bar */
.rmp-bar-swipe-hint {
  display: none;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.2);
}

@media (max-width: 768px) {
  /* Show swipe hint */
  .rmp-bar-swipe-hint { display: block; }

  /* Player bar sits above bottom tab bar */
  .rmp-player-bar {
    bottom: 56px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    background: rgba(13,13,15,.92) !important;
    cursor: pointer;
  }

  /* Mini bar inner padding accounts for swipe hint */
  .rmp-player-inner {
    padding-top: 16px !important;
  }

  /* Song title area tappable - visual feedback */
  .rmp-player-track {
    cursor: pointer;
  }
  .rmp-player-track:active {
    opacity: 0.7;
  }

  /* Bigger cover art in mini bar */
  .rmp-thumb-wrap {
    width: 46px !important;
    height: 46px !important;
    border-radius: 6px !important;
    overflow: hidden;
    flex-shrink: 0;
  }
  .rmp-player-thumb {
    width: 46px !important;
    height: 46px !important;
    object-fit: cover;
  }

  /* Title slightly bigger */
  .rmp-player-title {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  .rmp-player-artist {
    font-size: 12px !important;
  }
}

/* Full-screen NP improvements now in base CSS */

/* ── RESUME PLAYBACK HINT ─────────────────────────────────
   Shown when iOS suspends YouTube audio in background and the
   user returns to the tab. Tap to resume with one action. */
.rmp-resume-hint {
  position: fixed;
  bottom: calc(var(--rmp-bar-h, 80px) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(28,28,30,.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50px;
  padding: 10px 18px;
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer;
  z-index: 999995;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.rmp-resume-hint.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.rmp-resume-hint svg {
  fill: var(--accent, #e63946);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  body.rmp-has-player .rmp-resume-hint {
    bottom: calc(var(--rmp-bar-h, 80px) + 56px + 16px);
  }
}