/* 外層是一個貼齊 #book-container 可視範圍的定位框（left/top/width/height 由 JS
   依 book-container 實際的 getBoundingClientRect() 動態設定），本身不接收點擊，
   避免擋到底下的文字；預設就以 book-container 的寬度顯示一條貼在底部的迷你
   播放列，不會蓋到文章開頭，也不需要額外點擊展開。
   #book-container 會在有音檔時加上 padding-bottom（見 js/audio_player.js 的
   has-floating-audio class），讓最後幾行文字可以捲動到播放列上方，不被蓋住；
   同時既有的「回到頂部」按鈕 #back-top-btn 也會被動態往上推，避免疊在一起。 */
#audio-float-player {
	position: fixed;
	display: none;
	pointer-events: none;
	z-index: 150;
}

#audio-float-player.has-audio {
	display: block;
}

/* 有音檔可播放時，讓 book-container 底部多留一段空白，避免最後幾行文字被蓋住；
   展開的全寬播放列比較高，收合成小按鈕時留少一點即可。 */
#book-container.has-floating-audio {
	padding-bottom: 7em !important;
}

#book-container.has-floating-audio-collapsed {
	padding-bottom: 5em !important;
}

/* 使用者按過關閉後，改成只顯示左下角這顆小按鈕，點擊可以再打開播放列 */
.audio-float-reopen {
	display: none;
	position: absolute;
	left: 16px;
	bottom: 16px;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	border: none;
	background-color: var(--color-ddm, #896435);
	color: #fff;
	font-size: 1.2em;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	pointer-events: auto;
	align-items: center;
	justify-content: center;
}

.audio-float-reopen:hover {
	opacity: 0.9;
}

#audio-float-player.bar-closed .audio-float-reopen,
#audio-float-player.auto-collapsed .audio-float-reopen {
	display: flex;
}

/* 手動關閉時還在播放：小圓鈕當播放/暫停鍵，後面接一段膠囊形的「展開」區，
   兩者合成一個迷你播放器。膠囊底層從小圓鈕正下方開始，左側被圓鈕蓋住，
   只露出右邊帶向上箭頭的部分。
   小圓鈕 3em × font-size 1.2em = 3.6em（以播放器字級計），膠囊高度跟它一樣。 */
.audio-float-expand {
	display: none;
	position: absolute;
	left: 16px;
	bottom: 16px;
	height: 3.6em;
	padding: 0 1.1em 0 4.3em;
	border-radius: 1.8em;
	border: 1px solid rgba(137, 100, 53, 0.25);
	background-color: var(--bg-theme, #fff);
	color: var(--color-ddm, #896435);
	font-size: 1em;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	pointer-events: auto;
	align-items: center;
	gap: 0.35em;
	transition: background-color 0.15s;
}
.audio-float-expand i {
	font-size: 0.85em;
	transition: transform 0.15s;
}
.audio-float-expand:hover {
	background-color: var(--bg-ddm, #e5dfd6);
}
.audio-float-expand:hover i {
	transform: translateY(-2px);
}
#audio-float-player.bar-closed.closed-while-playing .audio-float-expand {
	display: flex;
}
/* 圓鈕疊在膠囊上方；陰影交給膠囊，圓鈕本身不再另外浮起來 */
#audio-float-player.bar-closed.closed-while-playing .audio-float-reopen {
	z-index: 1;
	box-shadow: none;
}

#audio-float-player.bar-closed .audio-float-bar,
#audio-float-player.auto-collapsed .audio-float-bar {
	display: none;
}

.audio-float-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	background-color: var(--bg-ddm, #e5dfd6);
	border-top: 1px solid var(--color-ddm-sec, #a88b69);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
	padding: 6px 12px 8px;
	pointer-events: auto;
}

.audio-float-bar-header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
	line-height: 1.2;
}

.audio-float-player-icon {
	color: var(--color-ddm, #896435);
	font-size: 1em;
	flex: 0 0 auto;
}

.audio-float-player-title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--color-ddm, #896435);
	font-size: 0.8em;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* API 查詢本身出錯時（跟「這篇沒有有聲書」不同），標題改用警示色顯示錯誤訊息 */
#audio-float-player.has-error .audio-float-player-title {
	color: #b3261e;
}

.audio-float-player-episodes {
	flex: 0 0 auto;
	font-size: 0.8em;
	padding-top: 2px;
	padding-bottom: 2px;
	border-color: var(--color-ddm-sec, #a88b69);
	color: var(--color-ddm, #896435);
	max-width: 140px;
}

.audio-float-player-close {
	flex: 0 0 auto;
	background: none;
	border: none;
	color: var(--color-ddm, #896435);
	font-size: 1em;
	cursor: pointer;
	padding: 2px 4px;
}

.audio-float-player-close:hover {
	opacity: 0.7;
}

/* 播放引擎本身不顯示瀏覽器原生控制列（那會秀出整集音檔的真實總長度），
   實際的播放/暫停、進度、時間顯示都由下面這組自訂控制項接管，這樣顯示的
   總長度才能只反映這篇文章對應的區段（start_seconds ~ end_seconds），
   而不是整集節目的長度。 */
.audio-float-bar audio {
	display: none;
}

/* 上一篇有聲書／往前30秒／播放暫停／往後30秒／下一篇有聲書／播放速度，
   由左到右排成一列；播放/暫停維持原本較大的主按鈕樣式，其餘幾顆用共用的
   .audio-float-btn 小按鈕樣式。播放/暫停左右各包一個等寬（flex:1）的容器，
   兩邊按鈕分別貼齊內側（靠近播放鈕），讓播放鈕本身固定在整列的正中央——
   右邊比左邊多一顆（播放速度）也沒關係，多出來的按鈕只會佔用右側容器裡
   本來就分配到的空間，不會把播放鈕往左推。 */
.audio-float-transport {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
	line-height: 1.2;
}

.audio-float-transport-side {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.audio-float-transport-left {
	justify-content: flex-end;
}

.audio-float-transport-right {
	justify-content: flex-start;
}

.audio-float-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1.2;
}

.audio-float-playpause {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	background-color: var(--color-ddm, #896435);
	color: #fff;
	font-size: 1.5em;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.audio-float-playpause:hover {
	opacity: 0.9;
}

/* 暫停圖示比播放圖示視覺上略寬，微調一下讓兩個圖示看起來置中一致 */
.audio-float-playpause .fa-play {
	margin-left: 2px;
}

.audio-float-btn {
	flex: 0 0 auto;
	position: relative;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: none;
	color: var(--color-ddm, #896435);
	font-size: 1.2em;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.audio-float-btn:hover {
	background-color: rgba(137, 100, 53, 0.12);
}

/* 上一篇/下一篇有聲書：目前這篇往該方向已經沒有其他有聲書篇章時停用，
   避免使用者點了沒反應卻不知道原因。 */
.audio-float-btn:disabled {
	opacity: 0.35;
	cursor: default;
	background: none;
}

/* 往前/往後 30 秒：圖示中間疊一個「30」的數字，仿常見 podcast App 的快轉按鈕；
   數字要夠明顯，字級、字重都特別加大，顏色跟圖示本身做出區隔。 */
.audio-float-skip {
	font-size: 1.3em;
}

.audio-float-skip-label {
	position: absolute;
	top: 54%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0.4em;
	font-weight: 800;
	line-height: 1;
	color: var(--color-ddm, #896435);
	pointer-events: none;
}

.audio-float-speed {
	width: auto;
	min-width: 42px;
	padding: 0 8px;
	font-size: 0.9em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.audio-float-time {
	flex: 0 0 auto;
	font-size: 0.7em;
	font-variant-numeric: tabular-nums;
	color: var(--color-ddm, #896435);
	min-width: 2.3em;
	text-align: center;
}

.audio-float-progress {
	flex: 1 1 auto;
	position: relative;
	height: 5px;
	border-radius: 3px;
	background-color: rgba(137, 100, 53, 0.25);
	cursor: pointer;
	touch-action: none;
	pointer-events: auto;
}

.audio-float-progress-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	border-radius: 3px;
	background-color: var(--color-ddm, #896435);
	pointer-events: none;
}

@media (max-width: 896px) {
	.audio-float-reopen {
		left: 12px;
		bottom: 12px;
		width: 2.75em;
		height: 2.75em;
	}

	/* 小圓鈕 2.75em × 1.2 = 3.3em */
	.audio-float-expand {
		left: 12px;
		bottom: 12px;
		height: 3.3em;
		padding-left: 4em;
		border-radius: 1.65em;
	}

	.audio-float-bar {
		padding: 6px 10px 8px;
	}

	.audio-float-player-episodes {
		max-width: 90px;
	}
}

/* 樹狀目錄（tree_menu/toc.html）篇章後的有聲書標記，由 include/update_toc_audio_markers.php 產生 */
.toc-audio-mark {
	font-size: 0.75em;
	color: var(--color-ddm-sec, #a88b69);
}