.sociq-music-player-host:not([hidden]) {
	position: fixed;
	z-index: 1040;
	right: 18px;
	bottom: 18px;
	width: min(500px, calc(100vw - 36px));
}

.sociq-persistent-music-player {
	position: relative;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"info controls"
		"volume volume";
	align-items: center;
	gap: 6px 12px;
	width: 100%;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 12px 15px !important;
	border: 1px solid rgba(135, 145, 165, .2) !important;
	border-radius: 16px !important;
	background: var(--background-block, #fff) !important;
	box-shadow: 0 12px 38px rgba(22, 30, 48, .22);
}

.sociq-persistent-music-player .music-player-label {
	display: none;
}

.sociq-persistent-music-player > .Info {
	display: flex;
	min-width: 0;
	height: auto;
	grid-area: info;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.sociq-persistent-music-player > .Info > .Image {
	position: relative;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	margin: 0;
	overflow: hidden;
	border-radius: 11px;
}

.sociq-persistent-music-player > .Info > .Image > img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.sociq-persistent-music-player > .Info > .Data {
	min-width: 0;
	flex: 1 1 auto;
}

.sociq-persistent-music-player .Track-Name {
	overflow: hidden;
	font-size: 13px;
	font-weight: 750;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sociq-persistent-music-player .Artist {
	overflow: hidden;
	margin: 2px 0 6px;
	color: var(--color-secondary, #9299a5);
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sociq-persistent-music-player .RangeContainer {
	position: relative;
	display: block;
	width: 100%;
	height: 4px;
	background: rgba(135, 145, 165, .22);
}

.sociq-persistent-music-player .RangeContainer > .Fill {
	height: 100%;
	background: linear-gradient(90deg, #8062ff, #35d2ad);
}

.sociq-persistent-music-player .RangeContainer > input {
	position: absolute;
	z-index: 2;
	inset: -5px 0;
	width: 100%;
	height: 14px;
	cursor: pointer;
}

.sociq-persistent-music-player .music-player-meta {
	display: flex;
	justify-content: space-between;
	margin-top: 3px;
	color: var(--color-secondary, #9299a5);
	font-size: 9px;
}

.sociq-persistent-music-player > .Control {
	display: flex;
	grid-area: controls;
	align-items: center;
	gap: 4px;
}

.sociq-persistent-music-player button {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-primary, #252c3b);
}

.sociq-persistent-music-player button:hover {
	background: rgba(124, 92, 255, .12);
	color: var(--color-brand, #6652d9);
}

.sociq-persistent-music-player button.Pause-And-Play {
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #8062ff, #6652d9);
	color: #fff;
	font-size: 20px;
}

.sociq-persistent-music-player > .Control-End {
	display: flex;
	grid-area: volume;
	justify-content: flex-end;
}

.sociq-persistent-music-player .Volume-Control {
	display: flex;
	width: 128px;
	align-items: center;
	gap: 7px;
}

.sociq-persistent-music-player .Volume-Control > button {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}

.sociq-persistent-music-player .Volume-Control .RangeContainer {
	width: 88px;
}

.sociq-page-loading[hidden] {
	display: none !important;
}

.sociq-page-loading {
	position: fixed;
	z-index: 2000;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(18, 24, 38, .28);
	backdrop-filter: blur(3px);
}

.sociq-page-loading-card {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px 20px;
	border: 1px solid var(--social-border, rgba(135, 145, 165, .2));
	border-radius: 16px;
	background: var(--social-surface, #fff);
	box-shadow: 0 14px 42px rgba(22, 30, 48, .2);
	color: var(--social-text, #252c3b);
	font-size: 14px;
	font-weight: 650;
}

.sociq-page-loading-spinner {
	width: 23px;
	height: 23px;
	flex: 0 0 23px;
	border: 3px solid rgba(102, 88, 219, .2);
	border-top-color: var(--social-accent, #6658db);
	border-radius: 50%;
	animation: sociq-page-loading-spin .7s linear infinite;
}

@keyframes sociq-page-loading-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 575px) {
	.sociq-music-player-host:not([hidden]) {
		right: 9px;
		bottom: calc(68px + env(safe-area-inset-bottom, 0px));
		width: calc(100vw - 18px);
	}

	.sociq-persistent-music-player {
		gap: 5px 7px;
		padding: 10px 11px !important;
	}
}