/* 閱讀器底部工具條(2026-09-22 v5):右下角頁碼開合上方進度條(同 PWA) + 收藏 / 下載 / 目錄(合集) / 評論;與頂欄一起顯隱(reader.js toggleUI 切 #bottom-bar 的 translate-y-24)
   佈局與 PWA 閱讀器底欄對齊,之後 App 也照這套做。顏色全走 reader.css 的主題變量,亮暗色自動跟。 */
/* 離底距離:工具條的底部留白與右下角頁碼共用,改一處兩邊跟著走。
   ⚠️ reader.2026012701.css 有 `body:has(#viewport.mode-vertical) #bottom-bar{padding-bottom:env(safe-area-inset-bottom)}`,
   優先級比單個 #bottom-bar 高,直排模式會把下留白清成 0(工具條貼死在螢幕底邊),所以這裡必須 !important 壓回去。
   動畫跟頂欄對齊:頂欄的 .glass-panel 是 all .4s ease,這裡同樣 .4s ease,收起剛好位移自己的高度。 */
#bottom-bar { --rb-gap: calc(28px + env(safe-area-inset-bottom, 0px));
  /* 主要文字直接用 --capsule-text:PC 亮色主題底仍是深玻璃(值是淺色),手機亮色底是白玻璃(值是深色),同一個變量兩邊都對。
     懸停底色用中性灰,深底白底都看得見;強調色深底用淺藍,白底(rb-onlight)換成深藍。 */
  --rb-hover: rgba(128,128,128,.18); --rb-accent: #93c5fd;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990 !important; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; padding: 0 0 var(--rb-gap) !important;
  transition: transform .4s ease !important; }
#bottom-bar.translate-y-24 { transform: translateY(100%); }
#bottom-bar > * { pointer-events: auto; }

/* 進度條:預設收起,點右下角頁碼才展開;展開後在按鈕列正上方(同 PWA) */
.rb-slider { display: none; align-items: center; gap: 10px; width: min(360px, calc(100vw - 32px)); height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--bg-glass); border: 1px solid var(--border-glass); box-shadow: var(--shadow-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--capsule-text); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.rb-slider.show { display: flex; }
.rb-slider .rb-lbl { flex: none; color: var(--btn-text-idle); }
.rb-slider .rb-num { flex: none; min-width: 62px; text-align: right; font-family: "Menlo", "Monaco", "Courier New", monospace; color: var(--btn-text-idle); }
.rb-slider .rb-num b { color: var(--capsule-text); }
/* ⚠️ reader.css 對所有 input[type=range] 做了 rotate(-90deg)+固定寬高(頂欄「自動」速度的豎向滑杆用),這裡全部覆蓋回橫向 */
.rb-slider input[type=range] { flex: 1; width: auto; height: 5px; transform: none; touch-action: auto; -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, #3b82f6 0%, rgba(128,128,128,.32) 0%); border-radius: 3px; outline: none; cursor: pointer; margin: 0; }
.rb-slider input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: transparent; }
.rb-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: #fff; border: 2px solid #3b82f6; box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: pointer; transition: none; }
.rb-slider input[type=range]:active::-webkit-slider-thumb { transform: scale(1.1); }
.rb-slider input[type=range]::-moz-range-track { height: 5px; border-radius: 3px; background: transparent; }
.rb-slider input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #3b82f6; cursor: pointer; }

/* 按鈕列 */
.rb-btns { display: flex; align-items: stretch; gap: 4px; padding: 5px; border-radius: 22px;
  background: var(--bg-glass); border: 1px solid var(--border-glass); box-shadow: var(--shadow-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.rb-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 46px; border-radius: 16px; border: 0; background: transparent;
  color: var(--btn-text-idle); cursor: pointer; text-decoration: none !important; gap: 2px; transition: background .2s, color .2s; user-select: none; }
.rb-btn:hover { background: var(--rb-hover); color: var(--capsule-text); }
.rb-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rb-btn span { font-size: 10px; line-height: 1; font-weight: 600; }
.rb-btn.on { color: #ec4899; background: rgba(236,72,153,.14); }
.rb-btn.on svg { fill: #ec4899; }
.rb-btn.busy { opacity: .5; pointer-events: none; }

/* 右下角頁碼:常駐顯示當前頁,點一下開合上方進度條;底邊與按鈕列對齊 */
.rb-page { position: absolute; right: 16px; bottom: var(--rb-gap); display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 13px; border-radius: 999px;
  background: var(--bg-glass); border: 1px solid var(--border-glass); box-shadow: var(--shadow-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--capsule-text); font-family: "Menlo", "Monaco", "Courier New", monospace; font-size: 12px; font-weight: 700; cursor: pointer; user-select: none; transition: border-color .2s; }
.rb-page:hover, .rb-page.on { border-color: #3b82f6; }
.rb-page-chev { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; color: var(--btn-text-idle); transition: transform .25s; }
.rb-page.on .rb-page-chev { transform: rotate(180deg); }

/* 彈層通用:浮在整個工具條(含進度條)上方,留一點間距,不遮進度條 */
.rb-pop { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 32px));
  display: none; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: var(--bg-glass); border: 1px solid var(--border-glass); box-shadow: 0 8px 40px rgba(0,0,0,.45); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.rb-pop.show { display: flex; }
.rb-pop-hd { display: flex; align-items: center; height: 44px; padding: 0 14px; font-size: 13px; font-weight: 700; color: var(--capsule-text); border-bottom: 1px solid var(--border-glass); flex: none; }
.rb-pop-hd .rb-x { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--btn-text-idle); cursor: pointer; font-size: 16px; }
.rb-pop-hd .rb-x:hover { color: var(--capsule-text); background: var(--rb-hover); }
/* 清單:最多顯示 10 行(40px 一行),更多用滾輪 / 拖動滾動 */
.rb-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; max-height: calc(10 * 40px + 12px); scrollbar-width: thin; }
.rb-item { display: flex; align-items: center; gap: 10px; height: 40px; flex: none; padding: 0 14px; color: var(--capsule-text); text-decoration: none !important; font-size: 13px; cursor: pointer; }
.rb-item:hover { background: var(--rb-hover); color: var(--capsule-text); }
.rb-item .rb-no { flex: none; min-width: 52px; font-family: "Menlo", "Monaco", monospace; font-size: 12px; color: var(--btn-text-idle); }
.rb-item .rb-tt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-item.cur { color: var(--capsule-text); background: rgba(59,130,246,.18); }
.rb-item.cur .rb-no { color: var(--rb-accent); }
.rb-item.cur::after { content: "當前"; flex: none; font-size: 10px; color: var(--rb-accent); }
.rb-empty { padding: 18px; text-align: center; font-size: 12px; line-height: 1.8; color: var(--btn-text-idle); }
.rb-empty .rb-link { color: var(--rb-accent); text-decoration: none !important; font-weight: 700; }
.rb-empty .rb-link:hover { text-decoration: underline !important; }

/* 窄屏(手機):按鈕列本身就佔掉大半寬度,右下角頁碼疊上去會壓住「評論」→ 改成堆到按鈕列上方靠右。
   用 flex order 排成「頁碼 / 進度條 / 按鈕列」,不動 DOM 順序(彈層仍靠 .rb-pop 絕對定位浮在最上面)。 */
@media (max-width: 520px) {
  .rb-page { position: static; order: -2; align-self: flex-end; margin: 0 16px 8px 0; }
  .rb-slider { order: -1; }
  .rb-btn { width: 60px; }
}

/* 手機亮色(白玻璃底):強調色換深藍,彈層陰影收淡一點 */
[data-theme="light"] #bottom-bar.rb-onlight { --rb-accent: #1976d2; }
[data-theme="light"] #bottom-bar.rb-onlight .rb-pop { box-shadow: 0 8px 28px rgba(0,0,0,.18); }

/* 提示 */
#rb-toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%) translateY(10px); z-index: 9995; padding: 8px 16px; border-radius: 999px; font-size: 12px; color: #fff;
  background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.12); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
#rb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* 目錄載入中/失敗的提示行(點開才載) */
.rb-list .rb-toc-tip{padding:18px 12px;text-align:center;font-size:13px;opacity:.6}