/* ===== 全站共用的「FB 式留言」樣式 =====
 *
 * [FBCMT 2026-10-08] 站長:「全站貼文留言結構都改成 fb 1:1 模式」「包含結構與排版與 css」「公共程式統一」。
 *
 * 在這之前全站有七套各自為政的留言程式,class 名稱也各自一套:
 *   thread-view.js  .fb-c / .fb-bubble / .fb-cmeta      ← 今天已做到 FB 1:1,以它為準
 *   home.html       .fb-comment / .fb-comment-bubble / .fb-cm-act
 *   post-view.html、profile.html、reels.html、explore.html、js/fb-video.js 各自又一套
 * 所以「改一邊另一邊沒變」是必然的。這支把樣式收成唯一一份,
 * 配 js/fb-comments.js(唯一一份結構產生器)一起用。
 *
 * 版面幾何(引線要對得準就靠這幾個數字,不要亂動):
 *   .fb-c 是 flex,第一層頭像 32 + gap 8 = 40
 *   → 回覆住的 .fb-cb 左緣離上層頭像中心剛好 24px,所以引線畫在 left:-24px
 *   第二層頭像 24 + gap 8 = 32,中心在 12 → left:-20px
 */

.fb-comments { padding: 4px 16px 12px; }
.fb-c { display: flex; gap: 8px; margin-top: 10px; }
.fb-cb { flex: 1; min-width: 0; }

/* ── 引線 ──
   長直線屬於「上層留言的頭像欄」,從頭像底下一路往下延伸;
   每則回覆只負責畫最後那個向右的轉彎。這樣不管上層泡泡有幾行都接得起來,
   不必去猜高度。線的長度由 js 量一次(停在最後一個轉彎,跟 FB 一樣)。 */
.fb-cav { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.fb-cline { flex: 1; width: 2px; min-height: 10px; margin-top: 4px; border-radius: 1px; background: var(--fbc-line, #4a4b4d); }
.fb-ckids { position: relative; }
.fb-c-nested { position: relative; margin-left: 0; padding-left: 0; }
.fb-c-nested::before {
  content: ''; position: absolute; left: -24px; top: -10px; width: 24px; height: 22px;
  border-left: 2px solid var(--fbc-line, #4a4b4d); border-bottom: 2px solid var(--fbc-line, #4a4b4d);
  border-bottom-left-radius: 10px; pointer-events: none;
}
.fb-ckids .fb-ckids .fb-c-nested::before { left: -20px; width: 20px; }

/* ── 泡泡 ── */
.fb-bubble { display: inline-block; max-width: 100%; background: var(--fbc-bubble, #3a3b3c); border-radius: 18px; padding: 8px 12px;
  /* [LIKEPOS 2026-10-19] 站長:「你的讚亂跑」。讚數 .fb-clike 是 position:absolute
     (要貼在泡泡右下角,FB 就是那樣),但泡泡沒有 position:relative ——
     於是它往上找到別的祖先當基準,跑到「查看 N 則回覆」那行的最右邊去。 */
  position: relative; }
.fb-cname { font-weight: 600; font-size: 13px; color: inherit; text-decoration: none; display: block; }
.fb-ctext { font-size: 15px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.fb-cimg { display: block; margin-top: 6px; max-width: 240px; max-height: 240px; border-radius: 12px; }

/* ── 動作列:讚 · 回覆 · 分享(比照 FB) ── */
.fb-cmeta { display: flex; align-items: center; gap: 12px; padding: 2px 12px 0; font-size: 12px; color: var(--fbc-text, #ffffff); }
.fb-cmeta button { background: none; border: 0; color: inherit; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.fb-cmeta button:hover { text-decoration: underline; }
/* [BLUELIKE 2026-10-09] 站長:「按讚完都是預設藍色讚」—— 按過的「讚」要藍字,跟 FB 一致 */
.fb-cmeta button.on { color: #1b74e4; font-weight: 600; }
.fb-clike img { width: 16px; height: 16px; display: block; }
.fb-clike { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.fb-cmore { width: 28px; height: 28px; margin: 0; }

/* ── 查看 N 則回覆:跟回覆同一個縮排、同樣掛在引線上 ── */
.fb-cshow {
  display: block; background: none; border: 0; color: var(--fbc-text, #ffffff);
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 6px 0 2px; margin-top: 10px; cursor: pointer; text-align: left;
}
.fb-cshow:hover { text-decoration: underline; }

/* ── 輸入列(底部那條 + 內嵌的回覆框) ── */
/* [INPUTBG 2026-10-19] 站長:「為什麼留言欄後面是透明的?」
   原本是 background:inherit —— 父容器沒有自己的背景時它就是透明的,
   而這條輸入列是釘在底部的,後面的留言就直接穿透上來。
   給它實色:預設吃面板底色(--fbc-panel),沒定義就用深色面板的 #242526;
   白天主題另外覆寫成白底,不然白天會變成一條深色帶。 */
.fb-input { display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px 14px;
  background: var(--fbc-panel, #000000); }
html:not([data-theme="dark"]) .fb-input { background: var(--fbc-panel, #ffffff); }
.fb-inbox { flex: 1; background: var(--fbc-bubble, #3a3b3c); border-radius: 18px; padding: 6px 10px 4px 14px; }
.fb-inbox input { padding: 4px 0; width: 100%; background: none; border: 0; color: inherit; font: inherit; font-size: 15px; outline: none; }
.fb-tools { display: flex; justify-content: flex-end; gap: 2px; }
.fb-tools button { background: none; border: 0; color: var(--fbc-text, #ffffff); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fb-tools button:hover { background: rgba(255, 255, 255, .08); }
.fb-cbox .fb-inbox { margin-top: 2px; }
.fb-cbox .fb-inbox input { font-size: 14px; }

/* ── 淺色主題 ── */
html:not([data-theme="dark"]) {
  --fbc-line: #ced0d4;
  --fbc-bubble: #f0f2f5;
  --fbc-text: #65676b;
}

/* ───── [FBCMT3 2026-10-14] 站長:「完全沒有跟fb依樣反而更差」「不只差異6個地方」。
   上一版我把校正寫進 thread-view.css,但這一支載入順序在它後面、class 又同名,
   所以 .fb-cmeta / .fb-bubble 那幾條全被這裡蓋回去,改了等於沒改。
   這一份才是全站留言的唯一真相(檔頭自己就寫了「以它為準」),校正放這裡。 ───── */

/* 灰字小字:原本吃 --fbc-text(#ffffff),在 FB 上這一列是灰的 */
.fb-cmeta { gap: 12px; padding: 3px 0 0 12px; line-height: 1; color: var(--fbc-dim, #b0b3b8); }
.fb-cmeta > span { color: var(--fbc-dim, #b0b3b8); }
.fb-cmeta button { color: var(--fbc-dim, #b0b3b8); font-weight: 600; line-height: 1; }

/* 泡泡與 ⋯ 同一行;⋯ 滑過該則才浮現(FB 不是常駐) */
.fb-brow { display: flex; align-items: center; gap: 6px; }
.fb-bwrap { position: relative; display: inline-block; max-width: calc(100% - 40px); }
.fb-cmore { opacity: 0; transition: opacity .12s; flex: none; }
.fb-c:hover > .fb-cb > .fb-brow > .fb-cmore, .fb-cmore:focus { opacity: .75; }

/* 反應膠囊貼在泡泡右下角外緣(原本 margin-left:auto 會被推到整列最右邊) */
/* [LIKELINE 2026-10-19] 站長:「你的讚亂跑」「按讚的方式都不一樣?」
   原本是 position:absolute 貼在泡泡右下角 —— 但每則留言的泡泡寬度不同,
   徽章就跟著跑到不同位置,而且會蓋住底下那行「剛剛 讚 回覆 分享」。
   改成待在動作列裡、靠右對齊:所有留言的讚數落在同一條垂直線上,
   位置固定、不會互相壓到。 */
.fb-clike { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; position: static; }
/* [NOJANK 2026-10-19] 讚數徽章裡的圖是 16px,比 12px 的文字高,
   所以它一出現就把整行撐高 4px —— 按個讚底下的留言就往下跳一下。
   給動作列一個足夠的最小高度,有沒有徽章都一樣高。 */
.fb-cmeta { min-height: 20px; }
.fb-clike { line-height: 1; }
.fb-clike img { display: block; }
.fb-clike .fb-rx { display: inline-flex; }
.fb-clike .fb-rx img { width: 16px; height: 16px; border-radius: 50%; box-shadow: none; }
.fb-clike .fb-rx img + img { margin-left: -4px; }
.fb-clike b { font-weight: 400; color: var(--fbc-dim, #b0b3b8); padding-left: 1px; }

/* 泡泡行距收緊:名字與內文之間不要空一截 */
.fb-bubble { padding: 7px 12px; }
.fb-cname { line-height: 1.3; margin-bottom: 1px; }
.fb-ctext { line-height: 1.33; }

/* 引線細一點、顏色不要太亮 */
.fb-cline { background: var(--fbc-line, #3e4042); }
.fb-c-nested::before { border-color: var(--fbc-line, #3e4042); }

html[data-theme="dark"], html:not([data-theme="light"]) { --fbc-line: #3e4042; --fbc-dim: #b0b3b8; }
html:not([data-theme="dark"]) { --fbc-dim: #65676b; }

/* ───── [TAPFIX 2026-10-14] 留言列的按鈕被全域觸控規則撐成 44px ─────
   device-tiers.css 有一條 `button, [role=button] { min-height: var(--tap-min) }`(44px),
   包在 @media (max-width: 899px) 裡 —— 看起來只影響手機,但**串文頁是跑在 iframe 裡的**,
   媒體查詢看的是 iframe 自己的寬度,不是瀏覽器視窗,所以桌機一樣中招。
   實測:meta 列的「讚」高 44px、整列 47px,FB 是 12px / 約 18px —— 這就是「版面不像 FB」最大的一塊。
   FB 不論手機或桌機,留言的「讚·回覆」都是小字連結,不是 44px 的方塊,所以這裡明確豁免。
   選擇器比那條全域規則精確(0,1,1 > 0,0,1),不必動到別人,也不用 !important。 */
.fb-cmeta button { min-height: 0; height: auto; }
.fb-cshow { min-height: 0; }
.fb-cmore { min-height: 0; height: 28px; }
.fb-tools button { min-height: 32px; }
.fb-quote { min-height: 0; }

/* ───── [BOXROW 2026-10-14] 回覆框要跟 FB 一樣是「一行膠囊」 ─────
   原本 .fb-inbox 是上下排(input 一行、工具列另一行),所以每個回覆框高到 90px,
   在串文裡一路疊下來整個版面被撐開,跟 FB 的細長膠囊差很多。
   FB:頭像 + 一條膠囊,輸入框與右側小圖示同一行,整個約 36px 高。 */
.fb-cbox .fb-inbox{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:4px 8px 4px 14px;border-radius:999px;margin-top:0}
.fb-cbox .fb-inbox input{flex:1 1 120px;min-width:0;padding:3px 0;font-size:14px}
.fb-cbox .fb-tools{flex:none;justify-content:flex-end;gap:0}
.fb-cbox .fb-tools button{width:28px;height:28px;min-height:28px}
.fb-cbox .fb-tools svg{width:17px;height:17px}
/* 引用小條要自己佔一整行,不要跟輸入框擠在同一行 */
.fb-cbox .fb-qchip{flex:1 0 100%;order:-1;padding:2px 2px 2px 0}

/* 「查看 N 則回覆」:FB 的橫線是從引線轉出來接到文字的,字也不要那麼粗 */
.fb-cshow{font-size:13px;font-weight:600;padding:4px 0 2px;margin-top:8px;color:var(--fbc-dim,#b0b3b8)}
.fb-cshow:hover{color:var(--fbc-text,#e4e6eb)}