/* =========================================================================
   Song history drawer (AzuraCast)
   Trigger sits in the player's action bar; panel opens above it.
   Added 2026-08-17. Markup is injected by assets/js/song-history.js
   in the proradio-child theme.

   NOTE: never use position:fixed for the panel. .qtmplayer__advanced has
   transform:translateX(0%), and a transformed ancestor becomes the
   containing block for fixed descendants - so "fixed" resolves against the
   player instead of the viewport and the panel lands off-screen.
   ========================================================================= */

.rlc-sh {
	position: absolute;
	left: 50%;
	display: inline-flex;
	align-items: center;
	height: 100%;
	transform: translateX(-50%);
	font-size: 13px;
	line-height: 1.3;
}

/* Matches the sibling material-icons controls in .qtmplayer__actions. */
.rlc-sh__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	opacity: .85;
	cursor: pointer;
}

.rlc-sh__tab:hover,
.rlc-sh__tab:focus-visible {
	opacity: 1;
}

.rlc-sh--open .rlc-sh__tab {
	color: #d40606;
	opacity: 1;
}

.rlc-sh__panel {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 12px);
	z-index: 200;
	width: 320px;
	max-width: calc(100vw - 32px);
	max-height: 46vh;
	overflow-y: auto;
	overflow-x: hidden;
	transform: translateX(-50%);
	border-radius: 6px;
	background: rgba(17, 17, 17, .96);
	box-shadow: 0 6px 28px rgba(0, 0, 0, .5);
	text-align: left;
}

.rlc-sh__list {
	margin: 0;
	padding: 6px;
	list-style: none;
}

.rlc-sh__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px;
	border-radius: 4px;
}

.rlc-sh__loading {
	justify-content: center;
	color: rgba(255, 255, 255, .55);
	font-size: 12px;
}

.rlc-sh__item + .rlc-sh__item {
	border-top: 1px solid rgba(255, 255, 255, .07);
}

.rlc-sh__art {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 3px;
	object-fit: cover;
}

.rlc-sh__meta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0; /* lets the ellipsis work inside a flex child */
}

.rlc-sh__title,
.rlc-sh__artist {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rlc-sh__title {
	color: #fff;
	font-weight: 600;
}

.rlc-sh__artist {
	color: rgba(255, 255, 255, .62);
	font-size: 12px;
}

.rlc-sh__time {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, .45);
	font-size: 11px;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.rlc-sh__panel {
		width: 280px;
		max-width: calc(100vw - 24px);
		max-height: 44vh;
	}
}

/* ---------------------------------------------------------------------------
   Pop-up player only (body.qtmplayer--page-popup)

   Out of the flex flow, so the player's own controls keep their natural
   positions and the play button stays centred.

   The `right` value below is only a fallback: mirrorVolume() in the JS
   measures where the volume icon actually sits and overwrites it. The player
   sizes the volume box differently at different widths, so no static value
   (and no flex rule) can mirror it correctly at every size.
   --------------------------------------------------------------------------- */
.qtmplayer--page-popup .rlc-sh {
	position: absolute;
	top: 50%;
	left: auto;
	right: 25px;
	height: auto;
	transform: translateY(-50%);
}

/* .rlc-sh is positioned, so it is the panel's containing block: anchor the
   panel's right edge to the icon and let it extend leftwards. */
.qtmplayer--page-popup .rlc-sh__panel {
	left: auto;
	right: 0;
	bottom: calc(100% + 14px);
	top: auto;
	width: 320px;
	max-width: calc(100vw - 24px);
	max-height: 50vh;
	transform: none;
}