/* TK Media — offline-native AUDIO player. Every selector scoped under
 * .tkm-audio so no theme styles leak in or out. Customization flows through
 * the --tkm-audio-* custom props set inline by the server render. */

.tkm-audio {
	--tkm-audio-accent: #a31a1f;
	--tkm-audio-text: #1d1d1f;
	--tkm-audio-bg: #ffffff;
	--tkm-audio-text-size: 15px;
	box-sizing: border-box;
	position: relative;
	/* Establish a query container so the control row can respond to the PLAYER's
	   own width (e.g. a narrow left-rail column), not just the viewport width. */
	container-type: inline-size;
	container-name: tkm-audio;
	display: block;
	width: 100%;
	max-width: 640px;
	margin: 1em auto;
	padding: 14px 16px;
	background: var(--tkm-audio-bg);
	color: var(--tkm-audio-text);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.06);
	font-size: var(--tkm-audio-text-size);
	line-height: 1.35;
	-webkit-font-smoothing: antialiased;
}

.tkm-audio *,
.tkm-audio *::before,
.tkm-audio *::after { box-sizing: border-box; }

/* Now-playing: optional cover thumb + title */
.tkm-audio .tkm-audio-now {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	min-height: 1.4em;
}
.tkm-audio .tkm-audio-cover {
	flex: 0 0 auto;
	width: var(--tkm-audio-cover-size, 48px);
	height: var(--tkm-audio-cover-size, 48px);
	border-radius: 8px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}
.tkm-audio .tkm-audio-cover[hidden] { display: none; }
.tkm-audio .tkm-audio-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tkm-audio .tkm-audio-now-title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	font-size: calc(var(--tkm-audio-text-size) + 1px);
	color: var(--tkm-audio-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Linked now-playing title (per-block "Link" option). Same specificity as the
 * rule above but defined later, so the accent color + underline-on-hover win. */
.tkm-audio .tkm-audio-now-link {
	display: block; /* match the <div> variant so nowrap/ellipsis truncation applies */
	color: var(--tkm-audio-accent);
	text-decoration: none;
	cursor: pointer;
}
.tkm-audio .tkm-audio-now-link:hover,
.tkm-audio .tkm-audio-now-link:focus-visible {
	text-decoration: underline;
}

/* Controls — TWO rows: transport + progress bar (main), then time + icons
   (sub). Gap is admin-tunable via --tkm-audio-icon-gap. */
.tkm-audio .tkm-audio-controls {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tkm-audio .tkm-audio-controls-main,
.tkm-audio .tkm-audio-controls-sub {
	display: flex;
	align-items: center;
	gap: var(--tkm-audio-icon-gap, 6px);
	/* Wrap (don't overflow) if the icons still can't fit after shrinking.
	   `gap` supplies the row-gap for any wrapped line. */
	flex-wrap: wrap;
	min-width: 0;
}
/* Row 2 (time -> repeat -> shuffle -> search -> list -> [volume] -> gear): keep it
   on ONE tight line in EVERY template (media/advanced) + orientation, icons nearly
   touching, gear always INSIDE the player box. The advanced template shows one
   extra control (volume), so this is the widest case. Fixed-width inline SVG makes
   the row deterministic — nowrap + flex-start (never spread) + compact 26px boxes +
   1px gap. NOTE: this same rule set is ALSO emitted inline by the PHP render
   (TK_Media_Audio::render) so the tight layout survives even when the SW serves a
   stale copy of THIS file — keep the two in sync. */
.tkm-audio .tkm-audio-controls-sub {
	flex-wrap: nowrap;
	justify-content: flex-start;
	min-width: 0;
	gap: 1px;
	--tkm-audio-btn-size: 26px;
}
.tkm-audio .tkm-audio-controls-sub .tkm-audio-btn { min-width: 0; flex: 0 0 auto; }
.tkm-audio .tkm-audio-controls-sub .tkm-audio-time { margin: 0 3px 0 0; flex: 0 0 auto; }

/* Fixed-width inline-SVG control icons (replaces the wide iOS color-emoji).
   Deterministic pixel size => the row is tight + never overflows the player box,
   and currentColor makes the icons follow the theme text / active colors. */
.tkm-audio .tkm-audio-ico { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.tkm-audio .tkm-audio-controls-main .tkm-audio-ico { width: 20px; height: 20px; }
.tkm-audio-dock .tkm-audio-ico { width: 18px; height: 18px; display: block; }

/* Minimal template stays a single compact row (flatten the two wrappers). */
.tkm-audio--minimal .tkm-audio-controls { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--tkm-audio-icon-gap, 6px); }
.tkm-audio--minimal .tkm-audio-controls-main,
.tkm-audio--minimal .tkm-audio-controls-sub { display: contents; }

.tkm-audio .tkm-audio-btn {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	/* Fixed box (not padding-around-a-glyph): keeps every button the same size
	   regardless of the glyph's own advance width, so post-twemoji native emoji
	   control chars can't blow the box out. Tunable via --tkm-audio-btn-size. */
	width: var(--tkm-audio-btn-size, 34px);
	height: var(--tkm-audio-btn-size, 34px);
	border: 0;
	background: transparent;
	color: var(--tkm-audio-text);
	cursor: pointer;
	/* Explicit glyph size + centering so native-emoji glyphs sit centered and
	   scale predictably with the container. */
	font-size: var(--tkm-audio-glyph-size, 15px);
	line-height: 1;
	vertical-align: middle;
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.tkm-audio .tkm-audio-btn:hover { background: rgba(0, 0, 0, 0.06); }
.tkm-audio .tkm-audio-btn:active { transform: scale(0.92); }
.tkm-audio .tkm-audio-btn:focus-visible {
	outline: 2px solid var(--tkm-audio-accent);
	outline-offset: 1px;
}

.tkm-audio .tkm-audio-play {
	background: var(--tkm-audio-accent);
	color: #fff;
	width: 42px;
	height: 42px;
	font-size: 18px;
	flex: 0 0 auto;
}
.tkm-audio .tkm-audio-play:hover {
	background: var(--tkm-audio-accent);
	filter: brightness(1.08);
}

/* Seek bar */
.tkm-audio .tkm-audio-seek {
	flex: 1 1 60px;
	min-width: 44px;
	display: flex;
	align-items: center;
}
.tkm-audio .tkm-audio-seek-bar {
	position: relative;
	width: 100%;
	height: 6px;
	background: rgba(0, 0, 0, 0.12);
	border-radius: 999px;
	cursor: pointer;
	touch-action: none;
}
.tkm-audio .tkm-audio-seek-bar:focus-visible {
	outline: 2px solid var(--tkm-audio-accent);
	outline-offset: 3px;
}
.tkm-audio .tkm-audio-seek-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: var(--tkm-audio-accent);
	border-radius: 999px;
	pointer-events: none;
}
.tkm-audio .tkm-audio-seek-knob {
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	transform: translateY(-50%);
	background: var(--tkm-audio-accent);
	border: 2px solid var(--tkm-audio-bg);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.tkm-audio .tkm-audio-seek-bar:hover .tkm-audio-seek-knob,
.tkm-audio.is-playing .tkm-audio-seek-knob { opacity: 1; }

/* Time */
.tkm-audio .tkm-audio-time {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-size: calc(var(--tkm-audio-text-size) - 2px);
	opacity: 0.8;
	white-space: nowrap;
}
.tkm-audio .tkm-audio-sep { margin: 0 2px; opacity: 0.5; }

/* Volume */
.tkm-audio .tkm-audio-volume-wrap {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
/* The volume slider now lives in a popover toggled by the speaker icon. */
.tkm-audio .tkm-audio-volume-pop {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;
	background: var(--tkm-audio-bg);
	color: var(--tkm-audio-text);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 12px;
	display: flex;
	justify-content: center;
}
.tkm-audio .tkm-audio-volume-pop[hidden] { display: none; }
/* Vertical slider (drag up = louder). */
.tkm-audio .tkm-audio-volume {
	-webkit-appearance: none;
	appearance: none;
	writing-mode: vertical-lr;
	direction: rtl;
	width: 6px;
	height: 96px;
	margin: 0;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	cursor: pointer;
	/* Own the vertical drag so the page-level touch-action:pan-y (kiosk zoom lock)
	   can't hijack a thumb-drag into a page scroll — same guard as the seek bar. */
	touch-action: none;
}
.tkm-audio .tkm-audio-volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--tkm-audio-accent);
	cursor: pointer;
}
.tkm-audio .tkm-audio-volume::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: var(--tkm-audio-accent);
	cursor: pointer;
}

/* Advanced menu */
.tkm-audio .tkm-audio-menu-wrap {
	position: relative;
	flex: 0 0 auto;
}
.tkm-audio .tkm-audio-menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	z-index: 5;
	min-width: 180px;
	background: var(--tkm-audio-bg);
	color: var(--tkm-audio-text);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 8px;
}
.tkm-audio .tkm-audio-menu[hidden] { display: none; }
.tkm-audio .tkm-audio-menu-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 4px;
}
.tkm-audio .tkm-audio-menu-label {
	font-size: calc(var(--tkm-audio-text-size) - 1px);
	font-weight: 500;
}
.tkm-audio .tkm-audio-menu select {
	font-size: calc(var(--tkm-audio-text-size) - 1px);
	padding: 3px 6px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 6px;
	background: var(--tkm-audio-bg);
	color: var(--tkm-audio-text);
}
.tkm-audio .tkm-audio-download {
	display: block;
	width: 100%;
	text-align: center;
	padding: 7px 8px;
	background: var(--tkm-audio-accent);
	color: #fff !important;
	text-decoration: none;
	border-radius: 7px;
	font-size: calc(var(--tkm-audio-text-size) - 1px);
	font-weight: 600;
}
.tkm-audio .tkm-audio-download:hover { filter: brightness(1.08); }

/* Track list */
.tkm-audio .tkm-audio-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.tkm-audio .tkm-audio-track { margin: 0; padding: 0; }
.tkm-audio .tkm-audio-track-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	color: var(--tkm-audio-text);
	cursor: pointer;
	padding: 9px 6px;
	border-radius: 8px;
	font-size: var(--tkm-audio-text-size);
	font-family: inherit;
	transition: background-color 0.12s ease;
}
.tkm-audio .tkm-audio-track-btn:hover { background: rgba(0, 0, 0, 0.05); }
.tkm-audio .tkm-audio-track-num {
	flex: 0 0 auto;
	width: 22px;
	text-align: center;
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
	font-size: calc(var(--tkm-audio-text-size) - 2px);
}
.tkm-audio .tkm-audio-track-title {
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tkm-audio .tkm-audio-track.is-current .tkm-audio-track-btn {
	color: var(--tkm-audio-accent);
	font-weight: 600;
}
.tkm-audio .tkm-audio-track.is-current .tkm-audio-track-num {
	opacity: 1;
	color: var(--tkm-audio-accent);
}

/* ----- Template: MINIMAL — play/pause + thin progress + time only ----- */
.tkm-audio--minimal { max-width: 480px; padding: 10px 12px; }
.tkm-audio--minimal .tkm-audio-now,
.tkm-audio--minimal .tkm-audio-prev,
.tkm-audio--minimal .tkm-audio-next,
.tkm-audio--minimal .tkm-audio-repeat,
.tkm-audio--minimal .tkm-audio-shuffle,
.tkm-audio--minimal .tkm-audio-pl-wrap,
.tkm-audio--minimal .tkm-audio-volume-wrap,
.tkm-audio--minimal .tkm-audio-menu-wrap,
.tkm-audio--minimal .tkm-audio-list { display: none !important; }
.tkm-audio--minimal .tkm-audio-seek-bar { height: 4px; }
.tkm-audio--minimal .tkm-audio-play {
	width: 36px;
	height: 36px;
	font-size: 15px;
}

/* ----- Template: MEDIA — full controls incl. repeat/shuffle + ⚙ menu;
   only the volume slider is hidden (keeps the bar compact) ----- */
.tkm-audio--media .tkm-audio-volume-wrap { display: none; }

/* ----- Template: ADVANCED — everything visible ----- */
/* (no hidden controls; default layout applies) */

/* Empty state */
.tkm-audio-empty {
	max-width: 640px;
	margin: 1em auto;
	padding: 12px 16px;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	color: rgba(0, 0, 0, 0.55);
	font-size: 14px;
}

/* Animated visualizer (canvas; offline-safe, drawn by audio-visualizer.js).
 * Always in the DOM (so a runtime template switch can reveal it); visibility is
 * class-driven: advanced template OR forced on (--viz-all); --viz-off hides. */
.tkm-audio .tkm-audio-visualizer {
	display: none;
	width: 100%;
	height: var(--tkm-audio-visualizer-height, 36px);
	margin: 0 0 10px;
}
.tkm-audio--advanced .tkm-audio-visualizer,
.tkm-audio--viz-all .tkm-audio-visualizer { display: block; }
.tkm-audio--viz-off .tkm-audio-visualizer { display: none !important; }

/* Search / filter — hidden until the magnifier (search) button reveals it */
.tkm-audio .tkm-audio-filter-wrap {
	display: none;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}
/* Revealed by the magnifier, OR forced always-on via the block/global setting. */
.tkm-audio--searching .tkm-audio-filter-wrap,
.tkm-audio--filter-all .tkm-audio-filter-wrap { display: flex; }
.tkm-audio--filter-off .tkm-audio-filter-wrap { display: none !important; }

/* Magnifier (search), expand-to-layout, and compact buttons */
.tkm-audio .tkm-audio-search-btn { flex: 0 0 auto; font-size: var(--tkm-audio-glyph-size, 15px); }
.tkm-audio--searching .tkm-audio-search-btn { background: var(--tkm-audio-accent); color: #fff; }
/* Magnifier hidden on minimal, when filter is force-off, OR when the bar is
   already forced always-on (the toggle would be redundant). */
.tkm-audio--minimal .tkm-audio-search-btn,
.tkm-audio--filter-off .tkm-audio-search-btn,
.tkm-audio--filter-all .tkm-audio-search-btn { display: none; }

/* Expand button = only on minimal (lets the viewer switch to a fuller layout). */
.tkm-audio .tkm-audio-expand-btn { flex: 0 0 auto; font-size: var(--tkm-audio-glyph-size, 15px); display: none; }
.tkm-audio--minimal .tkm-audio-expand-btn { display: inline-flex; }

/* Compact (shorten-height) toggle — small, lower-right; not on minimal. */
.tkm-audio .tkm-audio-compact-btn {
	position: absolute;
	right: 8px;
	bottom: 6px;
	z-index: 4;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: rgba(0, 0, 0, 0.06);
	color: var(--tkm-audio-text);
	cursor: pointer;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 13px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.65;
}
.tkm-audio .tkm-audio-compact-btn:hover { opacity: 1; }
.tkm-audio--minimal .tkm-audio-compact-btn { display: none; }

/* Compact mode — collapse the track list so the player is shorter. */
.tkm-audio--compact .tkm-audio-list { display: none; }
.tkm-audio--compact .tkm-audio-visualizer { display: none; }
/* Reserve room at the BOTTOM OF THE PLAYER for the absolutely-positioned compact/
   expand button (26px tall, bottom:6px) so it always sits below the content — in
   EVERY state, including compact (list hidden) where it used to ride up onto the
   controls row and overlap the gear icon, and long-list advanced where it must
   clear the last track. Applied whenever the button exists (media + advanced;
   hidden only in --minimal). */
.tkm-audio--media,
.tkm-audio--advanced { padding-bottom: 40px; }

/* Color pickers in the Advanced menu section */
.tkm-audio .tkm-audio-color {
	width: 40px;
	height: 26px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 6px;
	background: none;
	cursor: pointer;
}

/* Font overrides (per-user, from the Advanced menu) */
.tkm-audio--font-sans   { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", sans-serif; }
.tkm-audio--font-serif  { font-family: Georgia, "Times New Roman", "Noto Serif Thai", serif; }
.tkm-audio--font-rounded { font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Quicksand", "Noto Sans Thai", system-ui, sans-serif; }
.tkm-audio .tkm-audio-filter {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	background: var(--tkm-audio-bg);
	color: var(--tkm-audio-text);
	font-size: calc(var(--tkm-audio-text-size) - 1px);
	font-family: inherit;
}
.tkm-audio .tkm-audio-filter:focus-visible {
	outline: 2px solid var(--tkm-audio-accent);
	outline-offset: 1px;
}
.tkm-audio .tkm-audio-filter-count {
	flex: 0 0 auto;
	font-size: calc(var(--tkm-audio-text-size) - 3px);
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}
.tkm-audio .tkm-audio-track.is-filtered-hidden { display: none; }

/* Per-track cover thumbnail in the list */
.tkm-audio .tkm-audio-track-cover {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 5px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}
.tkm-audio .tkm-audio-track-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Repeat + Shuffle control-row buttons (Media + Advanced templates) */
.tkm-audio .tkm-audio-repeat,
.tkm-audio .tkm-audio-shuffle {
	flex: 0 0 auto;
	position: relative;
	font-size: var(--tkm-audio-glyph-size, 15px);
}
.tkm-audio .tkm-audio-shuffle.is-active,
.tkm-audio .tkm-audio-repeat[data-mode="one"],
.tkm-audio .tkm-audio-repeat[data-mode="all"] {
	background: var(--tkm-audio-accent);
	color: #fff;
}
.tkm-audio .tkm-audio-shuffle.is-active:hover,
.tkm-audio .tkm-audio-repeat[data-mode="one"]:hover,
.tkm-audio .tkm-audio-repeat[data-mode="all"]:hover {
	background: var(--tkm-audio-accent);
	filter: brightness(1.08);
}
/* "Repeat one" corner badge */
.tkm-audio .tkm-audio-repeat-one {
	position: absolute;
	right: 2px;
	bottom: 2px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	display: none;
}
.tkm-audio .tkm-audio-repeat[data-mode="one"] .tkm-audio-repeat-one { display: block; }

/* Playlist selector (button + popover, right of shuffle) */
.tkm-audio .tkm-audio-pl-wrap { position: relative; flex: 0 0 auto; }
.tkm-audio .tkm-audio-pl-wrap[hidden] { display: none; }
.tkm-audio .tkm-audio-pl-btn { font-size: var(--tkm-audio-glyph-size, 15px); }
.tkm-audio .tkm-audio-pl-btn.is-active { background: var(--tkm-audio-accent); color: #fff; }
.tkm-audio .tkm-audio-pl-menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	z-index: 6;
	min-width: 210px;
	max-height: 280px;
	overflow-y: auto;
	background: var(--tkm-audio-bg);
	color: var(--tkm-audio-text);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 6px;
}
.tkm-audio .tkm-audio-pl-menu[hidden] { display: none; }
.tkm-audio .tkm-audio-pl-item {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	color: var(--tkm-audio-text);
	cursor: pointer;
	padding: 9px 10px;
	border-radius: 6px;
	font-size: calc(var(--tkm-audio-text-size) - 1px);
	font-family: inherit;
}
.tkm-audio .tkm-audio-pl-item:hover { background: rgba(0, 0, 0, 0.06); }
.tkm-audio .tkm-audio-pl-item.is-active { color: var(--tkm-audio-accent); font-weight: 600; }

/* Toggle (⚙) menu — smaller text + extra rows */
.tkm-audio .tkm-audio-menu { min-width: 244px; font-size: calc(var(--tkm-audio-text-size) - 2px); }
.tkm-audio .tkm-audio-menu-label {
	font-size: calc(var(--tkm-audio-text-size) - 2px);
	white-space: nowrap;   /* keep each label on one line (no "Layo ut") */
	flex: 0 0 auto;
}
/* Let the control shrink instead of squeezing the label into a wrap. */
.tkm-audio .tkm-audio-menu-row > select,
.tkm-audio .tkm-audio-menu-row > input { flex: 1 1 auto; min-width: 0; max-width: 62%; }
.tkm-audio .tkm-audio-adv-toggle {
	display: block;
	width: 100%;
	text-align: center;
	background: transparent;
	border: 0;
	color: var(--tkm-audio-accent);
	cursor: pointer;
	font-size: calc(var(--tkm-audio-text-size) - 3px);
	padding: 6px 4px 2px;
	font-family: inherit;
}
.tkm-audio .tkm-audio-menu-adv { padding: 4px; }
.tkm-audio .tkm-audio-menu-adv[hidden] { display: none; }
.tkm-audio .tkm-audio-reset {
	display: block;
	width: 100%;
	text-align: center;
	padding: 7px 8px;
	background: transparent;
	color: var(--tkm-audio-text);
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 7px;
	cursor: pointer;
	font-size: calc(var(--tkm-audio-text-size) - 2px);
	font-family: inherit;
}
.tkm-audio .tkm-audio-reset:hover { background: rgba(0, 0, 0, 0.06); }

/* Resume-on-reload cue: gently pulse the play button until the user taps it */
.tkm-audio--resumable .tkm-audio-play { animation: tkm-audio-pulse 1.3s ease-in-out infinite; }
@keyframes tkm-audio-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}

/* Sticky within-page mini-player (appended to <body>, so NOT scoped) */
.tkm-audio-dock {
	--tkm-audio-accent: #a31a1f;
	position: fixed;
	bottom: 16px;
	left: 16px; /* default placement = bottom-left (overridden by placement class) */
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 92vw;
	padding: 8px 14px;
	background: #fff;
	color: #1d1d1f;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 10px 30px rgba(0, 0, 0, 0.18);
	font-size: 14px;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}
.tkm-audio-dock[hidden] { display: none; }
.tkm-audio-dock--bottom-left   { left: 16px; right: auto; transform: none; }
.tkm-audio-dock--bottom-right  { right: 16px; left: auto; transform: none; }
.tkm-audio-dock--bottom-center { left: 50%; right: auto; transform: translateX(-50%); }
.tkm-audio-dock-btn {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: transparent;
	color: #1d1d1f;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 8px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tkm-audio-dock-btn:hover { background: rgba(0, 0, 0, 0.06); }
.tkm-audio-dock-play {
	background: var(--tkm-audio-accent);
	color: #fff;
	width: 38px;
	height: 38px;
}
.tkm-audio-dock-title {
	max-width: 38vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 600;
	padding: 0 4px;
}

/* Narrow screens */
@media (max-width: 480px) {
	.tkm-audio .tkm-audio-controls { gap: 6px; }
	.tkm-audio .tkm-audio-time { font-size: calc(var(--tkm-audio-text-size) - 3px); }
}

/* Narrow *container* (e.g. the player in a left-rail column, which a viewport
   media query can't see). Shrink the control glyphs + tighten the gap so every
   button fits inside the player box instead of spilling past its edge.
   The `gap` override is set directly on the rows so it beats the inline
   --tkm-audio-icon-gap the server writes on .tkm-audio. Progressive
   enhancement: even without @container support, the flex-wrap + fixed button
   box above already prevent overflow. */
@container tkm-audio (max-width: 400px) {
	.tkm-audio {
		--tkm-audio-btn-size: 31px;
		--tkm-audio-glyph-size: 14px;
	}
	.tkm-audio .tkm-audio-controls-main,
	.tkm-audio .tkm-audio-controls-sub { gap: 3px; }
	.tkm-audio .tkm-audio-play { width: 38px; height: 38px; font-size: 16px; }
}
@container tkm-audio (max-width: 320px) {
	.tkm-audio {
		--tkm-audio-btn-size: 28px;
		--tkm-audio-glyph-size: 13px;
	}
	.tkm-audio .tkm-audio-controls-main,
	.tkm-audio .tkm-audio-controls-sub { gap: 2px; }
	.tkm-audio .tkm-audio-play { width: 34px; height: 34px; font-size: 15px; }
	.tkm-audio .tkm-audio-time { font-size: calc(var(--tkm-audio-text-size) - 3px); }
}