/**
 * `zuyan-inline-audio/player` 的視覺樣式，編輯器（iframe 畫布）與前台共用
 * 同一份（透過 `enqueue_block_assets` 載入，這個鉤子會自動把樣式表注入
 * 編輯器 iframe，不需要另外處理）。
 *
 * 整個按鈕的外觀完全靠 CSS + 存在 HTML attribute 裡的資料算出來
 * （`attr()` 讀 `data-duration-label`、inline `style` 帶 `--time-width`
 * CSS 變數），沒有任何地方需要 JS 動態插入子節點——這是刻意的設計：
 * 這個格式是插在 RichText（段落／表格儲存格）裡的行內元素，編輯器的
 * contentEditable 區域每次使用者打字都會重新從實際 DOM 反推內容
 * （`create()`），如果用 JS 動態塞子節點進這個按鈕，有被反推邏輯誤判成
 * 「使用者自己打出來的內容」而污染存檔內容的風險。前台沒有這個風險
 * （純靜態頁面，`view.js` 才會用 `setAttribute()` 動態改
 * `data-state`／`data-duration-label` 來達成播放中即時倒數，一樣不用
 * 動到子節點）。
 */

/**
 * 【已確認的問題，v2.0.6 修正】原本用 `display:inline-flex` +
 * `flex-direction:column` 把播放鍵（::before）跟時間文字（::after）
 * 直排——但 flex item 的高度會算進 flex container 自己的高度，讓這個
 * inline-flex 元素的完整 bounding box 變成 32×69.2px（播放鍵 32px +
 * 時間文字整行高度），而不是視覺上看起來的 32×32px 圓形。這個元素是
 * 行內（inline-level）參與段落的文字排版，它自己的 box 高度會直接撐高
 * 所在那一整行段落文字的 line box，造成那一行段落的行高被撐到 69.2px
 * （用 `getBoundingClientRect()` 實測確認），視覺上看起來像整個播放器
 * 「脫離文字流、獨立佔一段垂直空間」，不是單純的視覺間距問題。
 *
 * 修法：`.zuyan-inline-audio-player` 本身的 layout box 只保留播放鍵的
 * 32×32px（`display:inline-block` + 固定 `width`/`height`，不再用
 * flex），時間文字改成 `position:absolute; top:calc(100% - 1px); left:50%;
 * transform:translateX(-50%);`——絕對定位的元素完全脫離正常文件流，
 * 不會被父層（也不會被祖先的 inline formatting context）拿來計算高度，
 * 視覺上仍然貼在播放鍵正下方，但不再讓段落那一行被撐高。
 */
.zuyan-inline-audio-player {
	display: inline-block;
	position: relative;
	width: 32px;
	height: 32px;
	vertical-align: middle;
	margin: 0 2px;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.zuyan-inline-audio-player::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #1e73be;
	border: 1px solid #1e73be;
	background-repeat: no-repeat;
	background-position: 54% center;
	background-size: 16px 17px;
	background-image: url( "data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2017%27%3E%3Cpath%20d%3D%27M15.1576%207.12736L2.58579%200.218067C1.56433%20-0.343043%200%200.201467%200%201.5893V15.4046C0%2016.6496%201.45361%2017.4%202.58579%2016.7758L15.1576%209.86982C16.279%209.25559%2016.2826%207.74159%2015.1576%207.12736Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E" );
}

.zuyan-inline-audio-player[data-state="playing"]::before {
	background-color: #fff;
	background-position: center;
	background-size: 17px 17px;
	background-image: url( "data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2017%2017%27%3E%3Cpath%20d%3D%27M5.46429%2017H1.82143C0.815848%2017%200%2016.1842%200%2015.1786V1.82143C0%200.815848%200.815848%200%201.82143%200H5.46429C6.46987%200%207.28571%200.815848%207.28571%201.82143V15.1786C7.28571%2016.1842%206.46987%2017%205.46429%2017ZM17%2015.1786V1.82143C17%200.815848%2016.1842%200%2015.1786%200H11.5357C10.5301%200%209.71429%200.815848%209.71429%201.82143V15.1786C9.71429%2016.1842%2010.5301%2017%2011.5357%2017H15.1786C16.1842%2017%2017%2016.1842%2017%2015.1786Z%27%20fill%3D%27%231e73be%27%2F%3E%3C%2Fsvg%3E" );
}

.zuyan-inline-audio-player[data-show-time="0"]::after {
	content: none;
}

.zuyan-inline-audio-player::after {
	content: attr( data-duration-label );
	position: absolute;
	top: calc( 100% + 1px ); /* 播放鍵與時間數字間距（比 v2.0.6 多 +2px） */
	left: 50%;
	transform: translateX( -50% );
	width: var( --time-width, 32px );
	font-family: "Khand", sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/**
 * 夜間模式：跟 `zuyan-ratings` 同一套判斷方式，用 Foxiz 主題自己切換
 * 日/夜模式時掛在 body 上的 `data-theme="dark"`（不是 `prefers-color-scheme`，
 * 這裡故意跟主題保持一致）。
 *
 * 只換使用者指定的兩處：
 * 1. 靜止（未播放）狀態中間的播放三角形圖示，原本是白色（#fff），改成
 *    #2b313b。
 * 2. 播放中（顯示暫停圖示）那個狀態的白色底圓，原本是 #fff，改成
 *    #2b313b。暫停圖示本身（藍色 #1e73be）維持不變，跟深色底有足夠對比。
 */
body[data-theme="dark"] .zuyan-inline-audio-player::before {
	background-image: url( "data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2017%27%3E%3Cpath%20d%3D%27M15.1576%207.12736L2.58579%200.218067C1.56433%20-0.343043%200%200.201467%200%201.5893V15.4046C0%2016.6496%201.45361%2017.4%202.58579%2016.7758L15.1576%209.86982C16.279%209.25559%2016.2826%207.74159%2015.1576%207.12736Z%27%20fill%3D%27%232b313b%27%2F%3E%3C%2Fsvg%3E" );
}

body[data-theme="dark"] .zuyan-inline-audio-player[data-state="playing"]::before {
	background-color: #2b313b;
}

/**
 * 窄螢幕表格儲存格溢出修正：這個格式常被放進表格儲存格自己獨立一欄
 * （例如角色語音頁面，播放鍵單獨佔一欄、旁邊一欄放台詞），欄寬用 %
 * 設定（`merge-cells-table-block` 產生的 `<colgroup><col
 * style="width:11.9%">`），而且該外掛把 `<table>` 設成
 * `table-layout:fixed`。播放鍵本身要求「任何寬度都維持 32×32px 正方
 * 形」，不能縮小遷就窄欄位；同時使用者也要求整張表格永遠是螢幕 100%
 * 寬，不能因為保護播放鍵那一欄而讓表格整體變寬、出現水平捲軸。
 *
 * 下面這條 `min-width` 只在「表格不是 `table-layout:fixed`」時有
 * 效——已經實測過（真的在窄螢幕的 iframe 裡量
 * `getBoundingClientRect()`，不是憑空推論）：`table-layout:fixed`
 * 配合 `<col>` 明確寫死的百分比寬度時，Chrome 完全不理會儲存格自己的
 * CSS `min-width`（即使加 `!important` 結果也一樣）。這條留著是給
 * 「沒有用 `table-layout:fixed`」的其他表格情境當保護；`merge-
 * cells-table-block` 產生的表格（目前唯一會用到這個格式的表格情境）
 * 真正生效的修法在 `view.js` 的 `ensureTableColumnWidths()`——直接把
 * 播放鍵那個 `<col>` 設成固定 px 寬度，其他 `<col>` 留空不設寬度，讓
 * `table-layout:fixed` 的演算法自動把「表格總寬度扣掉固定欄」的剩餘
 * 空間全部分給留空的欄位，表格整體寬度完全不受影響（見 view.js 裡的
 * 詳細說明；早期版本曾經改成撐寬整張 `<table>` 的 `min-width`，但那樣
 * 會連文字欄一起按比例被拖寬，使用者實測後回報不要，已經換掉）。
 */
.wp-block-table td:has( > .mctb-cell-inner .zuyan-inline-audio-player ),
.wp-block-table th:has( > .mctb-cell-inner .zuyan-inline-audio-player ),
.wp-block-table td:has( > .zuyan-inline-audio-player ),
.wp-block-table th:has( > .zuyan-inline-audio-player ) {
	min-width: 37px; /* 32px 播放鍵 + 左右各 2px margin，跟 view.js 的 MIN_CELL_WIDTH 一致 */
}