/* =============================================================================
   mini-player.css - the floating box of the video mini player (js/mini-player.js).
   The controls inside are styled in the script itself (they live in a shadow root).
   ========================================================================== */
body { --ptmv-b: 20px; --ptmv-ap: 0px; }
body.ptmv-fab { --ptmv-b: 90px; }                  /* sit above the round "+" create button */
body.ptap-on  { --ptmv-ap: var(--ptap-h, 76px); }  /* and above the music bar */

#ptmv {
	position: fixed; right: 20px; bottom: calc(var(--ptmv-b) + var(--ptmv-ap)); z-index: 1040;
	display: block; width: 380px; max-width: calc(100vw - 24px);
	background: #0f0f0f; color: #f1f1f1; border-radius: 12px; overflow: hidden;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .1);
	transform: translateY(24px) scale(.96); opacity: 0; visibility: hidden; pointer-events: none;
	transition: transform .22s ease, opacity .22s ease, bottom .22s ease, visibility 0s linear .22s;
	font-family: inherit; box-sizing: border-box;
}
#ptmv.is-on { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

@media (max-width: 560px) {
	#ptmv { right: 12px; left: 12px; width: auto; }
	body.ptmv-fab { --ptmv-b: 84px; }
}
@media (prefers-reduced-motion: reduce) {
	#ptmv { transition: none; }
}