/* ── Audio player card ───────────────────────────────────────
   Fluxer-style audio attachment surface. Rounded rectangle with
   a subtle background, play button on the left, filename + seek
   bar + time on the right, control row underneath. Width is
   constrained so the card feels like a compact inline element
   in a chat message, not a full-width banner. */

.card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 480px;
	padding: 14px 16px;
	background-color: var(--background-secondary);
	border: 1px solid var(--background-modifier-accent);
	border-radius: 0.625rem;
	box-sizing: border-box;
}

/* ── Top row: play button + filename on the same line ──────── */
.topRow {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.playButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background-color: var(--brand-primary);
	border: none;
	border-radius: 50%;
	color: var(--text-on-brand-primary, #fff);
	cursor: pointer;
	flex-shrink: 0;
	transition: filter 0.12s, transform 0.12s;
	-webkit-tap-highlight-color: transparent;
}

.playButton:hover:not(:disabled) {
	filter: brightness(1.08);
}

.playButton:active:not(:disabled) {
	transform: scale(0.96);
}

.playButton:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Filename row ───────────────────────────────────────────
   The stem is a single-line ellipsis'd span and the extension
   is a separate right-flush span, mirroring the Fluxer pattern
   where the extension always stays visible while the middle of
   a long filename gets clipped. Lives inline with the play
   button in the top row; progress bar sits on its own row
   below so it can span the full card width. */
.filenameRow {
	flex: 1;
	display: flex;
	align-items: baseline;
	gap: 2px;
	min-width: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--text-primary);
}

.filenameStem {
	min-width: 0;
	flex-shrink: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.filenameExt {
	flex-shrink: 0;
}

/* ── Progress row: seek bar + time label ───────────────────── */
.progressRow {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.progressTrack {
	position: relative;
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background-color: var(--background-modifier-accent);
	cursor: pointer;
}

.progressFill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--progress, 0%);
	border-radius: 999px;
	background-color: var(--brand-primary);
	pointer-events: none;
}

/* Invisible native range input sits on top of the visual track
   so the user gets native keyboard + drag support for free.
   The real styling comes from .progressTrack / .progressFill; we
   just override the thumb to be clickable. */
.progressInput {
	position: absolute;
	inset: -8px 0;
	width: 100%;
	height: calc(100% + 16px);
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
}

.progressInput:disabled {
	cursor: not-allowed;
}

.progressInput::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--brand-primary);
	cursor: pointer;
}

.progressInput::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: none;
	border-radius: 50%;
	background: var(--brand-primary);
	cursor: pointer;
}

.timeLabel {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary-muted, #a0a3a8);
}

/* ── Bottom row: volume • speed + favorite + download ──────── */
.bottomRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bottomRowRight {
	display: flex;
	align-items: center;
	gap: 4px;
}

.iconButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: var(--text-primary-muted, #a0a3a8);
	cursor: pointer;
	transition: background-color 0.12s, color 0.12s;
	-webkit-tap-highlight-color: transparent;
}

.iconButton:hover:not(:disabled) {
	background-color: var(--background-modifier-hover);
	color: var(--text-primary);
}

.iconButton:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Favorited state — brand-primary fill to match the lightbox
   star treatment. */
.iconButtonActive {
	color: var(--brand-primary);
}

.iconButtonActive:hover:not(:disabled) {
	color: var(--brand-primary);
	background-color: var(--background-modifier-hover);
	filter: brightness(1.08);
}

.speedButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: var(--text-primary-muted, #a0a3a8);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.12s, color 0.12s;
	-webkit-tap-highlight-color: transparent;
	font-variant-numeric: tabular-nums;
}

.speedButton:hover {
	background-color: var(--background-modifier-hover);
	color: var(--text-primary);
}

.hiddenAudio {
	display: none;
}

/* ── Volume slider popover ─────────────────────────────────
   Speaker button + a hover-revealed vertical slider above it.
   The popover sits on top of the bottom row, anchored to the
   button, and fades in when the user hovers either the icon
   or the popover itself — the shared `.volumeWrap` wrapper
   keeps the hover state alive across both. */

.volumeWrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.volumePopover {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	padding: 10px 0 14px;
	background-color: var(--background-floating, #18191c);
	border: 1px solid var(--background-modifier-accent);
	border-radius: 0.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease, visibility 0.12s ease;
	z-index: 5;
}

/* Invisible bridge below the popover so the mouse can move
   from the speaker icon into the slider without briefly
   leaving the hover chain and closing the popover. */
.volumePopover::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 6px;
	pointer-events: auto;
}

.volumeWrap:hover .volumePopover,
.volumeWrap:focus-within .volumePopover {
	opacity: 1;
	visibility: visible;
}

/* Vertical track. 4px wide, 90px tall — same fill-via-CSS-var
   technique the seek bar uses, just with the axis flipped. */
.volumeTrack {
	position: relative;
	width: 4px;
	height: 90px;
	border-radius: 999px;
	background-color: var(--background-modifier-accent);
}

.volumeFill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--volume, 0%);
	border-radius: 999px;
	background-color: var(--brand-primary);
	pointer-events: none;
}

/* Rotated native range input layered on top of the visual
   track. The -90deg rotation makes it drag vertically while
   keeping all the native keyboard + pointer behaviour. The
   hit area is deliberately larger than the visible track so
   it's easy to grab without pixel-perfect aim. */
.volumeInput {
	position: absolute;
	width: 90px;
	height: 28px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
	transform-origin: center;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
}

.volumeInput::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--brand-primary);
	cursor: pointer;
}

.volumeInput::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: none;
	border-radius: 50%;
	background: var(--brand-primary);
	cursor: pointer;
}
