/* ============================================================================
   chatroom-light.css — 白底（淺色）主題覆蓋層
   建立日：2026-08-05

   ⚠️ 硬規則（改這個檔案前務必讀）
   1. **本檔每一條規則的每一個 selector 都必須以 `body.theme-light` 開頭。**
      沒有 `theme-light` 這個 class 就一條都不會生效 → 其他使用者零影響。
      守衛：`css/tools/check-light-theme-prefix.py`（逐條 selector 檢查）。
   2. **不得修改 css/chatroom.css**。本檔是純覆蓋層，靠「載入順序在後 +
      特異性更高（多一個 element + 一個 class）」蓋掉深色值，不動原檔一個字。
   3. 圖片 / 影片 / <audio> 一律不加 filter —— 只換「容器」的背景色，
      不對內容做任何色彩反轉或濾鏡。

   套用方式：js/chatroom.js 開機時依 localStorage 決定要不要加 body.theme-light
      - ccms_theme === 'light' → 加
      - ccms_theme === 'dark'  → 不加
      - 沒設 ccms_theme，且 ccms_username ∈ {cyntia, cynthia}（不分大小寫）→ 加
      - 其他人一律不加

   配色（對比度以 WCAG 2.1 相對亮度公式實算）
      頁面底      #ffffff
      次要面板    #f5f5f7   （側欄、輸入列、頁尾）
      更淺面板    #fafafc   （thread 標頭）
      面板 hover  #ececf2 / #f0f0f3
      選取態      #e0e0ee
      assistant   #f2f3f5
      user 泡泡   #4f46e5 + #ffffff 白字（維持原樣，白字對紫底 6.29:1）
      程式碼區    #f0f0f3
      主文字      #1a1a1e   對 #ffffff 17.4:1 ／對 #f5f5f7 15.9:1  ✅ ≥7:1
      次要文字    #5a5a66   對 #ffffff  6.8:1 ／對 #f5f5f7  6.2:1  ✅ ≥4.5:1
      第三層文字  #6b6b78   對 #ffffff  5.3:1                     ✅ ≥4.5:1
      邊框        #d8d8e0（主）／#e2e2ea（細）／#ececf2（列分隔）
      連結        #0060df   對 #ffffff  5.6:1 ／對 #f2f3f5 5.1:1  ✅ ≥4.5:1
      琥珀 accent #b45309   對 #ffffff  5.0:1
      綠          #047857 ／ 紅 #b91c1c ／ 藍 #1d4ed8 ／ 紫 #6d28d9
   ============================================================================ */

/* ---------------------------------------------------------------- 基底 */
body.theme-light {
  background: #ffffff;
  color: #1a1a1e;
  /* 讓原生表單元件、預設捲軸也切成淺色 */
  color-scheme: light;
}

/* 捲軸（WebKit / Blink）。Firefox 走 scrollbar-color。 */
body.theme-light { scrollbar-color: #c4c4d0 #f0f0f3; }
body.theme-light *::-webkit-scrollbar { width: 10px; height: 10px; }
body.theme-light *::-webkit-scrollbar-track { background: #f0f0f3; }
body.theme-light *::-webkit-scrollbar-thumb { background: #c4c4d0; border-radius: 5px; }
body.theme-light *::-webkit-scrollbar-thumb:hover { background: #a8a8b8; }
body.theme-light *::-webkit-scrollbar-corner { background: #f0f0f3; }

/* ---------------------------------------------------------------- 標頭 */
body.theme-light header { background: #f5f5f7; border-bottom: 1px solid #d8d8e0; }
body.theme-light header .brand { color: #1a1a1e; }
body.theme-light header #user-info { color: #5a5a66; }
body.theme-light header button { background: #e8e8ee; color: #1a1a1e; }
body.theme-light header button:hover { background: #dcdce6; }
body.theme-light .conn.online { background: #d1fae5; color: #065f46; }
body.theme-light .conn.offline { background: #fee2e2; color: #991b1b; }

/* ------------------------------------------- 登入面板（chatroom 未掛，備援） */
body.theme-light #login-panel { background: #f5f5f7; border: 1px solid #d8d8e0; }
body.theme-light #login-panel input { background: #ffffff; color: #1a1a1e; border: 1px solid #d8d8e0; }
body.theme-light #login-panel button { background: #4f46e5; color: #ffffff; }
body.theme-light #login-panel .otp-row button:disabled { background: #dcdce6; color: #7c7c88; }
body.theme-light #login-mode-switch { color: #5a5a66; }
body.theme-light #login-mode-switch a { color: #0060df; }
body.theme-light #login-panel .err { color: #b91c1c; }

/* ---------------------------------------------------------------- 側欄 */
body.theme-light #sidebar { background: #f5f5f7; border-right: 1px solid #d8d8e0; }
body.theme-light .sidebar-head { border-bottom: 1px solid #d8d8e0; color: #1a1a1e; }
body.theme-light .sidebar-head button { color: #5a5a66; }
body.theme-light .sidebar-head-btns button { color: #5a5a66; }
body.theme-light .sidebar-head-btns button:hover { background: #ececf2; color: #1a1a1e; }

body.theme-light #worker-list li { border-bottom: 1px solid #ececf2; }

/* 2026-08-11 cyntia：hover 只亮游標所在那一列，顏色改淡紫（她指定）。
 *
 * 改之前的症狀：滑鼠移到任一個 worker 上，**整個 cluster 區塊一起變色**。
 *
 * 根因不是顏色，是選擇器命中的層級不對。#worker-list 是巢狀清單：
 *   <li class="section-content">          ← 外層，包住整個 cluster 區塊
 *     <ul class="section-content-list">
 *       <li data-session-id="...">        ← 內層，才是一列一列的 worker
 * CSS 的 :hover 會沿著祖先鏈一路成立，所以原本那條 `li:hover` 在滑到 worker 時
 * **同時命中外層 wrapper**，整區就一起上色了。chatroom.css 的註解早就記過
 * 「li:hover 多匹配到 wrapper li」，但當時只處理了 display/border/cursor，
 * 沒處理背景色。
 *
 * 修法：用 [data-session-id] 限定。只有 buildWorkerLi() 產生的真正 worker 列
 * 有這個屬性（chatroom.js:1020 `li.dataset.sessionId = w.session_id`），
 * wrapper 與 section header 都沒有。不需要動任何 JavaScript。
 *
 * 第一行的 transparent 不可省略：少了它，wrapper 會掉回 chatroom.css 那條
 * 無條件的 `#worker-list li:hover { background: #1a1a23 }`（深色底用的），
 * 在白底上會變成一塊深灰，比改之前更糟。
 *
 * 只有 cyntia 會變：這幾條都掛在 body.theme-light 底下，而 .theme-light 只有
 * 名單內的使用者才會套上（見 chatroom.js 的 applyThemePreference），其他使用者
 * 的 body 沒有這個 class，這三條一條都不會匹配到 —— 他們的行為一個字都沒變。 */
body.theme-light #worker-list li:not([data-session-id]):hover { background: transparent; }
body.theme-light #worker-list li[data-session-id]:hover { background: #f0e7ff; }
body.theme-light #worker-list li.active { background: #e2d2ff; }
body.theme-light #worker-list .avatar { background: #e2e2ea; color: #5a5a66; }
body.theme-light #worker-list .name { color: #1a1a1e; }
body.theme-light #worker-list .preview { color: #5a5a66; }
body.theme-light #worker-list .warlord { color: #b45309; }
body.theme-light #worker-list .state-dot { background: #059669; }
body.theme-light #worker-list .state-dot.locked { background: #d97706; }
body.theme-light #worker-list .wl-line { color: #b45309; }
body.theme-light #worker-list .wl-might { color: #b91c1c; }

body.theme-light #worker-list .worker-section-header .section-toggle { color: #6b6b78; }
body.theme-light #worker-list .worker-section-header .section-toggle:hover { color: #3f3f46; }
body.theme-light #worker-list .worker-section-header .section-caret { color: #6b6b78; }
body.theme-light #worker-list .worker-section-header .section-count { color: #6b6b78; }
body.theme-light #worker-list .worker-subsection-header .section-toggle { color: #5a5a66; }
body.theme-light #worker-list .worker-subsection-header .section-toggle:hover { background: #ececf2; }
body.theme-light #worker-list .worker-subsection-header .section-caret { color: #6b6b78; }
body.theme-light #worker-list .worker-subsection-header .section-label { color: #6d28d9; }
body.theme-light #worker-list .worker-subsection-header .section-count { color: #6b6b78; }

/* 側欄未讀 badge 維持紅底白字（#dc2626 對白字 4.8:1，不改）。 */
body.theme-light #worker-list .viewers-mini .v-dot { border-color: #ffffff; }
body.theme-light #worker-list .viewers-mini .v-dot.overflow { background: #6b7280; }

/* ⋯ 列選單鈕 */
body.theme-light #worker-list li .row-actions { color: #5a5a66; }
body.theme-light #worker-list li .row-actions:hover { background: #e6e6ee; color: #1a1a1e; }

/* ------------------------------------------------------- 下拉選單 row-menu */
body.theme-light .row-menu {
  background: #ffffff;
  border: 1px solid #d8d8e0;
  box-shadow: 0 6px 20px rgba(20, 20, 40, 0.16);
}
body.theme-light .row-menu button { color: #1a1a1e; }
body.theme-light .row-menu button:hover { background: #f0f0f3; }
body.theme-light .row-menu button.danger { color: #b91c1c; }
body.theme-light .row-menu button.danger:hover { background: #fee2e2; }

/* --------------------------------------------------- 登錄武將 modal（cw-*） */
body.theme-light .cw-reload-btn { color: #6b6b78; }
body.theme-light .cw-reload-btn:hover { color: #3f3f46; }
body.theme-light .cw-filter { background: #ffffff; color: #1a1a1e; border: 1px solid #d8d8e0; }
body.theme-light .cw-profile-list li { background: #f5f5f7; }
body.theme-light .cw-profile-list li:hover { background: #ececf2; }
body.theme-light .cw-profile-list .cw-name { color: #1a1a1e; }
body.theme-light .cw-profile-list .cw-meta { color: #6b6b78; }
body.theme-light .cw-profile-list .cw-scope-shared { color: #047857; }
body.theme-light .cw-profile-list li.cw-loading { background: #e0e7ff; outline: 1px solid #4f46e5; }
body.theme-light .cw-spinner { color: #4338ca; }
body.theme-light .cw-profile-list li.cw-section-header,
body.theme-light .cw-profile-list li.cw-section-content { background: transparent; }
body.theme-light .cw-profile-list li.cw-section-header:hover,
body.theme-light .cw-profile-list li.cw-section-content:hover { background: transparent; }
body.theme-light .cw-section-header { border-bottom: 1px solid #e2e2ea; }
body.theme-light .cw-section-header .section-toggle { color: #6b6b78; }
body.theme-light .cw-section-header .section-toggle:hover { color: #3f3f46; }
body.theme-light .cw-section-header .section-count { color: #6b6b78; }
body.theme-light .cw-subsection-header .section-label { color: #4b5563; }

body.theme-light .cw-btn { border: 1px solid #c8c8d4; color: #4b5563; }
body.theme-light .cw-btn:hover { background: #ececf2; }
body.theme-light .cw-btn-enroll { border-color: #4f46e5; color: #4338ca; }
body.theme-light .cw-btn-enroll:hover { background: #4f46e5; color: #ffffff; }
body.theme-light .cw-btn-dismiss { border-color: #dc2626; color: #b91c1c; }
body.theme-light .cw-btn-dismiss:hover { background: #dc2626; color: #ffffff; }
body.theme-light .cw-btn-loadout { border-color: #0d9488; color: #0f766e; }
body.theme-light .cw-btn-loadout:hover:not(:disabled) { background: #0d9488; color: #ffffff; }
body.theme-light .cw-btn-loadout:disabled { border-color: #d8d8e0; color: #9494a0; }

/* ------------------------------------------------ Loadout 總覽 / 編輯 modal */
/* 原檔用了 !important（.lo-overview:hover），這裡必須同樣 !important 才蓋得掉。 */
body.theme-light .lo-overview:hover { background: #f5f5f7 !important; }
body.theme-light .loadout-overview-title { color: #1a1a1e; }
body.theme-light .lo-section-header { color: #5a5a66; }
body.theme-light .lo-item { color: #3f3f46; }
body.theme-light .lo-item.global { color: #6b6b78; }
body.theme-light .lo-empty { color: #6b6b78; }

body.theme-light .loadout-modal-footer { border-top: 1px solid #e2e2ea; }
body.theme-light .loadout-modal-footer .btn-primary { background: #4f46e5; color: #ffffff; }
body.theme-light .loadout-modal-footer .btn-primary:hover { background: #4338ca; }
body.theme-light .lo-edit-title { color: #6b6b78; border-bottom: 1px solid #e2e2ea; }
body.theme-light .lo-edit-item:hover { background: #f0f0f3; }
body.theme-light .lo-edit-name { color: #1a1a1e; }
body.theme-light .lo-edit-cat { color: #6b6b78; }
body.theme-light .lo-edit-tag { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
body.theme-light .lo-cat-header { color: #5a5a66; }
body.theme-light .lo-cat-header:hover { background: #f0f0f3; }
body.theme-light .lo-cat-count { color: #6b6b78; }

body.theme-light .lo-ai-config { background: #f5f5f7; border: 1px solid #d8d8e0; }
body.theme-light .lo-ai-title { color: #4338ca; }
body.theme-light .lo-ai-row label { color: #5a5a66; }
body.theme-light .lo-ai-row select { background: #ffffff; color: #1a1a1e; border: 1px solid #d8d8e0; }
body.theme-light .lo-ai-hint { color: #6b6b78; }

body.theme-light .lo-tabs { border-bottom: 2px solid #e2e2ea; }
body.theme-light .lo-tab { color: #6b6b78; }
body.theme-light .lo-tab:hover { color: #3f3f46; background: #f0f0f3; }
body.theme-light .lo-tab.active { color: #1a1a1e; border-bottom-color: #4f46e5; }
body.theme-light .lo-tab-count { color: #6b6b78; background: #ececf2; }
body.theme-light .lo-tab.active .lo-tab-count { color: #4338ca; background: #e0e7ff; }

/* --------------------------------------------------------- 編輯武將 modal */
body.theme-light .ew-label { color: #5a5a66; }
body.theme-light #edit-worker-modal input { background: #ffffff; color: #1a1a1e; border: 1px solid #d8d8e0; }
body.theme-light .ew-actions button { background: #e8e8ee; color: #1a1a1e; }
body.theme-light .ew-actions button.primary { background: #4f46e5; color: #ffffff; }

/* ------------------------------------------------------------ viewers 疊圖 */
body.theme-light .viewers { color: #5a5a66; }
body.theme-light .viewers .v-dot { border-color: #ffffff; }
body.theme-light .viewers .v-dot.overflow { background: #6b7280; }

/* ------------------------------------------------------------ thread 標頭 */
body.theme-light #thread-head {
  background: #fafafc;
  border-bottom: 1px solid #d8d8e0;
  box-shadow: 0 2px 6px rgba(20, 20, 40, 0.08);
}
body.theme-light #thread-title { color: #1a1a1e; }

body.theme-light #warlord-card { background: #f5f5f7; border: 1px solid #d8d8e0; }
body.theme-light #warlord-card:hover { background: #ececf2; }
body.theme-light #warlord-card .wl-name { color: #1a1a1e; }
body.theme-light #warlord-card .wl-level { color: #b45309; }
body.theme-light #warlord-card .wl-might { color: #b91c1c; }
body.theme-light #warlord-card .wl-bar { background: #e0e0e8; }

/* 稀有度邊框在淺底上仍可辨識，維持原色，只調過亮的 C 級灰。 */
body.theme-light #warlord-card.rarity-C { border-color: #9494a0; }

/* -------------------------------------------------------------- 通用 modal */
body.theme-light .modal-backdrop { background: rgba(15, 15, 25, 0.40); }
body.theme-light .modal-box {
  background: #ffffff;
  border: 1px solid #d8d8e0;
  box-shadow: 0 12px 40px rgba(20, 20, 40, 0.18);
}
body.theme-light .modal-close { color: #5a5a66; }
body.theme-light .modal-box h2 { color: #1a1a1e; }

/* ------------------------------------------------------ 個人資料夾 picker */
body.theme-light .fp-btn { background: #eef1f5; color: #374151; border: 1px solid #cdd5e0; }
body.theme-light .fp-btn:hover:not(:disabled) { background: #e2e8f0; border-color: #94a3b8; }
body.theme-light .fp-breadcrumb { color: #1d4ed8; background: #f5f7fa; border: 1px solid #d8d8e0; }
body.theme-light .fp-up-btn { background: #eef1f5; color: #374151; border: 1px solid #cdd5e0; }
body.theme-light .fp-up-btn:hover:not(:disabled) { background: #e2e8f0; }
body.theme-light .fp-error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
body.theme-light .fp-list { border: 1px solid #d8d8e0; background: #ffffff; }
body.theme-light .fp-entry { border-bottom: 1px solid #ececf2; }
body.theme-light .fp-name { color: #3f3f46; }
body.theme-light .fp-name.fp-nav { color: #0060df; }
body.theme-light .fp-truncated { color: #b45309; }
body.theme-light .fp-paste-btn { color: #ffffff; }
body.theme-light .fp-paste-btn:disabled { background: #c8c8d4; }

/* --------------------------------------------------------- 武將詳情 modal */
body.theme-light .wm-row { border-bottom: 1px solid #e2e2ea; }
body.theme-light .wm-label { color: #5a5a66; }
body.theme-light #wm-rubric { color: #5a5a66; }

/* ---------------------------------------------------------------- Toast */
body.theme-light .toast {
  background: #ffffff;
  color: #92400e;
  border: 1px solid #d9a908;
  box-shadow: 0 4px 12px rgba(20, 20, 40, 0.18);
}
body.theme-light .toast.might-up { color: #b91c1c; border-color: #b91c1c; }
body.theme-light .toast.title-unlock { color: #6d28d9; border-color: #6d28d9; }

/* ------------------------------------------------ AI 運行中 inline indicator */
body.theme-light .cr-running-indicator { background: #eef1f5; border: 1px solid #d8d8e0; }
body.theme-light .cr-running-indicator .cr-running-label { color: #1d4ed8; }
body.theme-light .cr-running-indicator .cr-running-counter { color: #b45309; }
body.theme-light .cr-running-indicator .cr-interrupt-btn { background: #b91c1c; color: #ffffff; border: 1px solid #991b1b; }
body.theme-light .cr-running-indicator .cr-interrupt-btn:hover:not(:disabled) { background: #dc2626; border-color: #ef4444; }
body.theme-light .cr-running-indicator .cr-interrupt-btn:disabled { background: #e2e2ea; border-color: #d8d8e0; color: #7c7c88; }
body.theme-light .cr-running-indicator .cr-running-note { color: #b91c1c; }

/* ------------------------------------------------------------- 權限詢問卡 */
body.theme-light .cr-permission-prompt { background: #fffbeb; border: 1px solid #e0b84a; }
body.theme-light .cr-prompt-question { color: #92400e; }
body.theme-light .cr-prompt-btn { background: #e8f0fe; color: #1d4ed8; border: 1px solid #b9cdf5; }
body.theme-light .cr-prompt-btn:hover { background: #2563eb; color: #ffffff; border-color: #2563eb; }
body.theme-light .cr-prompt-btn.cr-prompt-selected { background: #1d4ed8; border-color: #1d4ed8; color: #ffffff; }
body.theme-light .cr-prompt-btn.cr-prompt-cancel { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
body.theme-light .cr-prompt-btn.cr-prompt-cancel:hover { background: #dc2626; color: #ffffff; border-color: #dc2626; }
body.theme-light .cr-prompt-answered { color: #15803d; }
body.theme-light .cr-prompt-multi .cr-prompt-question-block.cr-prompt-q-active { border-left-color: #d97706; }
body.theme-light .cr-prompt-tabs { border-bottom: 1px solid #e0d3a8; }
body.theme-light .cr-prompt-tab { border: 1px solid #e0d3a8; color: #57534e; background: #f5f1e8; }
body.theme-light .cr-prompt-tab.cr-prompt-tab-done { color: #15803d; border-color: #86efac; }
body.theme-light .cr-prompt-tab.cr-prompt-tab-active { color: #92400e; border-color: #d97706; }
body.theme-light .cr-prompt-btn.cr-prompt-notes-btn { background: #fffbeb; color: #92400e; border-color: #e0b84a; }
body.theme-light .cr-prompt-btn.cr-prompt-notes-btn:hover { background: #92400e; color: #ffffff; border-color: #92400e; }
body.theme-light .cr-prompt-notes-input { background: #ffffff; color: #1a1a1e; border: 1px solid #d8d8e0; }
body.theme-light .cr-prompt-notes-input:focus { border-color: #2563eb; }
body.theme-light .cr-prompt-btn.cr-prompt-notes-send { background: #15803d; color: #ffffff; border-color: #166534; }
body.theme-light .cr-prompt-btn.cr-prompt-notes-send:hover { background: #166534; color: #ffffff; }
body.theme-light .cr-prompt-degraded { color: #b91c1c; }

/* ------------------------------------------------------------- 成員列／彈窗 */
body.theme-light #thread-members { background: #f5f5f7; border-bottom: 1px solid #d8d8e0; color: #5a5a66; }
body.theme-light #thread-members:hover { background: #ececf2; }
body.theme-light #thread-members .mm-icon { color: #6b6b78; }
body.theme-light #thread-members .mm-first { color: #1a1a1e; }
body.theme-light #thread-members .mm-rest { color: #4b5563; background: #e6e6ee; }
body.theme-light #thread-members .mm-chev { color: #6b6b78; }
body.theme-light #mm-list li { background: #f5f5f7; }
body.theme-light #mm-list li.me { background: #e0e7ff; }
body.theme-light #mm-list .mm-avatar { background: #4f46e5; color: #ffffff; }
body.theme-light #mm-list .mm-name { color: #1a1a1e; }
body.theme-light #mm-list .mm-me-tag { color: #6d28d9; }
body.theme-light #mm-count { color: #5a5a66; }

/* ---------------------------------------------------------------- 訊息區 */
body.theme-light #thread-body { background: #ffffff; }
body.theme-light .bubble.assistant { background: #f2f3f5; color: #1a1a1e; }
/* user 泡泡刻意維持藍紫底白字（白字對 #4f46e5 為 6.29:1）。 */
body.theme-light .bubble.user { background: #4f46e5; color: #ffffff; }
body.theme-light .bubble.system { background: #eef1f5; color: #4b5563; }
body.theme-light .bubble.tool_use { background: #eef1f5; color: #1d4ed8; border-left-color: #1d4ed8; }
body.theme-light .bubble.tool_result { background: #eef1f5; color: #065f46; border-left-color: #059669; }
body.theme-light .bubble pre { background: #f0f0f3; color: #1a1a1e; }
body.theme-light .bubble code { background: #f0f0f3; color: #1a1a1e; }
/* user 泡泡內的 pre/code 維持半透明黑底白字（底仍是紫的，不能換淺色）。 */
body.theme-light .bubble.user pre,
body.theme-light .bubble.user code { background: rgba(0, 0, 0, 0.25); color: #ffffff; }
body.theme-light .bubble a { color: #0060df; }
body.theme-light .bubble a:visited { color: #6d28d9; }
body.theme-light .bubble a:hover { color: #003d94; }
/* user 泡泡（紫底）內的連結維持琥珀色，換成深藍會看不見。 */
body.theme-light .bubble.user a { color: #fde68a; }
body.theme-light .bubble.user a:visited { color: #fcd34d; }
body.theme-light .bubble.user a:hover { color: #fef3c7; }
body.theme-light .bubble.assistant .sender-name { color: #4338ca; }
body.theme-light .bubble.assistant .reply-tag { color: #047857; }
body.theme-light .bubble.assistant table,
body.theme-light .bubble.assistant th,
body.theme-light .bubble.assistant td { border-color: #d8d8e0; }
body.theme-light .bubble.assistant blockquote { border-left: 3px solid #d8d8e0; color: #5a5a66; }
body.theme-light .bubble.assistant hr { border-color: #e2e2ea; }

/* 三態 bubble：pending 在淺色下改成淺灰虛線框 */
body.theme-light .bubble.user.pending { background: #ececf2; color: #4b5563; border: 1px dashed #6366f1; }
body.theme-light .bubble.user.pending .pending-countdown { color: #b45309; }
body.theme-light .bubble.user.pending .bubble-cancel-btn:hover { background: rgba(0, 0, 0, 0.06); }
body.theme-light .bubble.user.queued { background: #4f46e5; color: #ffffff; border: 1px solid #6366f1; }
body.theme-light .bubble.user.delivered { background: #4f46e5; color: #ffffff; }

/* --------------------------------------------------------- 佇列狀態／置底鈕 */
body.theme-light #queue-status { background: #f5f5f7; border-top: 1px solid #d8d8e0; color: #5a5a66; }
body.theme-light #scroll-to-bottom-btn { background: #4f46e5; color: #ffffff; box-shadow: 0 2px 8px rgba(20, 20, 40, 0.22); }
body.theme-light #scroll-to-bottom-btn:hover { background: #6366f1; }

/* ---------------------------------------------------------------- 輸入列 */
body.theme-light #input-form { background: #f5f5f7; border-top: 1px solid #d8d8e0; }
body.theme-light #input-form .icon-btn { background: #e8e8ee; color: #1a1a1e; }
body.theme-light #input-form .icon-btn:hover:not(:disabled) { background: #dcdce6; }
body.theme-light #input-form #mic-btn.recording { background: #dc2626; color: #ffffff; }
body.theme-light #input-form textarea { background: #ffffff; color: #1a1a1e; border: 1px solid #d8d8e0; }
body.theme-light #input-form button { background: #4f46e5; color: #ffffff; }
body.theme-light #input-form button:disabled { background: #dcdce6; color: #7c7c88; }

/* ------------------------------------------------------------- 返回鈕（手機） */
body.theme-light #thread-back-btn { color: #1a1a1e; }
body.theme-light #thread-back-btn:hover { background: #ececf2; }
body.theme-light #thread-back-btn .back-arrow { color: #5a5a66; }

/* ------------------------------------------------------------ 用量 footer */
body.theme-light .server-metrics { border-top: 1px solid #d8d8e0; background: #f5f5f7; color: #374151; }
body.theme-light .server-metrics .sm-label { color: #5a5a66; }
body.theme-light .server-metrics .sm-metric { background: #e8e8ee; border: 1px solid #d8d8e0; color: #374151; }
body.theme-light .server-metrics .sm-metric[data-pct^="5"],
body.theme-light .server-metrics .sm-metric[data-pct^="6"],
body.theme-light .server-metrics .sm-metric[data-pct^="7"] { color: #b45309; border-color: #d97706; background: #fef3c7; }
body.theme-light .server-metrics .sm-metric[data-pct^="8"],
body.theme-light .server-metrics .sm-metric[data-pct^="9"],
body.theme-light .server-metrics .sm-metric[data-pct="100"] { color: #b91c1c; border-color: #dc2626; background: #fee2e2; }

/* ctx-pct badge 原本就是淺色（#eef2ff / #4f46e5），只補一條 hover 邊界避免糊掉。 */
body.theme-light button.ctx-pct { border-color: #c7d2fe; }

/* -------------------------------------------------------- 受控瀏覽器 card */
body.theme-light .browser-card {
  background: #ffffff;
  border: 1px solid #d8d8e0;
  box-shadow: 0 2px 10px rgba(20, 20, 40, 0.10);
}
body.theme-light .browser-card:hover { border-color: #2563eb; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.20); }
body.theme-light .browser-card .bc-head { color: #5a5a66; background: #f5f5f7; border-bottom: 1px solid #e2e2ea; }
body.theme-light .browser-card .bc-title { color: #1a1a1e; }
/* 縮圖底色只是「letterbox 留白」，不是濾鏡；圖片本身完全不動。 */
body.theme-light .browser-card .bc-thumb-wrap { background: #e8e8ee; }
body.theme-light .browser-card .bc-thumb { background: #e8e8ee; }
body.theme-light .browser-card .bc-thumb-placeholder { color: #5a5a66; }

/* ------------------------------------------------------- 受控瀏覽器 modal */
body.theme-light .browser-modal .modal-backdrop { background: rgba(15, 15, 25, 0.40); }
body.theme-light .browser-modal .browser-modal-box {
  background: #ffffff;
  border: 1px solid #d8d8e0;
  box-shadow: 0 12px 48px rgba(20, 20, 40, 0.22);
}
body.theme-light .browser-modal .browser-modal-close { color: #5a5a66; background: #f0f0f3; border: 1px solid #d8d8e0; }
body.theme-light .browser-modal .browser-modal-close:hover { color: #1a1a1e; background: #e2e2ea; }

/* ------------------------------------------------------ 受控瀏覽器 viewer */
body.theme-light .browser-viewer {
  background: #ffffff;
  border: 1px solid #d8d8e0;
  box-shadow: 0 2px 10px rgba(20, 20, 40, 0.10);
}
body.theme-light .browser-viewer .bv-head { color: #5a5a66; background: #f5f5f7; border-bottom: 1px solid #e2e2ea; }
body.theme-light .browser-viewer .bv-img { background: #e8e8ee; }
body.theme-light .browser-viewer.operating .bv-head { color: #1d4ed8; }
body.theme-light .browser-viewer .bv-operate { color: #5a5a66; background: #f0f0f3; border: 1px solid #d8d8e0; }
body.theme-light .browser-viewer .bv-operate:hover { color: #1a1a1e; background: #e2e2ea; }
body.theme-light .browser-viewer .bv-operate.on { color: #ffffff; background: #2563eb; border-color: #2563eb; }
body.theme-light .browser-viewer .bv-stop { color: #b91c1c; background: #fee2e2; border: 1px solid #fca5a5; }
body.theme-light .browser-viewer .bv-stop:hover { color: #ffffff; background: #e5484d; border-color: #e5484d; }
body.theme-light .browser-viewer .bv-stop-status { color: #b91c1c; }

/* trigger 那排目前不載入（browser-trigger.js 已移除），保留覆蓋以防日後復活。 */
body.theme-light .browser-trigger { border: 1px solid #d8d8e0; background: #f5f5f7; }
body.theme-light .browser-trigger .bt-url { color: #1a1a1e; background: #ffffff; border: 1px solid #d8d8e0; }
body.theme-light .browser-trigger .bt-url:focus { border-color: #2563eb; }
body.theme-light .browser-trigger .bt-go { color: #ffffff; background: #2563eb; }
body.theme-light .browser-trigger .bt-status { color: #5a5a66; }

/* ------------------------------------------ 截圖／上傳（縮圖、檔案卡、chip） */
body.theme-light .bubble.chat-image .chat-screenshot-thumb { background: #f0f0f3; }
body.theme-light .bubble.chat-file .chat-file-card {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid #d8d8e0;
}
body.theme-light .bubble.chat-file .chat-file-card:hover { background: rgba(0, 0, 0, 0.08); }
/* user 泡泡（紫底）的檔案卡維持原本的半透明深色，否則會糊在紫底上。 */
body.theme-light .bubble.user.chat-file .chat-file-card {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
body.theme-light .bubble.user.chat-file .chat-file-card:hover { background: rgba(0, 0, 0, 0.28); }

body.theme-light .bubble.cs-selected { outline-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16); }
body.theme-light .bubble.cs-head { outline-color: #7c3aed; }

body.theme-light .cs-action-bar {
  background: #ffffff;
  border: 1px solid #d8d8e0;
  box-shadow: 0 6px 24px rgba(20, 20, 40, 0.20);
}
body.theme-light .cs-action-bar .cs-hint { color: #5a5a66; }
body.theme-light .cs-action-bar .cs-gen { background: #4f46e5; color: #ffffff; }
body.theme-light .cs-action-bar .cs-gen:disabled { background: #a5a1e8; color: #ffffff; }
body.theme-light .cs-action-bar .cs-cancel { background: #e8e8ee; color: #1a1a1e; }

body.theme-light .cs-attach-chip { border: 1px solid #d8d8e0; background: #ffffff; }
body.theme-light .cs-attach-chip.cs-attach-file { background: #f0f0f3; }
body.theme-light .cs-attach-chip .cs-attach-fname { color: #1a1a1e; }
/* × 移除鈕維持深色圓底白字 —— 它疊在縮圖上，淺色反而看不見。 */
body.theme-light .cs-attach-chip .cs-attach-remove { background: rgba(0, 0, 0, 0.65); color: #ffffff; }

/* lightbox 背景刻意維持深色（看大圖時的標準做法），只調按鈕。 */
body.theme-light .cs-lightbox-img { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); }

/* ------------------------------------------------------------ Web Push 橫幅 */
body.theme-light .chatroom-push-banner { background: #ffffff; color: #1a1a1e; border: 1px solid #d8d8e0; }
body.theme-light .chatroom-push-banner .dismiss { color: #5a5a66; }
body.theme-light .chatroom-push-banner .dismiss:hover { color: #1a1a1e; }

/* ------------------------------------------------------------ 手機版覆蓋 */
/* 原檔在 @media (max-width:768px) 內重寫了 #thread-head 的 background（sticky
   需要不透明底），必須在同樣的 media query 內再蓋一次，否則手機上標頭會變回深色。 */
@media (max-width: 768px) {
  body.theme-light #thread-head { background: #fafafc; }
  body.theme-light #sidebar { border-right: none; }
}

/* ------------------------------------------------ 2026-08-12 cyn 批次 */
/* ① 君主等級卡（「伍長 LV.1/10」那張）對 cyn 隱藏：拿掉頂欄入口徽章，
   modal 就開不出來。warlord.js 會用 inline style 硬設 display:inline-flex，
   所以需要 !important。只掛 theme-light（名單僅 cyn），其他使用者照常。 */
body.theme-light #warlordBadge { display: none !important; }

/* ② 「AI 運行中／正在回答」合併固定列：浮在輸入框上方的藥丸。
   position:absolute 不佔版面流 → 出現/消失都不推擠訊息（cyn 的位移抱怨）。
   錨點：#thread 是 position:relative（chatroom.css）。置底按鈕在右下
   bottom:80px，藥丸靠左下，不相撞。 */
body.theme-light #queue-status {
  position: absolute;
  left: 12px;
  bottom: 74px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #d8d8e0;
  border-radius: 999px;
  padding: 5px 14px;
  box-shadow: 0 2px 10px rgba(20, 20, 40, 0.10);
  color: #52525b;
  font-size: 13px;
  max-width: min(72%, 560px);
}
/* 上面那條把 display 蓋成 flex，特異度也比原本的 #queue-status.hidden 高，
   必須自己補一條 hidden，否則永遠藏不起來。 */
body.theme-light #queue-status.hidden { display: none; }
body.theme-light #queue-status .cr-running-fixed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: none;
  font-size: 13px;
  padding: 0;
  border: none;
  background: transparent;
}
body.theme-light #queue-status .cr-running-label { color: #1d4ed8; font-weight: 600; }
body.theme-light #queue-status .cr-running-counter { color: #a16207; font-variant-numeric: tabular-nums; }
body.theme-light #queue-status .cr-interrupt-btn {
  background: #b91c1c;
  border: 1px solid #b91c1c;
  color: #ffffff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
}
body.theme-light #queue-status .cr-interrupt-btn:hover:not(:disabled) { background: #dc2626; }
body.theme-light #queue-status .cr-running-note:empty { display: none; }

/* ------------------------------------------- 2026-08-14 cyn：運行藥丸再修三件事
   她的原話（附截圖 13:51）：「這個可以小一點嗎？有時候會擋到下方的訊息，
   另外也不要讓他一直閃進閃出」。三件事分三招，全部掛 body.theme-light，
   沒套這個 class 的人一條都不生效：

   (1) 小一點 —— 字級 13→11px、內距 5/14→2/9px、間距 10→6px，
       標籤文字用偽元素換成「AI 思考中」（原本是「🤖 AI 運行中…」，寬度砍半）。
   (2) 不擋訊息 —— #thread-body 底部預留藥丸的高度，捲到底時最後一則訊息
       停在藥丸上方。**不是**把藥丸放回版面流（建航 08-13 的做法）：
       她 08-12 要的就是浮起來、進出時不推擠訊息，那條不能推翻。
   (3) 不閃 —— 收起來改成淡出（opacity + 延後的 visibility），不是整顆抽掉；
       真正治本的是 chatroom.js 那條 5 秒緩衝（短暫閒置不算結束），
       這裡只負責讓進出不要「啪」的一聲。

   ⚠️ 標籤文字用 CSS 偽元素換掉，**不動 chatroom.js 的字串**。
   syncQueueStrip() 用 /AI 運行中/ 這個比對決定「正在回答你的問題…」在場時
   要不要把重複的標籤藏起來；改 JS 字串會讓那條去重失效，
   js/__tests__/cyn-ui-quad-20260812.test.js 也鎖著它。 */
body.theme-light #queue-status {
  gap: 6px;
  padding: 2px 9px;
  font-size: 11px;
  max-width: min(60%, 420px);
  visibility: visible;
  opacity: 1;
  transition: opacity .18s ease, visibility 0s;
}
/* margin:0 是縮高度的關鍵：這顆集群同時掛著 .cr-running-indicator，
   base 的 `margin: 8px auto`（訊息流氣泡用的）跟著進來，上下各多 8px，
   藥丸實測 40px 高、其中 16px 是空的。歸零後只剩 24px。 */
body.theme-light #queue-status .cr-running-fixed { gap: 6px; font-size: 11px; margin: 0; }
/* font-size:0 蓋掉 JS 寫死的「🤖 AI 運行中…」，字串本身不動（見上方 ⚠️）。 */
body.theme-light #queue-status .cr-running-label { font-size: 0; }
body.theme-light #queue-status .cr-running-label::before {
  content: 'AI 思考中';
  font-size: 11px;
  font-weight: 600;
  color: #1d4ed8;
}
/* min-width 是防抖：秒數 9s→10s 多一位數時藥丸不要跟著變寬。 */
body.theme-light #queue-status .cr-running-counter { font-size: 11px; min-width: 3.2em; }
body.theme-light #queue-status .cr-interrupt-btn { padding: 1px 7px; font-size: 10.5px; }
/* 收起來＝淡出留原地，不是 display:none 整顆抽掉。
   ⚠️ 一定要 !important：chatroom.css 第 23 行有全域的
   `.hidden { display: none !important }`，不加就被它壓過去。
   絕對定位本來就不佔版面，留著不會推擠任何東西；
   pointer-events:none ＋ 延後的 visibility 保證淡出後點不到、讀屏也不會念。 */
body.theme-light #queue-status.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
/* 訊息流底部預留藥丸的高度（16px 原內距 + 28px 讓位）。
   捲到底時最後一則訊息的下緣會停在藥丸上方 → 不再被蓋住。
   數字是量出來的，不是估的（verify_run_pill.py）：
   藥丸下緣離 #thread 底部 74px、藥丸高 24px、輸入列高 61px
   → 需要 74 + 24 − 61 = 37px 的讓位，取 44 留 7px 餘裕。
   常數留白，不隨藥丸進出改變 → 不會造成任何位移。 */
body.theme-light #thread-body { padding-bottom: 44px; }