/* ========================================================
   Music Showcase — front-end widget
   Override the CSS variables to retheme per client.
   Everything is scoped under .music-showcase-widget so it
   never leaks into the surrounding theme.
   ======================================================== */

.music-showcase-widget {
	--ms-bg: #121214;
	--ms-row: #1c1c20;
	--ms-row-hover: #25252b;
	--ms-row-playing: #2e2730;
	--ms-text: #f4f4f5;
	--ms-muted: #9a9aa2;
	--ms-border: #2c2c32;
	--ms-accent: #e0263e;
	--ms-radius: 10px;

	position: relative;
	background: var(--ms-bg);
	color: var(--ms-text);
	border-radius: var(--ms-radius);
	padding: 18px 18px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
}

.music-showcase-widget *,
.music-showcase-widget *::before,
.music-showcase-widget *::after {
	box-sizing: border-box;
}

.music-showcase-widget img { max-width: 100%; display: block; }

.ms-no-tracks {
	padding: 40px 0;
	text-align: center;
	color: var(--ms-muted);
}

/* ---------- tracklist ---------- */

.ms-tracklist {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 18px;
	max-height: 460px;
	overflow-y: auto;
}

.ms-track {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	background: var(--ms-row);
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.12s ease;
}

.ms-track:hover { background: var(--ms-row-hover); }
.ms-track.playing { background: var(--ms-row-playing); color: var(--ms-accent); }
.ms-track.playing .ms-track-title { color: var(--ms-accent); }

.ms-track-num {
	width: 22px;
	text-align: center;
	color: var(--ms-muted);
	font-size: 13px;
	flex-shrink: 0;
}

.ms-track-play {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--ms-border);
	background: transparent;
	color: var(--ms-text);
	cursor: pointer;
	flex-shrink: 0;
	font-size: 12px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s ease, border-color 0.12s ease;
}
.ms-track-play:hover { background: var(--ms-accent); border-color: var(--ms-accent); }

.ms-track-cover {
	width: 36px;
	height: 36px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--ms-border);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ms-muted);
}
.ms-track-cover img { width: 100%; height: 100%; object-fit: cover; }
.ms-cover-placeholder { font-size: 18px; }

.ms-track-meta { flex: 1; min-width: 0; }
.ms-track-title {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ms-track-sub {
	font-size: 12px;
	color: var(--ms-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-track-time {
	font-size: 12px;
	color: var(--ms-muted);
	flex-shrink: 0;
}

/* ---------- player bar (sticky at bottom of widget) ---------- */

.ms-player-bar {
	position: sticky;
	bottom: 0;
	background: #0a0a0c;
	border-top: 1px solid var(--ms-border);
	margin: 0 -18px;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	z-index: 2;
}

.ms-pb-now {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 200px;
	max-width: 280px;
}

.ms-pb-cover {
	width: 42px;
	height: 42px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--ms-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ms-muted);
	flex-shrink: 0;
}
.ms-pb-cover img { width: 100%; height: 100%; object-fit: cover; }

.ms-pb-text { min-width: 0; }
.ms-pb-title {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ms-pb-sub {
	font-size: 12px;
	color: var(--ms-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-pb-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ms-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--ms-text);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s ease;
	padding: 0;
	line-height: 1;
}
.ms-btn:hover { background: rgba(255, 255, 255, 0.08); }
.ms-btn-playpause {
	width: 44px;
	height: 44px;
	background: var(--ms-text);
	color: var(--ms-bg);
	font-size: 18px;
}
.ms-btn-playpause:hover {
	background: var(--ms-text);
	transform: scale(1.05);
}

.ms-pb-scrub {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 2 1 240px;
	min-width: 200px;
	font-size: 11px;
	color: var(--ms-muted);
}
.ms-pb-vol {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 130px;
}
.ms-vol-icon { font-size: 14px; }

.ms-seek, .ms-vol {
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	border-radius: 2px;
	background: var(--ms-border);
	cursor: pointer;
	flex: 1;
	min-width: 0;
}
.ms-seek::-webkit-slider-thumb,
.ms-vol::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ms-text);
	cursor: pointer;
	border: none;
}
.ms-seek::-moz-range-thumb,
.ms-vol::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ms-text);
	cursor: pointer;
	border: none;
}

/* Embed slot — shown when current track is Spotify/SoundCloud/YouTube */
.ms-pb-embed-slot { width: 100%; }
.ms-pb-embed-slot:empty { display: none; }
.ms-pb-embed-slot iframe { width: 100%; border-radius: 6px; border: 0; }
.music-showcase-widget.ms-has-embed .ms-pb-scrub,
.music-showcase-widget.ms-has-embed .ms-pb-vol,
.music-showcase-widget.ms-has-embed .ms-btn-playpause {
	opacity: 0.4;
	pointer-events: none;
}

/* ---------- autoplay overlay ---------- */

.ms-autoplay-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	border-radius: var(--ms-radius);
}
.ms-autoplay-btn {
	background: var(--ms-accent);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 14px 32px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- responsive ---------- */

@media (max-width: 600px) {
	.music-showcase-widget { padding: 12px 12px 0; }
	.ms-player-bar { margin: 0 -12px; padding: 10px 12px; }
	.ms-pb-now { flex: 1 1 100%; max-width: 100%; }
	.ms-pb-controls { flex: 0 0 auto; }
	.ms-pb-scrub { flex: 1 1 100%; order: 4; }
	.ms-pb-vol { display: none; }
	.ms-track-time { display: none; }
}