/* Madara Chapter Music - player. Logical properties keep it RTL-friendly. */
.mcm-player {
	--mcm-bg: #1f2230;
	--mcm-fg: #f2f3f7;
	--mcm-accent: #ff6b57;
	--mcm-edge: 16px;
	position: fixed;
	inset-block-end: calc(var(--mcm-edge) + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-inline-size: calc(100vw - (var(--mcm-edge) * 2));
	font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--mcm-fg);
	pointer-events: none; /* only children capture input, so the page stays clickable */
}
.mcm-pos-right { inset-inline-end: var(--mcm-edge); align-items: flex-end; }
.mcm-pos-left  { inset-inline-start: var(--mcm-edge); align-items: flex-start; }

/* physical left/right placement regardless of text direction */
[dir="rtl"] .mcm-pos-right { inset-inline-end: auto; inset-inline-start: auto; right: var(--mcm-edge); left: auto; }
[dir="rtl"] .mcm-pos-left  { inset-inline-start: auto; inset-inline-end: auto; left: var(--mcm-edge); right: auto; }

.mcm-player > * { pointer-events: auto; }

.mcm-panel {
	box-sizing: border-box;
	background: var(--mcm-bg);
	border-radius: 14px;
	padding: 10px 12px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
	inline-size: 320px;
	max-inline-size: 100%;
}
.mcm-panel[hidden] { display: none; }

.mcm-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-block-end: 8px;
	opacity: .85;
}

.mcm-row { display: flex; align-items: center; gap: 2px; }

.mcm-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	color: var(--mcm-fg);
	cursor: pointer;
	flex: none;
	pointer-events: auto;
	transition: background-color .15s ease, color .15s ease;
}
.mcm-btn[hidden] { display: none; }
.mcm-btn:hover { background: rgba(255, 255, 255, .12); }
.mcm-btn:focus-visible { outline: 2px solid var(--mcm-accent); outline-offset: 2px; }
.mcm-btn.mcm-on { color: var(--mcm-accent); }
.mcm-btn svg { display: block; }

.mcm-play { background: var(--mcm-accent); color: #fff; }
.mcm-play:hover { background: var(--mcm-accent); filter: brightness(1.1); }

/* Collapsed bubble / minimise button */
.mcm-toggle {
	inline-size: 44px;
	block-size: 44px;
	background: var(--mcm-bg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.mcm-toggle:hover { background: var(--mcm-bg); filter: brightness(1.25); }
.mcm-playing.mcm-collapsed .mcm-toggle { color: var(--mcm-accent); animation: mcm-pulse 2s ease-in-out infinite; }

.mcm-range {
	flex: 1 1 auto;
	min-inline-size: 60px;
	margin-inline-start: 4px;
	accent-color: var(--mcm-accent);
	cursor: pointer;
	background: transparent;
}

@keyframes mcm-pulse {
	0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 107, 87, .5); }
	50%      { box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 0 8px rgba(255, 107, 87, 0); }
}

/* Mobile: compact panel, small footprint, clears iOS home indicator */
@media (max-width: 600px) {
	.mcm-player { --mcm-edge: 12px; }
	.mcm-panel { inline-size: min(300px, calc(100vw - 24px)); padding: 8px 10px; }
	.mcm-btn { inline-size: 34px; block-size: 34px; }
	.mcm-toggle { inline-size: 40px; block-size: 40px; opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
	.mcm-btn { transition: none; }
	.mcm-playing.mcm-collapsed .mcm-toggle { animation: none; }
}

@media print { .mcm-player { display: none; } }