/* Khyati Ambient Music — front-end player styles.
 * One container (#kam-player) supports two layouts via .kam-style-floating / .kam-style-bar,
 * positioned by .kam-pos-* corner classes. Kept self-contained and high z-index so it
 * sits above theme chrome without depending on theme CSS. */

.kam-player {
	position: fixed;
	z-index: 99990;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: inherit;
}

/* Corners */
.kam-pos-bottom-right { right: 18px; bottom: 18px; }
.kam-pos-bottom-left  { left: 18px;  bottom: 18px; }
.kam-pos-top-right    { right: 18px; top: 18px; }
.kam-pos-top-left     { left: 18px;  top: 18px; }

/* Toggle button (shared) */
.kam-toggle {
	position: relative;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: #1a1a1a;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.15s ease, background 0.2s ease;
}
.kam-toggle:hover { transform: scale( 1.06 ); }
.kam-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Speaker icon (muted state): drawn with borders so we ship no images. */
.kam-icon {
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 11px 7px 0;
	border-color: transparent #fff transparent transparent;
	position: relative;
	margin-left: 2px;
}
.kam-icon::before {
	content: "";
	position: absolute;
	left: 11px;
	top: -4px;
	width: 6px;
	height: 8px;
	background: #fff;
}
/* When playing, hide the static icon and show animated bars. */
.kam-playing .kam-icon { display: none; }

.kam-bars {
	display: none;
	align-items: flex-end;
	gap: 2px;
	height: 18px;
}
.kam-playing .kam-bars { display: flex; }
.kam-bars i {
	width: 3px;
	background: #fff;
	animation: kam-eq 0.9s ease-in-out infinite;
}
.kam-bars i:nth-child(1) { height: 8px;  animation-delay: 0s; }
.kam-bars i:nth-child(2) { height: 16px; animation-delay: 0.15s; }
.kam-bars i:nth-child(3) { height: 11px; animation-delay: 0.3s; }

@keyframes kam-eq {
	0%, 100% { transform: scaleY( 0.4 ); }
	50%      { transform: scaleY( 1 ); }
}

/* Mini bar layout */
.kam-style-bar {
	background: #1a1a1a;
	color: #fff;
	padding: 6px 12px 6px 6px;
	border-radius: 30px;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.25 );
}
.kam-style-bar .kam-toggle {
	width: 38px;
	height: 38px;
	box-shadow: none;
}
.kam-label {
	max-width: 160px;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kam-next {
	border: none;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 4px;
}
.kam-next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Respect reduced-motion: freeze the equalizer animation. */
@media ( prefers-reduced-motion: reduce ) {
	.kam-bars i { animation: none; }
	.kam-toggle { transition: none; }
}