/* ════════════════════════════════════════════════════════════════════════
   RadioBox — web parity (Pack R1). Scoped to .rbx-* / #radioboxPage so it
   cannot affect public surfaces. Uses the app's theme custom properties
   (defined at :root and overridden under body.dark) so it adapts to
   light/dark automatically; fallbacks keep it sane if a var is missing.
   ════════════════════════════════════════════════════════════════════════ */

/* RadioBox design tokens — RadioBox-scoped ONLY (defined on the RadioBox roots,
   never :root), so they never touch global/app styles. The body-mounted dock /
   expanded player / playlist modal each carry the tokens so their descendants
   inherit them.
   THEME: Selebox is DARK by default (:root) and switches to light via the
   `body.light` class. So the defaults here are DARK and we override the surface
   tokens under `body.light`. The premium purple ACCENT is identical in both
   modes; only surfaces / text / borders / shadows change. (No JS needed — the
   body.light class cascades to these body-mounted roots automatically.) */
#radioboxPage, .rbx-dock, .rbx-expanded, .rbx-pl-backdrop {
  /* premium purple accent — same in light + dark */
  --rbx-purple-main: var(--accent-primary);
  --rbx-purple-bright: var(--accent-light);
  --rbx-purple-deep: var(--accent-dark);
  --rbx-purple-soft: rgba(var(--accent-rgb), .16);
  --rbx-purple-glow: rgba(var(--accent-rgb), .45);
  --rbx-purple-border: rgba(var(--accent-rgb), .40);
  /* theme-aware surfaces — DARK default (app default) */
  --rbx-surface:    var(--bg2, color-mix(in srgb, rgb(var(--accent-rgb)) 14%, #0b0d16));
  --rbx-surface-2:  var(--bg3, color-mix(in srgb, rgb(var(--accent-rgb)) 18%, #111421));
  --rbx-surface-3:  var(--bg4, color-mix(in srgb, rgb(var(--accent-rgb)) 22%, #171a28));
  --rbx-text:       var(--text);
  --rbx-text-muted: var(--text2);
  --rbx-border:     rgba(255, 255, 255, .10);
  --rbx-shadow:     0 24px 70px rgba(0, 0, 0, .55);
  --rbx-label:      var(--rbx-purple-bright);
  --rbx-player-bg:  var(--rbx-surface); /* back-compat alias */
  /* Glass dock (mini player) — DARK default: translucent deep purple/navy. The
     blur is applied via backdrop-filter on the dock so it blurs the page BEHIND
     it, never the dock's own buttons/text. */
  --rbx-dock-glass-bg:     rgba(15, 23, 42, 0.50);
  --rbx-dock-glass-border: rgba(255, 255, 255, 0.16);
  --rbx-dock-glass-shadow: 0 10px 38px rgba(0, 0, 0, .50), 0 0 0 1px rgba(var(--accent-rgb), .16);
  --rbx-dock-blur:         blur(20px) saturate(1.35);
}
/* LIGHT mode override (Selebox uses body.light). Keep the purple accent;
   make surfaces light/lavender, text dark, borders subtle.
   Two paths to the same light tokens: (1) `body.light <root>` (CSS-only,
   relies on the body.light class cascading to the body-mounted roots), and
   (2) `<root>.rbx-light` — an explicit class stamped on the element itself by
   the JS MutationObserver (bulletproof; no ancestor-inheritance dependency). */
body.light #radioboxPage, body.light .rbx-dock, body.light .rbx-expanded, body.light .rbx-pl-backdrop,
.rbx-dock.rbx-light, .rbx-expanded.rbx-light, .rbx-pl-backdrop.rbx-light {
  --rbx-surface:    #ffffff;
  --rbx-surface-2:  color-mix(in srgb, rgb(var(--accent-rgb)) 7%, #ffffff);
  --rbx-surface-3:  var(--bg4);
  --rbx-text:       var(--text);
  --rbx-text-muted: var(--text2);
  --rbx-border:     rgba(0, 0, 0, .08);
  --rbx-shadow:     0 18px 50px rgba(var(--accent-rgb), .18);
  --rbx-label:      var(--accent-strong);
  /* Glass dock — LIGHT: translucent white/lavender with a soft purple glow. */
  --rbx-dock-glass-bg:     rgba(255, 255, 255, 0.48);
  --rbx-dock-glass-border: rgba(var(--accent-rgb), 0.26);
  --rbx-dock-glass-shadow: 0 10px 38px rgba(var(--accent-rgb), .22), 0 0 0 1px rgba(var(--accent-rgb), .10);
}

#radioboxPage { padding: 20px 24px 120px; }

/* Header */
.rbx-header { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; }
.rbx-title { font-size: 1.6rem; font-weight: 800; color: var(--text, #111); margin: 0; }
.rbx-beta {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--rbx-purple-main);
  padding: 3px 8px; border-radius: 999px;
}
.rbx-back {
  border: 1px solid var(--border, #e3e3e8); background: var(--bg2, #f6f6f8);
  color: var(--text, #111); font-weight: 600; padding: 7px 14px;
  border-radius: var(--radius-sm, 8px); cursor: pointer;
}
.rbx-back:hover { background: var(--bg3, #eee); }

/* Sections + grid */
.rbx-section { font-size: 1.05rem; font-weight: 700; color: var(--text, #111); margin: 22px 0 12px; }
/* Column count keys off the RadioBox panel's OWN width (container query), not the
   viewport — the sidebar offset makes viewport breakpoints unreliable. */
#radioboxPage { container-type: inline-size; }
.rbx-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* exactly 4 per row */
  gap: 16px;
}
@container (max-width: 640px) { .rbx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@container (max-width: 470px) { .rbx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@container (max-width: 300px) { .rbx-grid { grid-template-columns: 1fr; } }
.rbx-loading, .rbx-empty { color: var(--text3, #888); padding: 28px 4px; }

/* Cards (tracks + playlists) — premium My Audio card: rounded surface, hover
   lift, cover with a reveal-on-hover play button, and (owned uploads) an inline
   visibility dropdown. Accent is the account colour via the --rbx-* tokens. */
.rbx-card {
  position: relative;
  display: flex; flex-direction: column; text-align: left;
  background: var(--rbx-surface); color: var(--rbx-text);
  border: 1px solid var(--rbx-border);
  border-radius: 18px; padding: 12px;
  box-shadow: 0 14px 34px -18px rgba(20, 12, 30, .28);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.rbx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 54px -22px rgba(20, 12, 30, .40);
  border-color: color-mix(in srgb, rgb(var(--accent-rgb)) 22%, var(--rbx-border));
}
.rbx-dark .rbx-card:hover { box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .70); }

/* Cover — square art with hover play + gradient overlay (trackCard). */
.rbx-cover {
  position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: var(--rbx-surface-2); cursor: pointer;
}
.rbx-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vinyl motif (Claude Design) — the no-cover card art: a drawn record on a
   per-track gradient. The gradient + label colour are set inline per track. */
.rbx-vinyl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.rbx-vinyl-disc {
  width: 60%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0b0b10 0 33%, #191921 34%, #101018 100%);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .05);
  display: flex; align-items: center; justify-content: center;
}
.rbx-vinyl-label { width: 36%; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rbx-vinyl-hole { width: 22%; aspect-ratio: 1 / 1; border-radius: 50%; background: #0b0b10; }
.rbx-cover-ov {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(to top, rgba(8, 4, 14, .55), rgba(8, 4, 14, 0) 58%);
}
.rbx-cover:hover .rbx-cover-ov { opacity: 1; }
.rbx-cover-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateY(10px) scale(.88);
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center; color: var(--rbx-purple-main);
  opacity: 0; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.rbx-cover-play-ic { display: inline-flex; margin-left: 3px; }
.rbx-cover:hover .rbx-cover-play,
.rbx-cover-play:focus-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rbx-cover-play:hover { transform: translate(-50%, -50%) scale(1.06); }

/* Simple cover img for playlist cards (no hover-play). */
.rbx-card-cover {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 12px; background: var(--rbx-surface-2); margin-bottom: 12px;
}

.rbx-card-body { padding: 12px 4px 2px; }
.rbx-card-title { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; color: var(--rbx-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbx-card-sub { font-size: .82rem; font-weight: 600; color: var(--rbx-text-muted); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbx-card-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px;
  font-size: .78rem; font-weight: 700; color: var(--rbx-text-muted);
}
.rbx-card-meta-pill {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
}
.rbx-card-meta-ic { display: inline-flex; flex: none; }
.rbx-card-meta-dot {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--rbx-purple-main);
  box-shadow: 0 0 10px -2px var(--rbx-purple-main);
}
.rbx-card-meta-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbx-xp-stats {
  font-size: .78rem; font-weight: 700; color: var(--rbx-text-muted); margin-top: 6px;
}
.rbx-card-report {
  position: absolute; top: 18px; right: 18px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(15, 23, 42, .46); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55);
  cursor: pointer; opacity: .88;
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
.rbx-card-report:hover,
.rbx-card-report:focus-visible {
  opacity: 1; transform: scale(1.05); background: rgba(15, 23, 42, .66);
}
.rbx-card-report-ic { display: inline-flex; }

/* Last-resort cover placeholder (only if the default turntable asset itself
   fails to load) — a plain purple gradient tile, no initials. */
.rbx-cover-fallback {
  background: linear-gradient(135deg, var(--rbx-purple-deep, var(--accent-dark)), color-mix(in srgb, rgb(var(--accent-rgb)) 16%, #0f172a));
}

/* Playlist detail */
.rbx-pl-head { display: flex; gap: 18px; align-items: flex-end; margin: 6px 0 20px; flex-wrap: wrap; }
.rbx-pl-cover { width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius, 12px);
  background: var(--bg3, color-mix(in srgb, rgb(var(--accent-rgb)) 7%, #ffffff)); }
.rbx-pl-meta { display: flex; flex-direction: column; gap: 8px; }
.rbx-pl-count { color: var(--text3, #888); font-size: .9rem; }
.rbx-playall {
  align-self: flex-start; margin-top: 4px; border: none; cursor: pointer;
  background: var(--rbx-purple-main); color: #fff;
  font-weight: 700; padding: 9px 18px; border-radius: 999px;
}
.rbx-playall:hover { filter: brightness(1.05); }

/* Track rows (playlist detail) */
.rbx-tracklist { display: flex; flex-direction: column; }
.rbx-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: transparent; border: none; border-bottom: 1px solid var(--border, color-mix(in srgb, rgb(var(--accent-rgb)) 7%, #ffffff));
  padding: 11px 8px; cursor: pointer; color: var(--text, #111);
}
.rbx-row:hover { background: var(--bg2, #f6f6f8); }
.rbx-row-num { width: 22px; color: var(--text3, #999); font-size: .85rem; text-align: right; }
.rbx-row-info { flex: 1; min-width: 0; }
.rbx-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbx-row-sub { font-size: .82rem; color: var(--text3, #888);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbx-row-dur { color: var(--text3, #999); font-size: .82rem; }

/* ── Persistent player dock (mounted on <body>, survives navigation) ──────
   RadioBox-only. Reserves a right-side safe zone (--rbx-message-safe-width)
   so the dock never renders under the floating Messages dock (#dmFloatingRoot,
   fixed bottom-right, z-index 9000, hidden <768px). We DO NOT query, move,
   resize, or restyle Messages — we only keep RadioBox clear of it. The dock
   z-index (1200) is also below Messages (9000) as a belt-and-suspenders. */
.rbx-dock {
  --rbx-message-safe-width: 360px;           /* clears the Messages launcher + open inbox panel */
  /* Floating glass pill: detached 16px from the bottom + sidebar/safe-zone, with
     rounded corners. The +16px on the right keeps (more than) the Messages
     clearance. The translucent tint + blur live on ::before (the glass LAYER)
     so the page shows through; the dock itself is transparent and the controls
     sit on top at z-index 1 — sharp, never blurred. */
  position: fixed; left: calc(var(--sidebar-w, 240px) + 16px);
  right: calc(var(--rbx-message-safe-width) + 16px); bottom: 16px;
  display: none; flex-wrap: nowrap; align-items: center; gap: 6px 12px;
  padding: 10px 16px; z-index: 1200; border-radius: 18px;
  background: transparent; border: 1px solid var(--rbx-dock-glass-border);
  box-shadow: var(--rbx-dock-glass-shadow);
}
/* Glass layer — translucent tint + backdrop blur of the page behind the dock. */
.rbx-dock::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: var(--rbx-dock-glass-bg);
  -webkit-backdrop-filter: var(--rbx-dock-blur); backdrop-filter: var(--rbx-dock-blur);
  pointer-events: none;
}
/* Controls ride above the glass layer (kept sharp). */
.rbx-dock > * { position: relative; z-index: 1; }
/* Fallback when backdrop-filter is unsupported: make the glass layer the opaque
   themed surface so text stays readable (no see-through-without-blur). */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .rbx-dock::before { background: var(--rbx-surface, #fff); }
}
.rbx-dock.rbx-dock-open { display: flex; }

/* Left cluster: cover + title/artist */
.rbx-dock-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 160px; max-width: 280px; }
.rbx-dock-cover { width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
  background: var(--rbx-surface-2); flex: 0 0 auto; }
.rbx-dock-meta { min-width: 0; }
.rbx-dock-title { font-weight: 700; font-size: .9rem; color: var(--rbx-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbx-dock-sub { font-size: .78rem; color: var(--rbx-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Transport + action clusters */
.rbx-dock-transport { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; flex-wrap: nowrap; }
.rbx-dock-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; flex-wrap: nowrap; }

/* Progress cluster — grows when wide, wraps to its own row when tight */
.rbx-dock-progress { display: flex; align-items: center; gap: 8px; flex: 1 1 100px; min-width: 80px; }
.rbx-dock-seek { flex: 1; accent-color: var(--rbx-purple-main); cursor: pointer; min-width: 60px; }
.rbx-dock-cur, .rbx-dock-tot { font-size: .72rem; color: var(--rbx-text-muted);
  width: 38px; text-align: center; flex: 0 0 auto; }

/* Icon buttons */
.rbx-dock-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--rbx-text); font-size: 1rem; line-height: 1;
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.rbx-dock-btn:hover { background: var(--rbx-surface-3); }
.rbx-dock-btn.rbx-active { color: var(--rbx-purple-main); }
.rbx-dock-play { font-size: 1.05rem; background: var(--rbx-purple-main); color: #fff;
  box-shadow: 0 2px 10px var(--rbx-purple-glow); }
.rbx-dock-play:hover { filter: brightness(1.08); background: var(--rbx-purple-main); }
.rbx-dock-btn.rbx-dock-expand { color: var(--rbx-purple-main); }
.rbx-dock-btn.rbx-dock-expand:hover { background: var(--rbx-purple-soft); }
.rbx-dock-close { background: transparent; border: none; cursor: pointer; align-self: center;
  color: var(--rbx-text-muted); font-size: .9rem; width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; }
.rbx-dock-close:hover { background: var(--rbx-surface-3); color: var(--rbx-text); }
.rbx-dock-buffering .rbx-dock-play { opacity: .6; }

/* Narrow desktop / tablet: the one-row layout no longer fits, so allow wrap and
   drop the progress bar onto its own full-width line BELOW the controls. Keeps a
   compact 2-row dock (controls row + progress row); the close button stays in
   the controls row (never dropped onto a line by itself). */
@media (max-width: 1200px) {
  .rbx-dock { flex-wrap: wrap; gap: 4px 8px; }
  /* basis 0 so the metadata cluster only takes leftover space and the control
     clusters stay on ONE row (flex-wrap breaks on basis sums, not shrink-to-fit). */
  .rbx-dock-left { flex: 1 1 0; min-width: 0; max-width: none; }
  .rbx-dock-cover { width: 44px; height: 44px; }     /* smaller art so the controls row fits */
  .rbx-dock-btn { width: 30px; height: 30px; }
  .rbx-dock-progress { flex-basis: 100%; order: 5; min-width: 0; }  /* progress drops below */
}

/* Mobile/narrow: Messages dock is hidden (<768px) → no safe zone needed.
   Go full-width and wrap into compact rows. Messages untouched. */
@media (max-width: 768px) {
  /* Messages is hidden <768px → safe-zone 0. Keep a wide floating glass pill
     (small 8px margins) instead of edge-to-edge. */
  .rbx-dock { --rbx-message-safe-width: 0px; left: 8px; right: 8px; bottom: 8px;
    gap: 8px; padding: 8px 10px; border-radius: 14px; }
  .rbx-dock-left { flex: 1 1 auto; max-width: none; }
  .rbx-dock-actions { margin-left: auto; }
}

/* ── Add-to-playlist picker (RadioBox-scoped modal) ───────────────────────
   Centered dialog rendered above the app modal layer (z 10050 > Messages'
   9000) so the Messages dock can't poke through; Messages is never modified. */
.rbx-pl-backdrop {
  position: fixed; inset: 0; z-index: 10050; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, .45);
}
.rbx-pl-backdrop.rbx-pl-open { display: flex; }
.rbx-pl-sheet {
  width: 100%; max-width: 420px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--bg, #fff); color: var(--text, #111);
  border: 1px solid var(--border, #e3e3e8); border-radius: var(--radius, 14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.30); overflow: hidden;
}
.rbx-pl-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border, color-mix(in srgb, rgb(var(--accent-rgb)) 7%, #ffffff)); }
.rbx-pl-heading { font-weight: 800; font-size: 1.02rem; }
.rbx-pl-close { background: transparent; border: none; cursor: pointer; color: var(--text3, #888);
  width: 32px; height: 32px; border-radius: 50%; font-size: .95rem; }
.rbx-pl-close:hover { background: var(--bg3, #eee); color: var(--text, #111); }
.rbx-pl-body { padding: 8px; overflow-y: auto; }
.rbx-pl-loading, .rbx-pl-empty { color: var(--text3, #888); padding: 22px 12px; text-align: center; }
.rbx-pl-list { display: flex; flex-direction: column; }
.rbx-pl-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: var(--radius-sm, 8px);
  padding: 10px; cursor: pointer; color: var(--text, #111); }
.rbx-pl-row:hover { background: var(--bg2, #f6f6f8); }
.rbx-pl-row:disabled, .rbx-pl-row-busy { opacity: .55; cursor: default; }
.rbx-pl-row-cover { width: 40px; height: 40px; border-radius: 6px; object-fit: cover;
  background: var(--bg3, color-mix(in srgb, rgb(var(--accent-rgb)) 7%, #ffffff)); flex: 0 0 auto; }
.rbx-pl-row-info { min-width: 0; }
.rbx-pl-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbx-pl-row-sub { font-size: .8rem; color: var(--text3, #888); }

/* Create-new-playlist section */
.rbx-pl-divider { display: flex; align-items: center; gap: 10px; margin: 10px 4px; color: var(--text3, #999); font-size: .8rem; }
.rbx-pl-divider::before, .rbx-pl-divider::after { content: ""; flex: 1; height: 1px; background: var(--border, color-mix(in srgb, rgb(var(--accent-rgb)) 7%, #ffffff)); }
.rbx-pl-create { display: flex; gap: 8px; padding: 6px 6px 10px; }
.rbx-pl-input {
  flex: 1; min-width: 0; padding: 9px 12px; font: inherit;
  color: var(--text, #111); background: var(--bg2, #f6f6f8);
  border: 1px solid var(--border, #e3e3e8); border-radius: var(--radius-sm, 8px);
}
.rbx-pl-input:focus { outline: none; border-color: var(--rbx-purple-main); }
.rbx-pl-input-err { border-color: var(--red, #e5484d); }
.rbx-pl-create-btn {
  flex: 0 0 auto; border: none; cursor: pointer; font-weight: 700; white-space: nowrap;
  background: var(--rbx-purple-main); color: #fff;
  padding: 9px 14px; border-radius: var(--radius-sm, 8px);
}
.rbx-pl-create-btn:hover { filter: brightness(1.05); }
.rbx-pl-create-btn:disabled { opacity: .6; cursor: default; }

/* ── Header tab bar + sort control ────────────────────────────────────────
   Tabs sit under "RadioBox [BETA]" and above the content grid (NOT in the
   sidebar or the bottom player). On mobile the tab row scrolls horizontally. */
.rbx-tabbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.rbx-tabs { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.rbx-tabs::-webkit-scrollbar { display: none; }
.rbx-tab {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-weight: 700; font-size: .92rem; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px;
  background: var(--bg2, #f6f6f8); color: var(--text2, #555); border: 1px solid var(--border, #e3e3e8);
}
.rbx-tab:hover { background: var(--bg3, #eee); }
.rbx-tab-active, .rbx-tab-active:hover {
  background: var(--rbx-purple-main); color: #fff; border-color: transparent;
  box-shadow: 0 2px 12px var(--rbx-purple-glow);
}
.rbx-sort { position: relative; flex: 0 0 auto; }
.rbx-sort-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg2, #f6f6f8); color: var(--text, #111); border: 1px solid var(--border, #e3e3e8);
}
.rbx-sort-btn:hover { background: var(--bg3, #eee); }
.rbx-sort-caret { font-size: .7rem; opacity: .8; }
.rbx-sort-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 140px;
  background: var(--bg, #fff); border: 1px solid var(--border, #e3e3e8); border-radius: var(--radius-sm, 8px);
  box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 4px;
}
.rbx-sort-open .rbx-sort-menu { display: block; }
.rbx-sort-item { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  padding: 8px 12px; border: none; background: transparent; color: var(--text, #111); border-radius: 6px; }
.rbx-sort-item:hover { background: var(--bg2, #f6f6f8); }
.rbx-sort-item-active { color: var(--rbx-purple-main); font-weight: 700; }

/* ── My Audio dashboard ───────────────────────────────────────────────────*/
.rbx-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.rbx-subpill {
  cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem; white-space: nowrap;
  padding: 7px 13px; border-radius: 999px;
  background: var(--bg2, #f6f6f8); color: var(--text2, #555); border: 1px solid var(--border, #e3e3e8);
}
.rbx-subpill:hover { background: var(--bg3, #eee); }
.rbx-subpill-active, .rbx-subpill-active:hover { background: var(--rbx-purple-main); color: #fff; border-color: transparent; }
.rbx-mysection { min-height: 80px; }

.rbx-upload-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  max-width: 460px; margin: 12px auto; padding: 28px 22px;
  background: var(--bg2, #f6f6f8); border: 1px dashed var(--border2, var(--border, #d8d8e0)); border-radius: var(--radius, 12px);
}
.rbx-upload-icon { font-size: 1.6rem; }
.rbx-upload-title { font-weight: 800; color: var(--text, #111); }
.rbx-upload-msg { font-size: .88rem; color: var(--text3, #888); }

/* Upload Audio form (R4) */
.rbx-upload-form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; margin: 12px auto; }
.rbx-up-field { display: flex; flex-direction: column; gap: 5px; }
.rbx-up-label { font-size: .8rem; font-weight: 700; color: var(--text2, #555); }
.rbx-up-input {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--border2, var(--border, #d8d8e0)); border-radius: 10px;
  background: var(--bg, #fff); color: var(--text, #111); font: inherit;
}
.rbx-up-input:focus { outline: none; border-color: var(--rbx-purple-main); }
.rbx-up-file { font: inherit; color: var(--text2, #555); font-size: .86rem; }
.rbx-up-check { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; color: var(--text2, #555); cursor: pointer; }
.rbx-up-check input { margin-top: 2px; flex: 0 0 auto; }
.rbx-up-bar { height: 6px; border-radius: 3px; background: var(--bg3, color-mix(in srgb, rgb(var(--accent-rgb)) 7%, #ffffff)); overflow: hidden; }
.rbx-up-fill { height: 100%; width: 0; background: var(--rbx-purple-main); transition: width .2s ease; }
.rbx-up-status { font-size: .84rem; color: var(--text3, #888); min-height: 1em; }
.rbx-up-status.rbx-up-err { color: var(--red, #e5484d); }
.rbx-up-submit {
  align-self: flex-start; padding: 9px 18px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--rbx-purple-main); color: #fff; font: inherit; font-weight: 700;
}
.rbx-up-submit:hover { filter: brightness(1.05); }
.rbx-up-submit:disabled { opacity: .6; cursor: default; }

/* ── Upload Audio redesign (Claude Design handoff) — accent = account colour ─ */
.rbx-upl { max-width: 760px; }
.rbx-upl-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; }
.rbx-upl-badge {
  flex: none; width: 44px; height: 44px; border-radius: 13px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--rbx-purple-bright), var(--rbx-purple-main));
  box-shadow: 0 8px 22px -8px rgba(var(--accent-rgb), .6);
}
.rbx-upl-h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--rbx-text); line-height: 1.1; }
.rbx-upl-hsub { font-size: .87rem; font-weight: 500; color: var(--rbx-text-muted); margin-top: 3px; }

.rbx-upl-card {
  background: var(--rbx-surface); border: 1px solid var(--rbx-border); border-radius: 22px;
  padding: 26px; box-shadow: 0 24px 60px -34px rgba(20, 12, 30, .3);
}
.rbx-dark .rbx-upl-card { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7); }
.rbx-upl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.rbx-upl-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rbx-upl-full { grid-column: 1 / -1; }
.rbx-upl-flabel { font-size: .8rem; font-weight: 700; color: var(--rbx-text); }
.rbx-upl-opt { font-weight: 500; color: var(--rbx-text-muted); }

.rbx-upl-input {
  width: 100%; font: inherit; font-size: .95rem; font-weight: 500; color: var(--rbx-text);
  background: var(--rbx-surface-2); border: 1px solid var(--rbx-border); border-radius: 13px;
  padding: 13px 15px; transition: border-color .16s ease, box-shadow .16s ease;
}
.rbx-upl-input::placeholder { color: var(--rbx-text-muted); opacity: .7; }
.rbx-upl-input:focus { outline: none; border-color: var(--rbx-purple-main); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16); }
.rbx-upl-selectwrap { position: relative; }
.rbx-upl-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; }
.rbx-upl-chev { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--rbx-text-muted); display: inline-flex; }

.rbx-upl-drop {
  display: flex; align-items: center; gap: 15px; cursor: pointer; padding: 16px 18px;
  border-radius: 15px; border: 2px dashed var(--rbx-border); background: var(--rbx-surface-2);
  transition: border-color .18s ease, background .18s ease;
}
.rbx-upl-drop:hover,
.rbx-upl-drop-active,
.rbx-upl-drop-filled { border-color: var(--rbx-purple-main); background: rgba(var(--accent-rgb), .1); }
.rbx-upl-hiddenfile { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rbx-upl-dropicon {
  flex: none; width: 50px; height: 50px; border-radius: 14px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), .13); color: var(--rbx-purple-main);
  background-size: cover; background-position: center;
}
.rbx-upl-dropicon-thumb { border: 1px solid var(--rbx-border); }
.rbx-upl-droptext { min-width: 0; }
.rbx-upl-drophead { font-size: .92rem; font-weight: 700; color: var(--rbx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbx-upl-dropsub { font-size: .8rem; font-weight: 500; color: var(--rbx-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rbx-upl-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 11px; cursor: pointer; margin-top: 2px; }
.rbx-upl-checkinput { appearance: none; -webkit-appearance: none; width: 0; height: 0; margin: 0; opacity: 0; flex: none; }
.rbx-upl-box {
  flex: none; width: 22px; height: 22px; border-radius: 7px; color: #fff;
  border: 2px solid var(--rbx-border); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease;
}
.rbx-upl-boxcheck { display: inline-flex; opacity: 0; transition: opacity .15s ease; }
.rbx-upl-checkinput:checked + .rbx-upl-box { border-color: var(--rbx-purple-main); background: var(--rbx-purple-main); }
.rbx-upl-checkinput:checked + .rbx-upl-box .rbx-upl-boxcheck { opacity: 1; }
.rbx-upl-checkinput:focus-visible + .rbx-upl-box { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3); }
.rbx-upl-checktext { font-size: .9rem; font-weight: 500; color: var(--rbx-text); }

.rbx-upl-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rbx-border); }
.rbx-upl-submit {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font: inherit;
  font-size: .95rem; font-weight: 800; color: #fff; padding: 13px 24px; border: none; border-radius: 13px;
  background: linear-gradient(135deg, var(--rbx-purple-bright), var(--rbx-purple-main));
  box-shadow: 0 14px 30px -12px rgba(var(--accent-rgb), .75);
  transition: filter .15s ease, transform .15s ease;
}
.rbx-upl-submit:hover { filter: brightness(1.05); transform: translateY(-1px); }
.rbx-upl-submit:disabled { opacity: .65; cursor: default; transform: none; }
.rbx-upl-submit-ic { display: inline-flex; }

@media (max-width: 560px) { .rbx-upl-grid { grid-template-columns: 1fr; } }

/* My Audio → Uploads: owner visibility dropdown (Public/Followers/Private with
   descriptions — mobile parity). The pill shows the current state; the menu
   switches it via the owner-bound update RPC. Status dot/icon colours are fixed
   (green/purple/grey); the active check + hover border use the account accent. */
.rbx-vis { position: relative; margin-top: 12px; }
.rbx-vis-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--rbx-border); background: var(--rbx-surface-2); color: var(--rbx-text);
  font: inherit; font-weight: 700; font-size: .82rem;
  transition: border-color .18s ease, background .18s ease;
}
.rbx-vis-btn:hover, .rbx-vis-btn-open { border-color: var(--rbx-purple-main); }
.rbx-vis-btn:disabled { opacity: .6; cursor: default; }
.rbx-vis-cur { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rbx-vis-cur-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbx-vis-dot { flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rbx-dot, #12B981); box-shadow: 0 0 10px -1px var(--rbx-dot, #12B981); }
.rbx-vis-chev { display: inline-flex; opacity: .55; transition: transform .2s ease; }
.rbx-vis-btn-open .rbx-vis-chev { transform: rotate(180deg); }

.rbx-vis-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  background: var(--rbx-surface); border: 1px solid var(--rbx-border); border-radius: 15px; padding: 6px;
  box-shadow: 0 26px 54px -20px rgba(20, 10, 40, .5), 0 2px 8px rgba(20, 10, 40, .12);
  animation: rbxMenuIn .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes rbxMenuIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
.rbx-vis-mi {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 10px; border: none; background: transparent; color: var(--rbx-text);
  font: inherit; text-align: left; cursor: pointer; transition: background .16s ease;
}
.rbx-vis-mi:hover { background: var(--rbx-surface-2); }
.rbx-vis-mi:disabled { cursor: default; }
.rbx-vis-mi-ic { flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; }
.rbx-vis-mi-txt { flex: 1; min-width: 0; display: block; }
.rbx-vis-mi-title { display: block; font-size: .84rem; font-weight: 800; }
.rbx-vis-mi-desc { display: block; font-size: .72rem; font-weight: 600; color: var(--rbx-text-muted); margin-top: 1px; }
.rbx-vis-mi-check { flex: none; display: inline-flex; color: var(--rbx-purple-main); }
.rbx-vis-saving { opacity: .7; pointer-events: none; }

/* Continue Listening rows */
.rbx-continue-cover { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--bg3, color-mix(in srgb, rgb(var(--accent-rgb)) 7%, #ffffff)); flex: 0 0 auto; }
.rbx-continue-bar { height: 4px; border-radius: 2px; background: var(--bg3, color-mix(in srgb, rgb(var(--accent-rgb)) 7%, #ffffff)); margin-top: 6px; overflow: hidden; }
.rbx-continue-fill { height: 100%; background: var(--rbx-purple-main); }

/* ── Expanded full player (RadioBox-scoped, body-mounted) ──────────────────
   Theme-aware premium overlay (surfaces via --rbx-surface*, accent stays
   purple). z-index 1300 sits ABOVE the dock (1200) but BELOW Messages (9000),
   so the Messages dock stays visible/usable and is never modified. Desktop:
   panel centered in the content band (between the sidebar and the dock's right
   safe-zone) so it never sits under Messages; mobile (<768px): full-screen. */
.rbx-expanded { position: fixed; inset: 0; z-index: 1300; display: none; }
.rbx-expanded.rbx-expanded-open { display: block; }
.rbx-expanded-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.rbx-expanded-panel {
  position: absolute; top: 50%;
  left: calc(var(--sidebar-w, 240px) + (100vw - var(--sidebar-w, 240px) - 360px) / 2);
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - var(--sidebar-w, 240px) - 360px - 32px));
  max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 18px 20px; box-sizing: border-box;
  background: var(--rbx-surface); color: var(--rbx-text);
  border: 1px solid var(--rbx-purple-border); border-radius: 20px;
  box-shadow: var(--rbx-shadow);
}
.rbx-expanded-top { display: flex; align-items: center; justify-content: space-between; }
.rbx-xp-nowplaying { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rbx-label); }
.rbx-xp-icon { background: transparent; border: none; cursor: pointer; color: var(--rbx-text-muted);
  width: 32px; height: 32px; border-radius: 50%; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.rbx-xp-icon:hover { background: var(--rbx-surface-3); color: var(--rbx-text); }
.rbx-expanded-art { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, var(--rbx-purple-deep), color-mix(in srgb, rgb(var(--accent-rgb)) 16%, #0f172a)); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.rbx-xp-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.rbx-xp-cover-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: rgba(255, 255, 255, .55); }
.rbx-expanded-meta { text-align: center; }
.rbx-xp-title { font-weight: 800; font-size: 1.15rem; color: var(--rbx-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbx-xp-creator { font-size: .9rem; color: var(--rbx-text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbx-expanded-actions { display: flex; align-items: center; justify-content: center; gap: 18px; }
.rbx-expanded-progress { display: flex; align-items: center; gap: 10px; }
.rbx-xp-seek { flex: 1; accent-color: var(--rbx-purple-main); cursor: pointer; min-width: 60px; }
.rbx-xp-cur, .rbx-xp-tot { font-size: .72rem; color: var(--rbx-text-muted); width: 38px; text-align: center; flex: 0 0 auto; }
/* PART A: 3-column grid (left group | play | right group). The 1fr side columns
   are equal width and the play button is the centered `auto` column, so the play
   button is always at the panel's horizontal center regardless of how many
   buttons each side holds. The right group carries an invisible spacer so both
   sides are visually balanced (3 slots each). */
.rbx-expanded-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.rbx-xp-ctl-side { display: flex; align-items: center; gap: 10px; }
.rbx-xp-ctl-left { justify-self: end; }
.rbx-xp-ctl-right { justify-self: start; }
.rbx-xp-ctl-spacer { width: 40px; height: 40px; flex: 0 0 auto; } /* balances the 3rd left button; invisible */
/* panel button colors — theme-aware (override the base dock-btn colors here) */
.rbx-expanded .rbx-dock-btn { color: var(--rbx-text); width: 40px; height: 40px; font-size: 1.1rem; }
.rbx-expanded .rbx-dock-btn:hover { background: var(--rbx-surface-3); }
.rbx-expanded .rbx-dock-btn.rbx-active { color: var(--rbx-purple-main); }
.rbx-expanded .rbx-xp-play { background: var(--rbx-purple-main); color: #fff; width: 58px; height: 58px; font-size: 1.4rem;
  box-shadow: 0 4px 18px var(--rbx-purple-glow); }
.rbx-expanded .rbx-xp-play:hover { background: var(--rbx-purple-main); filter: brightness(1.08); }
.rbx-expanded-queue { border-top: 1px solid var(--rbx-border); padding-top: 12px; }
.rbx-xp-queue-title { font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rbx-label); margin-bottom: 8px; }
.rbx-xp-queue-empty { color: var(--rbx-text-muted); font-size: .86rem; padding: 6px 2px; }
.rbx-xp-queue-list { display: flex; flex-direction: column; gap: 2px; }
.rbx-xp-qrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 10px; padding: 8px; cursor: pointer; color: var(--rbx-text); }
.rbx-xp-qrow:hover { background: var(--rbx-surface-3); }
.rbx-xp-qcover { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--rbx-purple-deep), color-mix(in srgb, rgb(var(--accent-rgb)) 16%, #0f172a)); }
.rbx-xp-qinfo { flex: 1; min-width: 0; }
.rbx-xp-qtitle { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbx-xp-qsub { font-size: .76rem; color: var(--rbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbx-xp-qdur { font-size: .74rem; color: var(--rbx-text-muted); flex: 0 0 auto; }

@media (max-width: 768px) {
  .rbx-expanded-panel {
    left: 0; top: 0; transform: none; width: 100vw; height: 100%; max-height: none;
    border-radius: 0; border: none;
  }
}