/* ==========================================================================
   yy-mobile: mini player collapse / expand (2026-10-21)
   Desktop (>767.98px) keeps the original × (clear queue). On phones that
   button becomes a chevron-down: tapping it slides the bar away and leaves
   a small cover button at the right edge; tapping that button expands it.
   The state survives Ajax navigation and reloads in the same tab.
   ========================================================================== */
.player-collapse { display: none; }
.yy-player-restore { display: none; }

@media (max-width: 767.98px) {
	/* clear-queue × stays on desktop only */
	.music_app .ma_player .player-close { display: none !important; }

	.music_app .ma_player .player-collapse {
		align-items: center;
		color: #b9b9c2;
		cursor: pointer;
		display: flex;
		justify-content: center;
		min-height: 34px;
		min-width: 34px;
		-webkit-tap-highlight-color: transparent;
	}
	.music_app .ma_player .player-collapse svg { height: 22px; pointer-events: none; width: 22px; }
	.music_app .ma_player .player-collapse:active { opacity: .55; transform: scale(.92); }

	/* give the page back the bar's space while collapsed */
	body.yy-player-collapsed.player_running .music_app #container_content {
		padding-bottom: calc(72px + env(safe-area-inset-bottom));
	}

	/* slide the whole bar behind the tabbar */
	.music_app .ma_player {
		transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .18s ease, visibility 0s linear;
		will-change: transform;
	}
	.music_app .ma_player.is-collapsed {
		opacity: 0;
		pointer-events: none;
		transform: translateY(calc(100% + 72px)) scale(.98);
		transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .18s ease, visibility 0s linear .26s;
		visibility: hidden;
	}

	/* collapsed state: small cover button at the right edge, above the tabbar */
	.yy-player-restore {
		align-items: center;
		background: #161616;
		border: 1px solid rgba(255, 255, 255, .22);
		border-radius: 50%;
		bottom: calc(68px + env(safe-area-inset-bottom));
		box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
		cursor: pointer;
		display: flex;
		height: 46px;
		justify-content: center;
		opacity: 0;
		overflow: hidden;
		padding: 0;
		position: fixed;
		right: 12px;
		transform: translateY(10px) scale(.85);
		transition: opacity .18s ease, transform .24s cubic-bezier(.4, 0, .2, 1), visibility 0s linear;
		visibility: hidden;
		width: 46px;
		z-index: 10049;
		-webkit-tap-highlight-color: transparent;
	}
	body.yy-player-collapsed .yy-player-restore {
		opacity: 1;
		transform: none;
		visibility: visible;
	}
	.yy-player-restore:active { transform: scale(.94); }
	.yy-player-restore__cover {
		border-radius: 50%;
		height: 100%;
		inset: 0;
		object-fit: cover;
		opacity: .9;
		position: absolute;
		width: 100%;
	}
	.yy-player-restore__icon {
		align-items: center;
		background: rgba(0, 0, 0, .62);
		border-radius: 50%;
		color: #fff;
		display: flex;
		height: 24px;
		justify-content: center;
		position: relative;
		width: 24px;
		z-index: 1;
	}
	.yy-player-restore__icon svg { height: 16px; width: 16px; }
	body.audio_playing .yy-player-restore {
		border-color: rgba(249, 143, 29, .9);
		box-shadow: 0 0 0 3px rgba(249, 143, 29, .18), 0 8px 22px rgba(0, 0, 0, .55);
	}
}