/*
 * Media Store — Queue slide-out panel + rows.
 */

.mst-queue-backdrop {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9100;
	opacity: 0; transition: opacity 0.24s;
}
.mst-queue-backdrop:not([hidden]) { opacity: 1; }

.mst-queue-panel {
	position: fixed;
	top: 0; right: 0; bottom: var(--mst-player-h);
	width: min(380px, 88vw);
	z-index: 9200;
	display: flex; flex-direction: column;
	background: rgba(20, 20, 26, 0.92);
	-webkit-backdrop-filter: blur(28px) saturate(1.4);
	backdrop-filter: blur(28px) saturate(1.4);
	border-left: 1px solid var(--mst-player-border);
	box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
	color: #fff;
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.mst-queue-panel.is-open { transform: translateX(0); }

.mst-queue-panel__head {
	display: flex; align-items: center; gap: 12px;
	padding: 18px 20px 12px;
	border-bottom: 1px solid var(--mst-player-border);
}
.mst-queue-panel__title { font-size: 1.0625rem; font-weight: 700; margin: 0; flex: 1; }
.mst-queue-panel__clear {
	background: none; border: 0; color: var(--mst-player-muted);
	font-size: 0.8125rem; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.mst-queue-panel__clear:hover { color: #fff; }
.mst-queue-panel__close {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; background: none; border: 0;
	color: var(--mst-player-muted); cursor: pointer; border-radius: 50%;
}
.mst-queue-panel__close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.mst-queue-panel__body { flex: 1; overflow-y: auto; padding: 12px 12px 24px; }

.mst-queue-section { margin-bottom: 18px; }
.mst-queue-section__label {
	font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.06em; color: var(--mst-player-muted);
	margin: 0 0 8px; padding: 0 8px;
}
.mst-queue-list { list-style: none; margin: 0; padding: 0; }
.mst-queue-empty { color: var(--mst-player-muted); font-size: 0.8125rem; text-align: center; padding: 18px; margin: 0; }

/* Rows */
.mst-q-row {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 8px; border-radius: 10px; cursor: pointer;
	transition: background 0.12s;
}
.mst-q-row:hover { background: rgba(255, 255, 255, 0.07); }
.mst-q-row.is-current { background: rgba(255, 255, 255, 0.1); cursor: default; }
.mst-q-row.is-dragging { opacity: 0.5; }
.mst-q-row.is-over { box-shadow: inset 0 2px 0 var(--mst-accent); }

.mst-q-row__drag {
	color: var(--mst-player-muted); cursor: grab; flex-shrink: 0;
	display: flex; align-items: center;
}
.mst-q-row__cover {
	width: 40px; height: 40px; border-radius: 6px; object-fit: cover;
	flex-shrink: 0; background: rgba(255, 255, 255, 0.08);
}
.mst-q-row__cover--empty { display: inline-block; }
.mst-q-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mst-q-row__title {
	font-size: 0.8125rem; font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mst-q-row.is-current .mst-q-row__title { color: var(--mst-accent); }
.mst-q-row__artist {
	font-size: 0.6875rem; color: var(--mst-player-muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mst-q-row__dur { font-size: 0.6875rem; color: var(--mst-player-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mst-q-row__remove {
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; background: none; border: 0;
	color: var(--mst-player-muted); cursor: pointer; border-radius: 50%; flex-shrink: 0;
	opacity: 0; transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.mst-q-row:hover .mst-q-row__remove { opacity: 1; }
.mst-q-row__remove:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

@media (max-width: 768px) {
	.mst-queue-panel { width: 100vw; }
	/* Keep the queue clear of the bottom bar + iPhone home indicator. */
	.mst-queue-panel__body { padding-bottom: calc( var(--mst-player-h, 80px) + 16px + env( safe-area-inset-bottom, 0px ) ); }
	.mst-queue-panel__head { padding-top: calc( 14px + env( safe-area-inset-top, 0px ) ); }
}
/* Larger touch targets for queue rows + actions on touch devices. */
@media (hover: none) and (pointer: coarse) {
	.mst-q-row { min-height: 52px; }
	.mst-q-row__remove, .mst-q-row__addpl, .mst-q-row__drag { min-width: 40px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.mst-queue-panel, .mst-queue-backdrop { transition: none; }
}