/* Coma Listen */
.coma-listen { margin: 0 0 28px; }
.coma-listen .cl-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 10px 18px 10px 14px; border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .14); background: #fff; color: #222;
	font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
	cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s;
	-webkit-tap-highlight-color: transparent;
}
.coma-listen .cl-btn:hover { border-color: #B48E5F; box-shadow: 0 1px 6px rgba(180, 142, 95, .25); }
.coma-listen .cl-btn:focus-visible { outline: 2px solid #B48E5F; outline-offset: 2px; }
.coma-listen .cl-btn svg {
	flex: none; width: 28px; height: 28px; padding: 7px; box-sizing: border-box;
	border-radius: 50%; background: #B48E5F; color: #fff;
}
.coma-listen .cl-dur { color: #777; font-weight: 400; }
.coma-listen .cl-dur::before { content: "·"; margin-right: 8px; color: #bbb; }

/* Highlight */
.cl-ready .entry-content .cl-active,
.cl-ready .entry-title.cl-active {
	background: rgba(180, 142, 95, .10);
	box-shadow: -10px 0 0 rgba(180, 142, 95, .10), 10px 0 0 rgba(180, 142, 95, .10);
	border-radius: 4px; transition: background-color .25s;
}
.cl-ready .entry-content li.cl-active { box-shadow: none; }
::highlight(coma-listen) { background-color: rgba(180, 142, 95, .32); color: inherit; }
body.cl-has-bar .entry-content [class] { scroll-margin-bottom: 120px; }
body.cl-has-bar { padding-bottom: 96px; }
/* Keep the floating WhatsApp button clear of the bar. */
body.cl-has-bar .coma-wa-float { transform: translateY(-84px); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }

/* Bottom bar */
.cl-bar {
	position: fixed; z-index: 99990; left: 50%; bottom: 16px;
	width: min(760px, calc(100% - 32px)); box-sizing: border-box;
	transform: translate(-50%, 140%); opacity: 0;
	transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s;
	display: flex; align-items: center; gap: 14px;
	padding: 10px 12px 10px 10px; border-radius: 18px;
	background: #2b2e31; color: #f2f2f2; box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
	font-size: 13px; line-height: 1;
}
.cl-bar.cl-open { transform: translate(-50%, 0); opacity: 1; }
.cl-bar button {
	appearance: none; -webkit-appearance: none; border: 0; background: none; color: inherit;
	padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	-webkit-tap-highlight-color: transparent; font: inherit;
}
.cl-bar button:focus-visible { outline: 2px solid #B48E5F; outline-offset: 2px; border-radius: 8px; }
.cl-bar svg { width: 24px; height: 24px; display: block; }
.cl-ctrls { display: flex; align-items: center; gap: 6px; flex: none; }
.cl-skip { width: 38px; height: 38px; border-radius: 50%; opacity: .9; }
.cl-skip:hover { background: rgba(255, 255, 255, .08); opacity: 1; }
.cl-play { width: 44px; height: 44px; border-radius: 50%; background: #B48E5F !important; color: #fff; }
.cl-play:hover { background: #c39c6c !important; }
.cl-play svg { width: 22px; height: 22px; }
.cl-track { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl-time { font-variant-numeric: tabular-nums; color: #c9c9c9; min-width: 36px; }
.cl-rem { text-align: right; }
.cl-seek {
	--p: 0%; flex: 1; min-width: 60px; height: 22px; margin: 0; background: transparent;
	-webkit-appearance: none; appearance: none; cursor: pointer;
}
.cl-seek::-webkit-slider-runnable-track {
	height: 4px; border-radius: 4px;
	background: linear-gradient(to right, #B48E5F var(--p), rgba(255, 255, 255, .22) var(--p));
}
.cl-seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.cl-seek::-moz-range-progress { height: 4px; border-radius: 4px; background: #B48E5F; }
.cl-seek::-webkit-slider-thumb {
	-webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
	background: #fff; border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.cl-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.cl-seek:focus-visible { outline: 2px solid #B48E5F; outline-offset: 2px; border-radius: 6px; }
.cl-side { display: flex; align-items: center; gap: 6px; flex: none; }
.cl-ai {
	font-size: 11px; letter-spacing: .02em; color: #a9a9a9; padding: 4px 8px;
	border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; white-space: nowrap;
}
.cl-speed {
	min-width: 48px; height: 32px; padding: 0 8px !important; border-radius: 999px !important;
	background: rgba(255, 255, 255, .1) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums;
}
.cl-speed:hover { background: rgba(255, 255, 255, .18) !important; }
.cl-close { width: 32px; height: 32px; border-radius: 50%; opacity: .75; }
.cl-close:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.cl-close svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
	.coma-listen .cl-btn { font-size: 14px; }
	.cl-bar {
		width: calc(100% - 16px); bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		flex-wrap: wrap; gap: 6px 8px; padding: 10px 10px 8px; border-radius: 16px;
	}
	.cl-track { order: 1; flex: 1 0 100%; gap: 8px; padding: 0 4px; }
	.cl-ctrls { order: 2; }
	.cl-side { order: 3; margin-left: auto; }
	.cl-ai { display: none; }
	body.cl-has-bar { padding-bottom: 130px; }
	body.cl-has-bar .coma-wa-float { transform: translateY(-112px); }
}
@media (prefers-reduced-motion: reduce) {
	.cl-bar { transition: none; }
}
@media print {
	.coma-listen, .cl-bar { display: none !important; }
}