// 知識庫系統 V5 — front-end glue
// 規則：不改 HTML 排版/按鍵/結構；只 querySelector 取現有 DOM 並掛行為。
(function () {
  "use strict";
  const NS = (window.KBV5 = window.KBV5 || {});
  NS.version = "0.2.0-L2";
  // 純函式庫（static/lib/pure.js，<script> 先載）。測得到的就是這裡用的同一份。
  const Pure = window.KBV5Pure;

  // -------------------- token store --------------------
  const TK_ACCESS = "kbv5.access";
  const TK_REFRESH = "kbv5.refresh";
  const TK_USER = "kbv5.user";
  const TK_DEVICE = "kbv5.device_token";  // 可跳過 2FA 的信任裝置 token

  const Auth = {
    get access() { return localStorage.getItem(TK_ACCESS); },
    get refresh() { return localStorage.getItem(TK_REFRESH); },
    get device() { return localStorage.getItem(TK_DEVICE); },
    get user() {
      try { return JSON.parse(localStorage.getItem(TK_USER) || "null"); }
      catch (e) { return null; }
    },
    save({ access_token, refresh_token, user, device_token }) {
      if (access_token) localStorage.setItem(TK_ACCESS, access_token);
      if (refresh_token) localStorage.setItem(TK_REFRESH, refresh_token);
      if (user) localStorage.setItem(TK_USER, JSON.stringify(user));
      if (device_token) localStorage.setItem(TK_DEVICE, device_token);
    },
    clearDevice() { localStorage.removeItem(TK_DEVICE); },
    // 一般登出：保留 device_token（記住裝置不該因登出消失）
    clear() {
      localStorage.removeItem(TK_ACCESS);
      localStorage.removeItem(TK_REFRESH);
      localStorage.removeItem(TK_USER);
    },
    // 完整清除（改密、forget device、安全事件用）
    clearAll() {
      localStorage.removeItem(TK_ACCESS);
      localStorage.removeItem(TK_REFRESH);
      localStorage.removeItem(TK_USER);
      localStorage.removeItem(TK_DEVICE);
    },
  };
  NS.Auth = Auth;

  // -------------------- fetch wrapper --------------------
  async function api(path, opts = {}) {
    const headers = new Headers(opts.headers || {});
    if (Auth.access) headers.set("Authorization", "Bearer " + Auth.access);
    if (opts.body && !headers.has("Content-Type") && !(opts.body instanceof FormData)) {
      headers.set("Content-Type", "application/json");
    }
    const init = { ...opts, headers };
    let resp = await fetch(path, init);
    // §44 維護模式：503 + error="Service under maintenance" → 顯示維護全頁
    if (resp.status === 503) {
      try {
        const clone = resp.clone();
        const j = await clone.json();
        if (j && j.error === "Service under maintenance") {
          _showMaintenancePage(j.estimated_recovery);
        }
      } catch (_e) {}
    }
    if (resp.status === 401 && Auth.refresh && !opts._retry) {
      const ok = await tryRefresh();
      if (ok) {
        headers.set("Authorization", "Bearer " + Auth.access);
        resp = await fetch(path, { ...init, headers, _retry: true });
      }
    }
    // 仍是 401 且不是 login 端點 → 視為 session 已死，自動跳登入頁
    if (resp.status === 401 && !/\/auth\/(login|verify-2fa|refresh)$/.test(path)) {
      Auth.clear();
      // 給上層先讀完 body 再跳；showLoginPage 延後一點
      setTimeout(() => {
        showLoginPage();
        const inputs = document.querySelectorAll("#login-form input");
        if (inputs[0]) inputs[0].focus();
      }, 800);
    }
    return resp;
  }
  NS.api = api;

  // §44 維護模式全頁
  function _showMaintenancePage(recovery) {
    if (document.getElementById("kbv5-maintenance")) return;
    const ov = document.createElement("div");
    ov.id = "kbv5-maintenance";
    ov.style.cssText = "position:fixed;inset:0;z-index:2147483647;background:var(--bg,#f6f8fb);display:flex;align-items:center;justify-content:center;";
    const recoveryLine = recovery
      ? `<div style="font-size:13px;color:#64748b;margin:12px 0;">預估恢復時間：${escapeHtml((recovery || "").replace("T", " ").replace("Z", " UTC"))}</div>`
      : "";
    ov.innerHTML =
      `<div style="text-align:center;max-width:420px;padding:40px;">` +
        `<div style="font-size:48px;margin-bottom:16px;">🔧</div>` +
        `<div style="font-size:22px;font-weight:700;color:#0b1f33;margin-bottom:8px;">系統維護中</div>` +
        `<div style="font-size:14px;color:#475569;line-height:1.7;">我們正在進行系統升級，造成不便敬請見諒。</div>` +
        recoveryLine +
        `<div style="font-size:12px;color:#94a3b8;margin:8px 0 20px;">如需緊急協助請聯繫 IT 部門</div>` +
        `<button class="btn btn--primary" onclick="window.location.reload()">重新整理檢查</button>` +
      `</div>`;
    document.body.appendChild(ov);
  }

  async function tryRefresh() {
    try {
      const r = await fetch("/api/auth/refresh", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ refresh_token: Auth.refresh }),
      });
      if (!r.ok) { Auth.clear(); return false; }
      const j = await r.json();
      localStorage.setItem(TK_ACCESS, j.access_token);
      return true;
    } catch (e) {
      return false;
    }
  }

  // -------------------- 安全 input dialog（取代 window.prompt 的明碼問題）--------------------
  // 用法：const v = await securePrompt({ title, fields:[{name,label,type,hint,placeholder,maxlength}] })
  //   → 取消回 null；確定回 {name: value}
  function securePrompt(opts) {
    return new Promise((resolve) => {
      const overlay = document.createElement("div");
      overlay.id = "kbv5-secure-dialog";
      overlay.style.cssText =
        "position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100000;" +
        "display:flex;align-items:center;justify-content:center;padding:20px;";
      const card = document.createElement("div");
      card.style.cssText =
        "background:#fff;border-radius:12px;padding:22px 24px;max-width:420px;" +
        "width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);font-family:inherit;";
      const titleEl = document.createElement("div");
      titleEl.textContent = opts.title || "輸入";
      titleEl.style.cssText =
        "font-size:15px;font-weight:600;color:#0b1f33;margin-bottom:6px;";
      card.appendChild(titleEl);
      if (opts.desc) {
        const d = document.createElement("div");
        d.textContent = opts.desc;
        d.style.cssText = "font-size:12px;color:#64748b;margin-bottom:14px;";
        card.appendChild(d);
      }
      const inputs = [];
      (opts.fields || []).forEach((f) => {
        const label = document.createElement("label");
        label.textContent = f.label;
        label.style.cssText =
          "display:block;font-size:12px;color:#475569;margin:10px 0 4px;font-weight:500;";
        card.appendChild(label);
        const baseCss =
          "width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;" +
          "font-size:14px;font-family:inherit;box-sizing:border-box;outline:none;" +
          "transition:border-color .12s;background:#fff;";
        let input;
        if (f.type === "select") {
          input = document.createElement("select");
          input.style.cssText = baseCss;
          (f.options || []).forEach((opt) => {
            const o = document.createElement("option");
            // opt 可為字串或 {value,label}
            if (typeof opt === "string") { o.value = opt; o.textContent = opt; }
            else { o.value = opt.value; o.textContent = opt.label; }
            input.appendChild(o);
          });
          if (f.value != null) input.value = f.value;
        } else {
          input = document.createElement("input");
          input.type = f.type || "text";
          input.autocomplete = f.type === "password" ? "new-password" : "off";
          if (f.maxlength) input.maxLength = f.maxlength;
          if (f.placeholder) input.placeholder = f.placeholder;
          if (f.inputmode) input.inputMode = f.inputmode;
          if (f.pattern) input.pattern = f.pattern;
          input.style.cssText = baseCss;
        }
        input.addEventListener("focus", () => { input.style.borderColor = "#009BCB"; });
        input.addEventListener("blur", () => { input.style.borderColor = "#cbd5e1"; });
        card.appendChild(input);
        if (f.hint) {
          const h = document.createElement("div");
          h.textContent = f.hint;
          h.style.cssText = "font-size:11px;color:#94a3b8;margin-top:4px;";
          card.appendChild(h);
        }
        inputs.push({ field: f, el: input });
      });
      // 內嵌錯誤訊息列（onSubmit 失敗時顯示，不關閉 dialog）
      const errEl = document.createElement("div");
      errEl.style.cssText =
        "display:none;margin-top:12px;font-size:12px;color:#b91c1c;" +
        "background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:8px 10px;";
      card.appendChild(errEl);

      const row = document.createElement("div");
      row.style.cssText =
        "display:flex;justify-content:flex-end;gap:8px;margin-top:18px;";
      const cancel = document.createElement("button");
      cancel.type = "button";
      cancel.textContent = opts.cancelText || "取消";
      cancel.style.cssText =
        "padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;" +
        "border-radius:6px;cursor:pointer;font-size:13px;font-family:inherit;";
      const submit = document.createElement("button");
      submit.type = "button";
      submit.textContent = opts.submitText || "確定";
      submit.style.cssText =
        "padding:8px 16px;border:none;background:#009BCB;color:#fff;" +
        "border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;";
      row.appendChild(cancel);
      row.appendChild(submit);
      card.appendChild(row);
      overlay.appendChild(card);
      document.body.appendChild(overlay);
      if (inputs[0]) inputs[0].el.focus();

      function close(result) {
        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
        document.removeEventListener("keydown", onKey);
        resolve(result);
      }
      async function doSubmit() {
        const out = {};
        for (const { field, el } of inputs) {
          if ((field.required !== false) && !el.value) {
            el.focus();
            el.style.borderColor = "#dc2626";
            return;
          }
          out[field.name] = el.value;
        }
        // onSubmit(values)：回傳錯誤字串 → 保留 dialog 開啟並顯示；falsy → 關閉
        if (typeof opts.onSubmit === "function") {
          submit.disabled = true;
          const origTxt = submit.textContent;
          submit.textContent = opts.submittingText || "處理中…";
          errEl.style.display = "none";
          try {
            const err = await opts.onSubmit(out);
            if (err) {
              errEl.textContent = String(err);
              errEl.style.display = "";
              return;  // 不關閉，欄位保留
            }
            close(out);
          } catch (e) {
            errEl.textContent = "操作失敗，請稍後再試";
            errEl.style.display = "";
          } finally {
            submit.disabled = false;
            submit.textContent = origTxt;
          }
          return;
        }
        close(out);
      }
      function onKey(e) { if (e.key === "Escape") close(null); }

      cancel.addEventListener("click", () => close(null));
      submit.addEventListener("click", doSubmit);
      overlay.addEventListener("click", (e) => { if (e.target === overlay) close(null); });
      document.addEventListener("keydown", onKey);

      inputs.forEach(({ el }, i) => {
        el.addEventListener("keydown", (e) => {
          if (e.key === "Enter") {
            e.preventDefault();
            if (i < inputs.length - 1) inputs[i + 1].el.focus();
            else doSubmit();
          }
        });
      });
    });
  }
  NS.securePrompt = securePrompt;

  // 高風險動作的密碼 step-up：失敗（密碼錯/權限）時 dialog 不關閉，使用者可直接重試。
  // action(password) 回傳錯誤字串 → 保留開啟；回傳 falsy → 視為成功並關閉。
  function stepUpPrompt(opts, action) {
    return securePrompt({
      title: opts.title,
      desc: opts.desc,
      submitText: opts.submitText || "確認",
      submittingText: opts.submittingText || "處理中…",
      fields: [{ name: "password", label: opts.label || "您的登入密碼", type: "password" }],
      onSubmit: async (v) => action(v.password),
    });
  }
  NS.stepUpPrompt = stepUpPrompt;

  // -------------------- toast helper --------------------
  function toast(msg, tone = "info") {
    let el = document.getElementById("kbv5-toast");
    if (!el) {
      el = document.createElement("div");
      el.id = "kbv5-toast";
      el.style.cssText = [
        "position:fixed", "top:50%", "left:50%",
        "transform:translate(-50%,-50%)", "z-index:2147483647",
        "padding:14px 22px", "border-radius:10px",
        "background:rgba(0,0,0,.92)", "color:#fff", "font-size:14px",
        "font-weight:600", "text-align:center",
        "box-shadow:0 8px 32px rgba(0,0,0,.45)", "transition:opacity .2s",
        "opacity:0", "pointer-events:none", "max-width:420px",
      ].join(";");
      document.body.appendChild(el);
    }
    if (tone === "error") el.style.background = "rgba(190,32,40,.92)";
    else if (tone === "ok") el.style.background = "rgba(20,128,80,.92)";
    else el.style.background = "rgba(0,0,0,.78)";
    el.textContent = msg;
    el.style.opacity = "1";
    clearTimeout(toast._t);
    toast._t = setTimeout(() => { el.style.opacity = "0"; }, 2800);
  }
  NS.toast = toast;

  // -------------------- 錯誤碼對照 --------------------
  const ERR_MAP = {
    invalid_credentials: "帳號或密碼錯誤",
    account_locked: "帳號連續錯誤已被鎖定 15 分鐘",
    "2fa_grace_expired": "2FA 寬限期已過，請聯絡管理員",
    "2fa_mandatory_for_role": "此角色不允許關閉 2FA",
    rate_limited: "操作過於頻繁，請稍後再試",
    invalid_temp_token: "2FA 驗證逾時，請重新登入",
    invalid_2fa_code: "2FA 驗證碼錯誤",
    step_up_failed: "密碼確認失敗（舊密碼錯誤）",
    weak_password: "新密碼不符強度要求",
    user_inactive: "帳號未啟用或已被停用",
    // session / token 類錯誤
    unauthenticated: "登入已逾時，請重新登入",
    token_expired: "登入已逾時，請重新登入",
    invalid_token: "登入狀態異常，請重新登入",
    invalid_token_type: "登入狀態異常，請重新登入",
    token_revoked: "登入已失效，請重新登入",
    session_revoked: "登入已失效，請重新登入",
    session_not_found: "登入已失效，請重新登入",
    invalid_refresh: "登入已逾時，請重新登入",
    forbidden: "權限不足",
    no_pending_secret: "尚未啟動 2FA 設置，請先點開關",
    step_up_required: "此動作需密碼確認",
    visibility_forbidden_for_role: "您的角色只能提交為「部門內部」",
    confirm_confidential_required: "請先勾選「高度機密」確認",
    content_not_chinese: "內容須以繁體中文為主（中文比例不足）",
    provider_switching: "AI 供應商切換中，請稍後再試",
    guest_disabled: "訪客功能目前未開放，請改用一般帳號登入",
    password_pwned: "此密碼曾出現在已知洩漏資料庫，請使用另一組",
    PDPA_NOT_AGREED: "請先閱讀並勾選個人資料使用條款",
    // 申請帳號 / 註冊類
    invalid_username_format: "帳號格式不正確（限英數小寫、半形點、底線、減號，2-64 字）",
    department_not_found: "選擇的部門不存在或已停用",
    integrity_error: "資料衝突（請重試或聯絡管理員）",
    pii_detected: "內容含個資，無法送出",
    // 使用者建立 / 編輯類
    username_taken: "此帳號已被使用",
    email_taken: "此 Email 已被使用",
    email_invalid_format: "Email 格式不正確",
    email_domain_not_allowed: "Email 網域不在允許清單中",
    invalid_role: "角色名稱無效",
    admin_no_self_demote: "不可降級自己（admin 不可自降）",
    last_admin: "至少需保留 1 位 admin",
    name_taken: "名稱已被使用",
    department_in_use: "部門尚有啟用中的使用者",
    department_referenced: "部門仍被使用者或文件引用",
    must_deactivate_first: "請先停用部門再刪除",
    cannot_lock_self: "不可鎖定自己",
    cannot_target_self: "不可對自己執行此動作",
    not_found: "找不到資源",
  };
  function pickErrCode(data) {
    if (data && data.detail && data.detail.error) return data.detail.error;
    if (data && data.error) return data.error;
    // FastAPI 422 validation errors: detail is array of {loc, msg, type}
    if (data && Array.isArray(data.detail) && data.detail[0]) {
      return "validation:" + (data.detail[0].loc || []).join(".");
    }
    return "unknown";
  }
  function errMsg(data, fallback) {
    const code = pickErrCode(data);
    const reason = data && data.detail && data.detail.reason;
    const describe = data && data.detail && data.detail.describe;
    if (ERR_MAP[code]) return ERR_MAP[code];
    // 422 validation
    if (code.startsWith("validation:") && Array.isArray(data.detail)) {
      const first = data.detail[0];
      const fieldPath = (first.loc || []).filter(x => x !== "body").join(".");
      return `${fallback}：${fieldPath} ${first.msg || ""}`.trim();
    }
    // 後端有給人話 describe / reason → 直接用，不顯示內部錯誤碼
    return describe || reason || (fallback + "：" + code);
  }

  // 原 HTML 用 .login-page.is-active 切換顯隱（display:none ↔ flex），不是 inline display
  // 註：autofill / 密碼管理員交給瀏覽器原生處理（使用者要求 2026-05-19）
  function clearLoginInputs() {
    const inputs = document.querySelectorAll("#login-form input");
    if (inputs[0]) inputs[0].value = "";
    if (inputs[1]) inputs[1].value = "";
  }
  function endBoot() {
    document.documentElement.classList.remove("kbv5-booting");
  }
  // 登入/還原 session 後：先載入目前 active 頁的真實資料，再解除 boot 遮罩，
  // 避免在資料回來前 reveal 出寫死 mock（F5 閃現的根因）。
  async function loadLandingAndReveal() {
    try {
      const active = document.querySelector("main.page.is-active");
      const pg = active && active.dataset.page;
      if (pg === "dashboard") await loadDashboard();
      else if (pg === "library") await loadLibrary();
      else if (pg === "review" && typeof loadReviewBoard === "function") await loadReviewBoard();
      else if (pg === "my-tasks" && typeof loadMyTasks === "function") await loadMyTasks();
      else if (pg === "admin") { if (typeof loadAdminUsers === "function") await loadAdminUsers(); }
    } catch (e) { /* 即使載入失敗也要 reveal，避免白屏 */ }
    endBoot();
  }
  function showLoginPage() {
    const lp = document.getElementById("login-page");
    if (!lp) return;
    endBoot();
    stopNotifStream();  // 登出/未認證 → 斷開通知串流
    lp.classList.add("is-active");
    // 同步給 <html> 加 kbv5-unauth → CSS 蓋住所有 .page / topbar / modal
    document.documentElement.classList.add("kbv5-unauth");
    // 隱藏原 HTML 的「← 返回原型」按鈕（那是 mockup 測試用，正式系統不需要）
    const backBtn = lp.querySelector(".login-back");
    if (backBtn) backBtn.style.display = "none";
    clearLoginInputs();
    const u = document.querySelector("#login-form input");
    if (u) u.focus();
  }
  const ROLE_LABEL_ZH = { admin: "管理者", senior_manager: "高階主管", manager: "主管", user: "一般使用者" };
  const ROLE_BADGE_CLS = { admin: "role-admin", senior_manager: "role-senior", manager: "role-manager", user: "role-user" };
  function _updateUserChip() {
    const u = Auth.user || {};
    const name = u.display_name || u.username || "";
    const chip = document.querySelector(".user-chip");
    if (!chip) return;
    const av = chip.querySelector(".avatar");
    if (av) av.textContent = (name || "?").slice(0, 1).toUpperCase();
    const nameSpan = chip.querySelector("span");
    if (nameSpan) nameSpan.textContent = name;
    const badge = chip.querySelector(".role-badge");
    if (badge) {
      badge.textContent = ROLE_LABEL_ZH[u.role] || u.role || "";
      badge.className = "role-badge " + (ROLE_BADGE_CLS[u.role] || "");
      badge.style.cssText = "font-size:10px;padding:2px 6px;";
    }
  }

  // Phase5-H §51 Feature Flags：登入後拉 /api/feature-flags，快取在 NS.flags
  // 用於前端 UI 顯隱（trash 頁、senior_manager 角色下拉），後端仍會 403 守門
  NS.flags = { FEATURE_2FA: true, FEATURE_SENIOR_MANAGER: true,
               FEATURE_TRASH_UI: true, FEATURE_ACCOUNT_FILTER: true,
               FEATURE_FTS5: false };
  async function loadFeatureFlags() {
    try {
      const r = await api("/api/feature-flags");
      if (r.ok) NS.flags = await r.json();
    } catch (e) { /* 預設仍可用 */ }
  }

  function hideLoginPage() {
    // 通過驗證 → 移除 unauth class，讓 dashboard 等內容可顯示
    document.documentElement.classList.remove("kbv5-unauth");
    // Phase5-H：先拉旗標再 applyRoleVisibility，trash 等才能正確隱藏
    loadFeatureFlags().finally(() => applyRoleVisibility());
    _updateUserChip();      // topbar 使用者資訊改真實使用者
    startNotifStream();     // 啟動通知 SSE + 鈴鐺未讀
    // §32.4 What's New 彈窗（登入後檢查；若已看過當前版本就不彈）
    setTimeout(() => maybeShowWhatsNew(), 800);
    // §32.3 Onboarding：首次登入引導（onboarding_completed=false 才跑；
    // 等 What's New 彈完 + 1.5s 緩衝避免兩個 modal 撞在一起）
    setTimeout(() => maybeShowOnboarding(), 3000);
    // 載入目前 active 頁真實資料後才解除 boot 遮罩（避免 mock 閃現）
    loadLandingAndReveal();
    // 若有待開啟的分享連結（登入後回到原文件）
    if (_pendingShareToken) {
      const t = _pendingShareToken;
      setTimeout(() => resolveAndOpenShare(t), 200);
    }
    if (typeof window.closeLogin === "function") return window.closeLogin();
    const lp = document.getElementById("login-page");
    if (lp) lp.classList.remove("is-active");
  }

  // §32.3 Onboarding：5 步首次使用引導
  const _ONBOARD_STEPS = [
    {
      title: "歡迎使用知識庫 V5", body: "這是你的儀表板，看待辦、最近文件與系統健康（如果你是 admin）。",
      selector: '.topbar [data-page="dashboard"], header [data-page="dashboard"]',
    },
    {
      title: "提交新文件", body: "點這裡開啟提交頁，貼上內容後 AI 會自動整理格式並送審。",
      selector: '.topbar [data-page="submit"], header [data-page="submit"], [data-page="submit"]',
    },
    {
      title: "瀏覽知識庫", body: "已核准的文件全部在這裡，可用搜尋、標籤、可見度等過濾。",
      selector: '.topbar [data-page="library"], header [data-page="library"]',
    },
    {
      title: "通知中心", body: "鈴鐺會即時通知你的審核、評論 @mention、訂閱主題的新文件等。",
      selector: '#btn-bell, .topbar .notif, header .notif',
    },
    {
      title: "帳號設定", body: "點頭像可改密碼、2FA、管理裝置、訂閱主題、調整通知與顯示偏好。",
      selector: '.user-chip, .topbar__user',
    },
  ];

  function _onboardCleanup() {
    document.querySelectorAll("[data-kbv5-onboard-layer], [data-kbv5-onboard-spot]").forEach((n) => n.remove());
  }

  function _onboardShowStep(idx, onDone) {
    _onboardCleanup();
    if (idx >= _ONBOARD_STEPS.length) { onDone(); return; }
    const step = _ONBOARD_STEPS[idx];
    const targets = step.selector.split(",").map((s) => s.trim()).filter(Boolean);
    let el = null;
    for (const sel of targets) {
      try { el = document.querySelector(sel); if (el && el.offsetParent !== null) break; } catch (_e) {}
    }
    if (!el) {
      // 目標不存在 → 跳過此步
      _onboardShowStep(idx + 1, onDone);
      return;
    }
    el.scrollIntoView({ block: "center", behavior: "smooth" });
    const rect = el.getBoundingClientRect();

    // 黑色遮罩（4 個矩形包圍 target，留出中間 spotlight）
    const layer = document.createElement("div");
    layer.dataset.kbv5OnboardLayer = "1";
    layer.style.cssText = "position:fixed;inset:0;z-index:9998;pointer-events:none;";
    // 用 box-shadow 製造 spotlight
    const spot = document.createElement("div");
    spot.dataset.kbv5OnboardSpot = "1";
    const pad = 8;
    spot.style.cssText =
      `position:fixed;z-index:9998;` +
      `top:${rect.top - pad}px;left:${rect.left - pad}px;` +
      `width:${rect.width + pad * 2}px;height:${rect.height + pad * 2}px;` +
      `border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,0.55);` +
      `transition:all .3s;pointer-events:none;`;
    document.body.appendChild(spot);

    // 提示卡（放在 target 下方或上方）
    const tip = document.createElement("div");
    tip.dataset.kbv5OnboardLayer = "1";
    const tipTop = rect.bottom + 12;
    const tipFromBottom = tipTop > window.innerHeight - 200;
    tip.style.cssText =
      `position:fixed;z-index:9999;background:var(--surface);border-radius:12px;` +
      `padding:18px 20px;max-width:380px;box-shadow:0 12px 40px rgba(0,0,0,0.25);` +
      (tipFromBottom
        ? `bottom:${window.innerHeight - rect.top + 12}px;`
        : `top:${tipTop}px;`) +
      `left:${Math.max(16, Math.min(rect.left, window.innerWidth - 400))}px;`;
    const total = _ONBOARD_STEPS.length;
    tip.innerHTML =
      `<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">` +
        `<span style="background:var(--accent);color:white;font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;">${idx + 1} / ${total}</span>` +
        `<div style="font-size:15px;font-weight:700;color:var(--text-1);">${escapeHtml(step.title)}</div>` +
      `</div>` +
      `<div style="font-size:13px;color:var(--text-2);line-height:1.6;margin-bottom:14px;">${escapeHtml(step.body)}</div>` +
      `<div style="display:flex;align-items:center;gap:8px;justify-content:flex-end;">` +
        `<button class="btn btn--quiet btn--sm" data-onb-skip>跳過</button>` +
        (idx > 0 ? `<button class="btn btn--ghost btn--sm" data-onb-prev>上一步</button>` : "") +
        `<button class="btn btn--primary btn--sm" data-onb-next>${idx === total - 1 ? "完成" : "下一步"}</button>` +
      `</div>`;
    document.body.appendChild(tip);
    tip.querySelector("[data-onb-skip]").addEventListener("click", () => { _onboardCleanup(); onDone(); });
    if (idx > 0) tip.querySelector("[data-onb-prev]").addEventListener("click", () => _onboardShowStep(idx - 1, onDone));
    tip.querySelector("[data-onb-next]").addEventListener("click", () => _onboardShowStep(idx + 1, onDone));
  }

  function _runOnboarding(onComplete) {
    _onboardShowStep(0, async () => {
      _onboardCleanup();
      if (typeof onComplete === "function") onComplete();
      await api("/api/account/preferences", {
        method: "PATCH",
        body: JSON.stringify({ onboarding_completed: true }),
      }).catch(() => {});
    });
  }

  // 暴露 NS 讓 /account 頁的「重新跑引導」按鈕呼叫
  NS.startOnboarding = _runOnboarding;

  async function maybeShowOnboarding() {
    try {
      const r = await api("/api/account/preferences");
      if (!r.ok) return;
      const p = await r.json();
      if (p.onboarding_completed) return;
      _runOnboarding();
    } catch (_e) {}
  }

  // §32.4 What's New 彈窗：登入後檢查 prefs.seen_whatsnew_version vs 後端 version
  async function maybeShowWhatsNew() {
    try {
      const [wnR, prefR] = await Promise.all([
        api("/api/whats-new"),
        api("/api/account/preferences"),
      ]);
      if (!wnR.ok || !prefR.ok) return;
      const wn = await wnR.json();
      const pref = await prefR.json();
      if (!wn.version || pref.seen_whatsnew_version === wn.version) return;
      // 注入 modal
      const ov = document.createElement("div");
      ov.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;";
      const card = document.createElement("div");
      card.style.cssText = "background:var(--surface);border-radius:12px;padding:24px 28px;max-width:520px;width:90%;max-height:80vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3);";
      const itemsHtml = (wn.items || []).map((it) =>
        `<li style="padding:6px 0;font-size:13px;line-height:1.6;">${escapeHtml(it)}</li>`
      ).join("");
      card.innerHTML =
        `<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">` +
          `<div><div style="font-size:11px;color:var(--text-3);">版本 ${escapeHtml(wn.version)}${wn.date ? " · " + escapeHtml(wn.date) : ""}</div>` +
          `<div style="font-size:20px;font-weight:700;margin-top:2px;">🎉 ${escapeHtml(wn.title || "更新摘要")}</div></div>` +
        `</div>` +
        `<ul style="list-style:none;padding:0;margin:14px 0;">${itemsHtml}</ul>` +
        `<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:14px;">` +
          `<button class="btn btn--primary" data-wn-ok>知道了</button>` +
        `</div>`;
      ov.appendChild(card);
      document.body.appendChild(ov);
      card.querySelector("[data-wn-ok]").addEventListener("click", async () => {
        ov.remove();
        await api("/api/account/preferences", {
          method: "PATCH",
          body: JSON.stringify({ seen_whatsnew_version: wn.version }),
        }).catch(() => {});
      });
    } catch (e) { /* 失敗就不彈，下次再試 */ }
  }

  // ============================================================
  // 角色權限：依當前使用者角色顯示/隱藏導航與頁面入口（PRD §2.2）
  // ============================================================
  // 各 data-page 對應可見角色（user 只看 dashboard/library/submit）
  const PAGE_ROLE_ALLOW = {
    dashboard: ["admin", "senior_manager", "manager", "user"],
    library:   ["admin", "senior_manager", "manager", "user"],
    submit:    ["admin", "senior_manager", "manager", "user"],
    "view":    ["admin", "senior_manager", "manager", "user"],
    account:   ["admin", "senior_manager", "manager", "user"],
    search:    ["admin", "senior_manager", "manager", "user"],
    "my-tasks": ["admin", "senior_manager", "manager", "user"],
    review:    ["admin", "senior_manager", "manager"],
    trash:     ["admin", "senior_manager", "manager"],   // manager 限本部門+唯讀
    edit:      ["admin", "senior_manager", "manager"],   // §12.12 編輯（manager 限本部門，後端守）
    versions:  ["admin", "senior_manager", "manager", "user"],   // §12.13 看歷史（還原權限後端守）
    admin:     ["admin", "senior_manager", "manager"],
    "user-detail": ["admin", "senior_manager", "manager"],
    "user-import": ["admin", "senior_manager", "manager"],
    tags:        ["admin", "senior_manager", "manager", "user"],   // §12.21
    attachments: ["admin", "senior_manager", "manager", "user"],   // §12.19 媒體庫
    profile:     ["admin", "senior_manager", "manager", "user"],   // §12.x 個人主頁
    "advanced-search": ["admin", "senior_manager", "manager", "user"],   // §12.17
  };

  function isPageAllowed(target, role) {
    role = role || (Auth.user && Auth.user.role) || null;
    const allowed = PAGE_ROLE_ALLOW[target];
    if (!allowed) return true;     // 未列管的頁面預設放行
    // Phase5-H §51：FEATURE_TRASH_UI=false → trash 頁完全不放行
    if (target === "trash" && NS.flags && NS.flags.FEATURE_TRASH_UI === false) return false;
    return !!(role && allowed.includes(role));
  }

  // Phase5-H §51：在角色下拉註入前過濾掉 senior_manager（若 flag off）
  // 給後續 admin 頁建立帳號 modal / 編輯角色 modal 共用
  NS.filterAvailableRoles = function (roles) {
    if (!NS.flags || NS.flags.FEATURE_SENIOR_MANAGER !== false) return roles;
    return (roles || []).filter((r) => r !== "senior_manager");
  };

  function applyRoleVisibility() {
    const role = (Auth.user && Auth.user.role) || null;
    // topbar nav 按鈕顯隱
    document.querySelectorAll('#nav [data-page], .topbar__nav [data-page]').forEach((btn) => {
      const p = btn.dataset.page;
      if (PAGE_ROLE_ALLOW[p]) {
        btn.style.display = isPageAllowed(p, role) ? "" : "none";
      }
    });
    // 若當前停在無權限頁面 → 踢回 dashboard
    const activePage = document.querySelector("main.page.is-active");
    if (activePage) {
      const p = activePage.dataset.page;
      if (PAGE_ROLE_ALLOW[p] && !isPageAllowed(p, role)) {
        if (typeof window.switchPage === "function") window.switchPage("dashboard");
      }
    }
    applyAdminTabVisibility(role);
    updateUserChip();
  }

  // 攔截 switchPage：即使用 console / 程式呼叫，無權限頁也進不去（前端守門）
  // 真正安全靠後端 require_role（API 一律 403）；這層是防止畫面被叫出來。
  function installSwitchPageGuard() {
    if (window._kbv5SwitchGuard) return;
    const orig = window.switchPage;
    if (typeof orig !== "function") return;
    window._kbv5SwitchGuard = true;
    window.switchPage = function (target) {
      // 未登入 → 一律回登入頁（login 本身放行）
      if (!Auth.access && target !== "login") {
        showLoginPage();
        return;
      }
      if (target !== "login" && !isPageAllowed(target)) {
        toast("您沒有權限存取此頁面", "error");
        return orig.call(this, "dashboard");
      }
      return orig.call(this, target);
    };
  }

  // 更新右上角 user-chip（avatar / 姓名 / 角色 badge）為當前登入者
  function updateUserChip() {
    const u = Auth.user;
    if (!u) return;
    const chip = document.querySelector(".user-chip");
    if (!chip) return;
    const name = u.display_name || u.username || "";
    const av = chip.querySelector(".avatar");
    if (av) av.textContent = (name || "?").slice(0, 1).toUpperCase();
    const nameSpan = chip.querySelector("span");  // 第一個 span = 姓名
    if (nameSpan) nameSpan.textContent = name;
    const badge = chip.querySelector(".role-badge");
    if (badge) {
      const ROLE_LABEL = { admin: "管理者", senior_manager: "高階主管", manager: "主管", user: "一般使用者" };
      const ROLE_CLASS = { admin: "role-admin", senior_manager: "role-senior", manager: "role-manager", user: "role-user" };
      badge.textContent = ROLE_LABEL[u.role] || u.role;
      badge.className = "role-badge " + (ROLE_CLASS[u.role] || "");
      badge.style.fontSize = "10px";
      badge.style.padding = "2px 6px";
    }
  }

  function applyAdminTabVisibility(role) {
    const adminPage = document.querySelector('main.page[data-page="admin"]');
    if (!adminPage) return;
    const tabAllow = {
      users: ["admin", "senior_manager", "manager"],
      permissions: ["admin", "senior_manager"],
      rules: [],   // 偵測規則已併入「多層 PII 防護」側邊選單 → 永遠隱藏頂層分頁
      "ai-provider": ["admin", "senior_manager"],
      "ai-binding": ["admin", "senior_manager"],
      audit: ["admin", "senior_manager"],
    };
    adminPage.querySelectorAll(".admin-tab[data-tab-target]").forEach((tab) => {
      const t = tab.dataset.tabTarget;
      if (tabAllow[t]) {
        tab.style.display = (role && tabAllow[t].includes(role)) ? "" : "none";
      }
    });
  }

  // -------------------- LOGIN page wiring --------------------
  function wireLogin() {
    const loginPage = document.getElementById("login-page");
    if (!loginPage) return;
    const loginForm = document.getElementById("login-form");
    const registerForm = document.getElementById("register-form");
    if (!loginForm) return;

    const loginInputs = loginForm.querySelectorAll("input");
    const userInput = loginInputs[0];
    const pwdInput = loginInputs[1];
    const submitBtn = loginForm.querySelector(".login-submit");
    if (!submitBtn || !userInput || !pwdInput) return;

    [userInput, pwdInput].forEach((el) => {
      el.addEventListener("keydown", (e) => {
        if (e.key === "Enter") { e.preventDefault(); submitBtn.click(); }
      });
    });

    // 「忘記密碼?」：企業內網無 SMTP 自助重設 → 提示聯繫管理者（admin force-password-reset）
    const forgotLink = Array.from(loginForm.querySelectorAll("a"))
      .find((a) => (a.textContent || "").includes("忘記密碼"));
    if (forgotLink && !forgotLink.dataset.kbv5) {
      forgotLink.dataset.kbv5 = "1";
      forgotLink.removeAttribute("href");
      forgotLink.style.cursor = "pointer";
      forgotLink.addEventListener("click", (e) => {
        e.preventDefault();
        toast("請聯繫系統管理者重設密碼（admin 可於使用者管理頁強制重設）", "info");
      });
    }

    submitBtn.addEventListener("click", async (e) => {
      e.preventDefault();
      const username = (userInput.value || "").trim();
      const password = pwdInput.value || "";
      if (!username || !password) { toast("請輸入帳號與密碼", "error"); return; }
      // 「記住我 14 天」勾選 → 之後 2FA 通過會發 device_token
      const rememberCb = loginForm.querySelector(
        ".login-options input[type='checkbox']"
      );
      const rememberDevice = !!(rememberCb && rememberCb.checked);
      submitBtn.disabled = true;
      submitBtn.dataset.origText = submitBtn.dataset.origText || submitBtn.textContent;
      submitBtn.textContent = "登入中…";
      try {
        const body = { username, password };
        if (Auth.device) body.device_token = Auth.device;
        const r = await fetch("/api/auth/login", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(body),
        });
        const data = await r.json().catch(() => ({}));
        if (!r.ok) {
          toast(errMsg(data, "登入失敗"), "error");
          return;
        }
        if (data.require_2fa) {
          // 驗證碼錯誤不關閉 dialog，可直接重輸
          let verified = null;
          await securePrompt({
            title: "輸入 2FA 驗證碼",
            desc: rememberDevice
              ? "請輸入 Authenticator 顯示的 6 位驗證碼。通過後此裝置將被記住 14 天，期間登入不需再輸入 2FA。"
              : "請開啟 Authenticator 取得 6 位數動態驗證碼。",
            submitText: "驗證",
            fields: [{
              name: "code", label: "6 位驗證碼", type: "text",
              placeholder: "123456", maxlength: 6, inputmode: "numeric",
            }],
            onSubmit: async (v) => {
              const code = (v.code || "").trim();
              if (!/^\d{6}$/.test(code)) return "請輸入 6 位數字驗證碼";
              const r2 = await fetch("/api/auth/verify-2fa", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                  temp_token: data.temp_token,
                  code,
                  remember_device: rememberDevice,
                }),
              });
              const d2 = await r2.json().catch(() => ({}));
              if (!r2.ok) return errMsg(d2, "2FA 失敗");
              verified = d2;
            },
          });
          if (!verified) return;  // 使用者取消
          Auth.save(verified);
          if (verified.device_token) {
            toast(`此裝置已記住 ${verified.device_token_ttl_days || 14} 天，下次登入可跳過 2FA`, "ok");
          }
        } else {
          Auth.save(data);
        }
        toast("登入成功", "ok");
        hideLoginPage();
        enforcePostLoginGates();
      } catch (err) {
        toast("網路錯誤", "error");
      } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = submitBtn.dataset.origText || "登入";
      }
    });

    if (registerForm) wireRegisterForm(registerForm);
  }

  async function wireRegisterForm(form) {
    if (form.dataset.kbv5 === "1") return;
    form.dataset.kbv5 = "1";

    // 在「姓名」欄上方動態插入「使用者帳號」欄（HTML 檔不動，用 JS）
    const nameField = form.querySelector(".login-field");  // 第一個就是「姓名」
    let usernameInput = null;
    if (nameField && !form.querySelector(".kbv5-username-field")) {
      const wrap = document.createElement("div");
      wrap.className = "login-field kbv5-username-field";
      // label 不在這裡放 *，由下面的 forEach 統一補（避免重複）
      wrap.innerHTML =
        '<label>使用者帳號</label>' +
        '<input type="text" placeholder="例: wang.xm（英數小寫與半形點，建立後不可變更）" />' +
        '<div class="kbv5-username-hint" style="font-size:11px;color:var(--text-3);margin-top:4px;">' +
        '此帳號將用於登入；也可改用 Email 登入。</div>';
      nameField.parentNode.insertBefore(wrap, nameField);
      usernameInput = wrap.querySelector("input");
    } else {
      const exist = form.querySelector(".kbv5-username-field input");
      if (exist) usernameInput = exist;
    }

    const inputs = form.querySelectorAll(".login-field input[type='text'], .login-field input[type='password']");
    // 順序：使用者帳號 / 姓名 / Email / 密碼
    const nameInput = form.querySelectorAll(".login-field")[1] &&
      form.querySelectorAll(".login-field")[1].querySelector("input");
    const emailInput = form.querySelectorAll(".login-field")[2] &&
      form.querySelectorAll(".login-field")[2].querySelector("input");
    const pwdInput = form.querySelector('input[type="password"]');
    const agreeCb = form.querySelector('.login-options input[type="checkbox"]');
    const select = form.querySelector("select");
    const submitBtn = form.querySelector(".login-submit");
    if (!submitBtn) return;

    // 動態 inject「確認密碼」欄位（放在密碼欄之後）
    let confirmPwdInput = null;
    const pwdField = pwdInput ? pwdInput.closest(".login-field") : null;
    if (pwdField && !form.querySelector(".kbv5-confirm-pwd-field")) {
      const wrap = document.createElement("div");
      wrap.className = "login-field kbv5-confirm-pwd-field";
      wrap.innerHTML =
        '<label>確認密碼</label>' +  // * 由共用 forEach 補
        '<input type="password" placeholder="再次輸入新密碼" />' +
        '<div class="kbv5-confirm-pwd-hint" style="font-size:11px;color:var(--text-3);margin-top:4px;"></div>';
      pwdField.parentNode.insertBefore(wrap, pwdField.nextSibling);
      confirmPwdInput = wrap.querySelector("input");
    } else {
      const exist = form.querySelector(".kbv5-confirm-pwd-field input");
      if (exist) confirmPwdInput = exist;
    }
    // 即時比對
    if (pwdInput && confirmPwdInput) {
      const cHint = form.querySelector(".kbv5-confirm-pwd-hint");
      const refreshMatch = () => {
        const a = pwdInput.value || "";
        const b = confirmPwdInput.value || "";
        if (!b) {
          confirmPwdInput.style.borderColor = "";
          if (cHint) { cHint.textContent = ""; }
          return;
        }
        if (a === b) {
          confirmPwdInput.style.borderColor = "var(--ok,#16a34a)";
          if (cHint) { cHint.textContent = "✓ 兩次輸入一致"; cHint.style.color = "var(--ok,#16a34a)"; }
        } else {
          confirmPwdInput.style.borderColor = "var(--danger,#dc2626)";
          if (cHint) { cHint.textContent = "✗ 兩次輸入不一致"; cHint.style.color = "var(--danger,#dc2626)"; }
        }
      };
      pwdInput.addEventListener("input", refreshMatch);
      confirmPwdInput.addEventListener("input", refreshMatch);
    }

    // 帳號欄即時格式檢查 + 去後端問是否被佔用
    if (usernameInput) {
      const hintEl = usernameInput.parentNode.querySelector(".kbv5-username-hint");
      let dupTimer = null;
      const setHint = (text, color) => {
        if (!hintEl) return;
        hintEl.textContent = text;
        hintEl.style.color = color;
      };
      const updateUserHint = () => {
        const v = (usernameInput.value || "").trim();
        clearTimeout(dupTimer);
        if (!v) {
          usernameInput.style.borderColor = "";
          setHint("此帳號將用於登入；也可改用 Email 登入。", "var(--text-3)");
          return;
        }
        if (!/^[a-z0-9._\-]{2,64}$/.test(v)) {
          usernameInput.style.borderColor = "var(--danger,#dc2626)";
          setHint("✗ 僅允許英數小寫、半形點(.)、底線(_)、減號(-)，長度 2-64", "var(--danger,#dc2626)");
          return;
        }
        // 格式對 → 停滯 1 秒後問後端是否被佔用
        usernameInput.style.borderColor = "var(--ok,#16a34a)";
        setHint("✓ 格式正確，檢查中…", "var(--text-3)");
        dupTimer = setTimeout(async () => {
          try {
            const r = await fetch("/api/auth/check-availability-public?username=" + encodeURIComponent(v));
            if (!r.ok) return;
            const j = await r.json();
            if (j.available === false) {
              usernameInput.style.borderColor = "var(--danger,#dc2626)";
              setHint("✗ 此帳號已被使用", "var(--danger,#dc2626)");
            } else {
              usernameInput.style.borderColor = "var(--ok,#16a34a)";
              setHint("✓ 帳號可使用", "var(--ok,#16a34a)");
            }
          } catch (e) {}
        }, 1000);
      };
      usernameInput.addEventListener("input", updateUserHint);
      usernameInput.addEventListener("blur", updateUserHint);
    }

    // 拉允許網域
    let allowedDomains = ["demo.local"];
    try {
      const r = await fetch("/api/auth/email-policy-public");
      if (r.ok) {
        const d = await r.json();
        if (d.allowed_domains && d.allowed_domains.length) {
          allowedDomains = d.allowed_domains;
        }
      }
    } catch (e) {}
    if (emailInput) {
      emailInput.placeholder = "name@" + allowedDomains[0];
      const fieldWrap = emailInput.closest(".login-field");
      let hintEl = fieldWrap ? fieldWrap.querySelector(".kbv5-reg-hint") : null;
      if (fieldWrap && !hintEl) {
        hintEl = document.createElement("div");
        hintEl.className = "kbv5-reg-hint";
        hintEl.style.cssText = "font-size:11px;color:var(--text-3);margin-top:4px;";
        hintEl.textContent = "限公司網域：" + allowedDomains.map(d => "@" + d).join(" / ");
        fieldWrap.appendChild(hintEl);
      }
      // 即時偵測網域 + 去後端問是否已被使用
      let emailDupTimer = null;
      const setEmailHint = (text, color) => {
        if (!hintEl) return;
        hintEl.textContent = text;
        hintEl.style.color = color;
      };
      const updateEmailHint = () => {
        const v = (emailInput.value || "").trim();
        const allowedText = allowedDomains.map(d => "@" + d).join(" / ");
        clearTimeout(emailDupTimer);
        if (!v) {
          emailInput.style.borderColor = "";
          setEmailHint("限公司網域：" + allowedText, "var(--text-3)");
          return;
        }
        const m = v.match(/@([A-Za-z0-9.\-]+)$/);
        if (!v.includes("@")) {
          emailInput.style.borderColor = "";
          setEmailHint("限公司網域：" + allowedText, "var(--text-3)");
          return;
        }
        if (!m || !allowedDomains.includes(m[1].toLowerCase())) {
          emailInput.style.borderColor = "var(--danger,#dc2626)";
          setEmailHint("✗ 網域不允許，僅限：" + allowedText, "var(--danger,#dc2626)");
          return;
        }
        // 網域對 → 停滯 1 秒後問後端是否被佔用
        emailInput.style.borderColor = "var(--ok,#16a34a)";
        setEmailHint("✓ 網域正確，檢查中…", "var(--text-3)");
        emailDupTimer = setTimeout(async () => {
          try {
            const r = await fetch("/api/auth/check-availability-public?email=" + encodeURIComponent(v));
            if (!r.ok) return;
            const j = await r.json();
            if (j.available === false) {
              emailInput.style.borderColor = "var(--danger,#dc2626)";
              const REASON_MAP = {
                taken: "✗ 此 Email 已被使用",
                email_invalid_format: "✗ Email 格式不正確",
                email_domain_not_allowed: "✗ 網域不允許（限：" + (j.allowed_domains || []).map(d => "@" + d).join(" / ") + "）",
                invalid_format: "✗ Email 格式不正確",
              };
              setEmailHint(REASON_MAP[j.reason] || "✗ Email 無效", "var(--danger,#dc2626)");
            } else {
              emailInput.style.borderColor = "var(--ok,#16a34a)";
              setEmailHint("✓ Email 可使用", "var(--ok,#16a34a)");
            }
          } catch (e) {}
        }, 1000);
      };
      emailInput.addEventListener("input", updateEmailHint);
      emailInput.addEventListener("blur", updateEmailHint);
    }

    // 為每個必填欄位的 label 加紅星 *（避免重複加）
    form.querySelectorAll(".login-field > label").forEach((lbl) => {
      if (lbl.querySelector(".kbv5-required-star")) return;
      const star = document.createElement("span");
      star.className = "kbv5-required-star";
      star.style.cssText = "color:var(--danger,#dc2626);margin-left:4px;";
      star.textContent = "*";
      lbl.appendChild(star);
    });

    // 動態填入部門下拉
    if (select) {
      try {
        const r = await fetch("/api/auth/departments-public");
        if (r.ok) {
          const list = await r.json();
          select.innerHTML = '<option value="">請選擇部門</option>' +
            list.filter(d => d.is_active)
                .map(d => `<option value="${escapeHtml(d.name)}">${escapeHtml(d.name)}</option>`)
                .join("");
        }
      } catch (e) {}
    }

    submitBtn.addEventListener("click", async (e) => {
      e.preventDefault();
      const username = (usernameInput && usernameInput.value || "").trim();
      const name = (nameInput && nameInput.value || "").trim();
      const email = (emailInput && emailInput.value || "").trim();
      const password = (pwdInput && pwdInput.value || "");
      const dept = select ? select.value : "";
      const agreed = !!(agreeCb && agreeCb.checked);

      if (!username) { toast("請輸入使用者帳號", "error"); usernameInput && usernameInput.focus(); return; }
      if (!/^[a-z0-9._\-]{2,64}$/.test(username)) {
        toast("帳號格式無效：限英數小寫、半形點、底線、減號，長度 2-64", "error");
        usernameInput && usernameInput.focus();
        return;
      }
      if (!name) { toast("請輸入姓名", "error"); nameInput && nameInput.focus(); return; }
      if (!email) { toast("請輸入 Email", "error"); emailInput && emailInput.focus(); return; }
      if (!dept || dept.startsWith("請選")) {
        toast("請選擇部門", "error"); return;
      }
      if (!password) { toast("請設定密碼", "error"); pwdInput && pwdInput.focus(); return; }
      const confirm = (confirmPwdInput && confirmPwdInput.value || "");
      if (!confirm) { toast("請再次輸入密碼確認", "error"); confirmPwdInput && confirmPwdInput.focus(); return; }
      if (password !== confirm) {
        toast("兩次密碼不一致", "error");
        confirmPwdInput && confirmPwdInput.focus();
        return;
      }
      if (!agreed) { toast("請勾選同意《服務條款》與《隱私權政策》", "error"); return; }

      const m = email.match(/@([A-Za-z0-9.\-]+)$/);
      if (!m || !allowedDomains.includes(m[1].toLowerCase())) {
        toast(`Email 網域必須為：${allowedDomains.map(d => "@" + d).join(" / ")}`, "error");
        emailInput && emailInput.focus();
        return;
      }
      if (password.length < 8 || !/[A-Z]/.test(password) || !/[a-z]/.test(password)) {
        toast("密碼需 ≥ 8 字、含至少 1 大寫 1 小寫", "error");
        pwdInput && pwdInput.focus();
        return;
      }
      if (!agreed) {                                  // §50.4.1 PDPA
        toast("請先閱讀並勾選個人資料使用條款", "error");
        agreeCb && agreeCb.focus();
        return;
      }

      submitBtn.disabled = true;
      const origText = submitBtn.textContent;
      submitBtn.textContent = "送出中…";
      try {
        const r = await fetch("/api/auth/register", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            username, email, password, department: dept, display_name: name,
            pdpa_agreed: agreed, pdpa_version: "1.0",   // §50.4.1
          }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) { toast(errMsg(j, "申請失敗"), "error"); return; }
        toast("申請已送出，待管理員審核後將通知您", "ok");
        if (nameInput) nameInput.value = "";
        if (emailInput) emailInput.value = "";
        if (pwdInput) pwdInput.value = "";
        if (select) select.selectedIndex = 0;
        if (agreeCb) agreeCb.checked = false;
        // 切回登入頁籤
        const tabs = document.querySelectorAll("#login-tabs button");
        tabs.forEach(b => b.classList.toggle("is-active", b.dataset.mode === "login"));
        form.style.display = "none";
        const loginForm2 = document.getElementById("login-form");
        if (loginForm2) loginForm2.style.display = "";
      } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = origText;
      }
    });
  }

  // 首次登入強制改密：非可關閉 modal（不能 Esc / 點外面 / 取消）；
  // 欄位於驗證失敗時保留；確認密碼停止輸入 1 秒後做即時一致檢查。
  function promptForcePasswordChange() {
    if (document.getElementById("kbv5-force-pwd")) return;
    const overlay = document.createElement("div");
    overlay.id = "kbv5-force-pwd";
    overlay.style.cssText =
      "position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100001;" +
      "display:flex;align-items:center;justify-content:center;padding:20px;";
    const card = document.createElement("div");
    card.style.cssText =
      "background:#fff;border-radius:12px;padding:24px;max-width:420px;width:100%;" +
      "box-shadow:0 20px 60px rgba(0,0,0,.3);font-family:inherit;box-sizing:border-box;";
    const inputCss =
      "width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;" +
      "font-size:14px;font-family:inherit;box-sizing:border-box;outline:none;background:#fff;";
    const labelCss = "display:block;font-size:12px;color:#475569;margin:12px 0 4px;font-weight:500;";
    card.innerHTML =
      '<div style="font-size:15px;font-weight:600;color:#0b1f33;margin-bottom:6px;">首次登入請改密碼</div>' +
      '<div style="font-size:12px;color:#64748b;margin-bottom:6px;">為帳號安全，請先設定新密碼後才能使用系統。</div>' +
      '<label style="' + labelCss + '">目前的（初始）密碼</label>' +
      '<input id="kfp-old" type="password" autocomplete="current-password" style="' + inputCss + '">' +
      '<label style="' + labelCss + '">新密碼</label>' +
      '<input id="kfp-new" type="password" autocomplete="new-password" style="' + inputCss + '">' +
      '<div style="font-size:11px;color:#94a3b8;margin-top:4px;">≥ 8 字、至少 1 大寫 1 小寫（建議含數字或特殊符號）</div>' +
      '<label style="' + labelCss + '">確認新密碼</label>' +
      '<input id="kfp-conf" type="password" autocomplete="new-password" style="' + inputCss + '">' +
      '<div id="kfp-match" style="font-size:11px;margin-top:4px;min-height:14px;"></div>' +
      '<div style="display:flex;justify-content:flex-end;margin-top:18px;">' +
      '<button id="kfp-submit" type="button" style="padding:8px 16px;border:none;background:#009BCB;' +
      'color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;">設定並重新登入</button>' +
      '</div>';
    overlay.appendChild(card);
    document.body.appendChild(overlay);

    const oldEl = card.querySelector("#kfp-old");
    const newEl = card.querySelector("#kfp-new");
    const confEl = card.querySelector("#kfp-conf");
    const matchEl = card.querySelector("#kfp-match");
    const submitBtn = card.querySelector("#kfp-submit");
    oldEl.focus();

    let matchTimer = null;
    function showMatch() {
      const n = newEl.value, c = confEl.value;
      if (!c) { matchEl.textContent = ""; return; }
      if (n === c) { matchEl.textContent = "✓ 兩次密碼一致"; matchEl.style.color = "#16a34a"; }
      else { matchEl.textContent = "⚠ 兩次密碼不一致"; matchEl.style.color = "#dc2626"; }
    }
    // 停止輸入 1 秒後即時檢查一致
    [newEl, confEl].forEach((el) => {
      el.addEventListener("input", () => {
        clearTimeout(matchTimer);
        matchTimer = setTimeout(showMatch, 1000);
      });
    });

    async function doSubmit() {
      const oldp = oldEl.value, newp = newEl.value, conf = confEl.value;
      if (!oldp) { toast("請輸入目前的密碼", "error"); oldEl.focus(); return; }
      if (newp.length < 8 || !/[A-Z]/.test(newp) || !/[a-z]/.test(newp)) {
        toast("新密碼需 ≥ 8 字、含 1 大寫 1 小寫", "error"); newEl.focus(); return;
      }
      if (newp !== conf) {
        toast("兩次新密碼不一致，請重新輸入", "error"); showMatch(); confEl.focus(); return;
      }
      if (newp === oldp) {
        toast("新密碼不可與舊密碼相同", "error"); newEl.focus(); return;
      }
      submitBtn.disabled = true;
      const orig = submitBtn.textContent;
      submitBtn.textContent = "處理中…";
      try {
        const r = await api("/api/auth/change-password", {
          method: "POST",
          body: JSON.stringify({ old_password: oldp, new_password: newp }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) {
          // 失敗：保留欄位，僅提示
          toast(errMsg(j, "改密失敗"), "error");
          if (pickErrCode(j) === "step_up_failed" || pickErrCode(j) === "invalid_credentials") oldEl.focus();
          return;
        }
        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
        Auth.clear();
        toast("密碼已更新，請以新密碼重新登入", "ok");
        setTimeout(showLoginPage, 600);
      } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = orig;
      }
    }

    submitBtn.addEventListener("click", doSubmit);
    confEl.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); doSubmit(); } });
    // 非可關閉：吞掉 Esc，點外面不關
    overlay.addEventListener("click", (e) => { if (e.target === overlay) e.stopPropagation(); });
    overlay.addEventListener("keydown", (e) => { if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); } });
  }

  // 角色需強制 2FA（admin / senior_manager）。next login 若尚未啟用 → 非可關閉設置 modal。
  const MFA_REQUIRED_ROLES = ["admin", "senior_manager"];
  function needsForced2fa(u) {
    // 尊重 FEATURE_2FA 旗標：false（如示範環境）→ 不強制 admin/senior 設 2FA
    const force2fa = !NS.flags || NS.flags.FEATURE_2FA !== false;
    return !!(u && force2fa && MFA_REQUIRED_ROLES.includes(u.role) && !u.totp_enabled);
  }

  // 登入 / session 還原後的強制關卡：先改密碼，否則強制 2FA 設置。
  async function enforcePostLoginGates() {
    await loadFeatureFlags();   // 確保 FEATURE_2FA 等旗標就緒再判斷強制關卡
    const u = Auth.user;
    if (u && u.force_password_change) {
      window.setTimeout(promptForcePasswordChange, 400);
      return;
    }
    if (needsForced2fa(u)) {
      window.setTimeout(promptForce2faSetup, 400);
    }
  }

  async function promptForce2faSetup() {
    if (document.getElementById("kbv5-force-2fa")) return;
    const overlay = document.createElement("div");
    overlay.id = "kbv5-force-2fa";
    overlay.style.cssText =
      "position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100001;" +
      "display:flex;align-items:center;justify-content:center;padding:20px;";
    const card = document.createElement("div");
    card.style.cssText =
      "background:#fff;border-radius:12px;padding:24px;max-width:420px;width:100%;" +
      "box-shadow:0 20px 60px rgba(0,0,0,.3);font-family:inherit;box-sizing:border-box;text-align:center;";
    card.innerHTML =
      '<div style="font-size:15px;font-weight:600;color:#0b1f33;margin-bottom:6px;">此帳號必須啟用兩段式驗證</div>' +
      '<div style="font-size:12px;color:#64748b;margin-bottom:14px;">' +
      '您的角色（管理者 / 高階主管）必須設定 2FA 後才能使用系統。請用 Authenticator 掃描下方 QR 後輸入 6 位驗證碼。</div>' +
      '<div id="kf2-qr" style="width:180px;height:180px;margin:0 auto 10px;border:1px solid #e2e8f0;' +
      'border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;color:#94a3b8;">讀取中…</div>' +
      '<div style="font-size:11px;color:#64748b;">無法掃描？手動輸入金鑰：</div>' +
      '<div id="kf2-secret" style="font-family:monospace;font-size:12px;color:#0b1f33;word-break:break-all;' +
      'background:#f1f5f9;border-radius:6px;padding:8px;margin:4px 0 14px;cursor:pointer;" title="點擊複製"></div>' +
      '<input id="kf2-code" type="text" inputmode="numeric" maxlength="6" placeholder="6 位驗證碼" ' +
      'autocomplete="one-time-code" style="width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;' +
      'font-size:16px;letter-spacing:4px;text-align:center;font-family:inherit;box-sizing:border-box;outline:none;">' +
      '<div style="display:flex;justify-content:flex-end;margin-top:18px;">' +
      '<button id="kf2-submit" type="button" style="padding:8px 16px;border:none;background:#009BCB;color:#fff;' +
      'border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;">啟用並繼續</button>' +
      '</div>';
    overlay.appendChild(card);
    document.body.appendChild(overlay);

    const qrBox = card.querySelector("#kf2-qr");
    const secretBox = card.querySelector("#kf2-secret");
    const codeEl = card.querySelector("#kf2-code");
    const submitBtn = card.querySelector("#kf2-submit");

    // 取得 secret + QR
    try {
      const r = await api("/api/auth/2fa/setup", { method: "POST" });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { qrBox.textContent = "讀取失敗"; toast(errMsg(j, "2FA 設置失敗"), "error"); }
      else {
        secretBox.textContent = j.secret || "";
        if (j.qr_data_url) {
          qrBox.innerHTML = '<img src="' + j.qr_data_url + '" alt="QR" style="width:100%;height:100%;object-fit:contain;">';
        }
      }
    } catch (e) { qrBox.textContent = "讀取失敗"; }

    secretBox.addEventListener("click", () => {
      const t = secretBox.textContent || "";
      if (!t) return;
      _copyText(t).then((ok) => toast(ok ? "金鑰已複製" : "複製失敗，請手動選取複製", ok ? "ok" : "error"));
    });
    codeEl.focus();

    async function doVerify() {
      const code = (codeEl.value || "").trim();
      if (!/^\d{6}$/.test(code)) { toast("請輸入 6 位數字驗證碼", "error"); codeEl.focus(); return; }
      submitBtn.disabled = true;
      const orig = submitBtn.textContent;
      submitBtn.textContent = "驗證中…";
      try {
        const r = await api("/api/auth/2fa/verify", {
          method: "POST", body: JSON.stringify({ code }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) { toast(errMsg(j, "驗證失敗"), "error"); codeEl.select(); return; }
        // 更新本地使用者狀態
        const u = Auth.user || {};
        u.totp_enabled = true;
        localStorage.setItem(TK_USER, JSON.stringify(u));
        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
        toast("兩段式驗證已啟用", "ok");
      } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = orig;
      }
    }
    submitBtn.addEventListener("click", doVerify);
    codeEl.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); doVerify(); } });
    overlay.addEventListener("click", (e) => { if (e.target === overlay) e.stopPropagation(); });
    overlay.addEventListener("keydown", (e) => { if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); } });
  }

  // -------------------- ACCOUNT page wiring --------------------
  // 帳號頁左側分頁：點了捲到對應區塊 + 切 is-active（原本死的）
  function _wireAccountSideNav(page) {
    const nav = page.querySelector(".account-side");
    if (!nav || nav.dataset.kbv5Nav === "1") return;
    nav.dataset.kbv5Nav = "1";
    const items = Array.from(nav.querySelectorAll(".account-side__item"));
    const keysFor = (t) =>
      t.indexOf("密碼") >= 0 || t.indexOf("2FA") >= 0 ? ["變更密碼", "修改密碼", "兩段式", "2FA", "密碼"]
        : t.indexOf("登入裝置") >= 0 ? ["登入裝置"]
          : t.indexOf("通知") >= 0 ? ["通知偏好", "通知設定", "訂閱"]
            : ["個人資料", "基本資料"];
    items.forEach((it) => {
      it.addEventListener("click", () => {
        items.forEach((x) => x.classList.toggle("is-active", x === it));
        const label = (it.textContent || "").trim();
        const keys = keysFor(label);
        const cards = Array.from(page.querySelectorAll(".account-card"));
        const target = cards.find((c) => {
          const t = (c.querySelector(".account-card__title")?.textContent || "");
          return keys.some((k) => t.indexOf(k) >= 0);
        });
        if (target) target.scrollIntoView({ behavior: "smooth", block: "center" });
        else if (keys.indexOf("個人資料") >= 0) page.scrollIntoView({ behavior: "smooth", block: "start" });
      });
    });
  }

  function wireAccount() {
    document.querySelectorAll(".account-card").forEach((card) => {
      if (card.dataset.kbv5) return;
      const titleEl = card.querySelector(".account-card__title");
      if (!titleEl) return;
      const title = (titleEl.textContent || "").trim();
      if (title.includes("兩段式驗證")) { wireTotpCard(card); card.dataset.kbv5 = "1"; }
      else if (title.includes("變更密碼") || title.includes("修改密碼")) {
        wirePasswordCard(card); card.dataset.kbv5 = "1";
      }
    });
    // PRD §32 + §30.2：注入「登入裝置」「通知偏好」區塊
    const accountPage = document.querySelector('main.page[data-page="account"]');
    if (!accountPage) return;
    // ⑩#1：頁首身分列原本寫死「陳怡君·…·管理者」→ 改用當前登入者
    const acctHdr = accountPage.querySelector(".page__title-group p");
    if (acctHdr && Auth.user) {
      const roleLbl = { admin: "管理者", senior_manager: "高階主管", manager: "主管",
                        user: "一般使用者", guest: "訪客" }[Auth.user.role] || Auth.user.role;
      acctHdr.textContent = [Auth.user.display_name || Auth.user.username,
                             Auth.user.email, Auth.user.department, roleLbl]
                            .filter(Boolean).join(" · ");
    }
    // ⑩#2：mockup 寫死的「目前登入裝置」假卡 → 隱藏（真卡由 loadAccountSessions 注入「登入裝置（N）」）
    accountPage.querySelectorAll(".account-card").forEach((c) => {
      const t = c.querySelector(".account-card__title");
      if (t && t.textContent.trim() === "目前登入裝置") c.style.display = "none";
    });
    _wireAccountSideNav(accountPage);   // 左側分頁（個人資料/密碼與2FA/登入裝置/通知偏好）切換
    if (accountPage.dataset.kbv5Sessions !== "1") {
      accountPage.dataset.kbv5Sessions = "1";
      const obs = new MutationObserver(() => {
        if (accountPage.classList.contains("is-active")) {
          loadAccountSessions(accountPage);
          loadAccountPreferences(accountPage);
          loadAccountSubscriptions(accountPage);
        }
      });
      obs.observe(accountPage, { attributes: true, attributeFilter: ["class"] });
      if (accountPage.classList.contains("is-active")) {
        loadAccountSessions(accountPage);
        loadAccountPreferences(accountPage);
        loadAccountSubscriptions(accountPage);
      }
    }
  }

  // §50.3.4 主題訂閱管理（注入 account 頁末端）
  async function loadAccountSubscriptions(page) {
    page.querySelectorAll("[data-kbv5-subs-block]").forEach((n) => n.remove());
    const r = await api("/api/account/subscriptions").catch(() => null);
    if (!r || !r.ok) return;
    const j = await r.json();
    const card = document.createElement("div");
    card.className = "account-card";
    card.dataset.kbv5SubsBlock = "1";
    const TYPE_LBL = { tag: "🏷 標籤", category: "📁 分類", moc: "🗺 MOC",
                        keyword: "🔍 關鍵字", department: "🏢 部門" };
    const rows = (j.items || []).map((s) =>
      `<div style="display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);">` +
        `<div style="flex:1;font-size:13px;">${escapeHtml(TYPE_LBL[s.target_type] || s.target_type)} <b>${escapeHtml(s.target_value)}</b></div>` +
        `<button class="btn btn--ghost btn--sm" data-unsub="${s.id}">取消訂閱</button>` +
      `</div>`
    ).join("");
    card.innerHTML =
      `<div class="account-card__title">訂閱管理（${j.count}）</div>` +
      `<div class="account-card__desc">新核准的文件符合訂閱條件時，會通知您。</div>` +
      `<div style="display:flex;gap:8px;margin-top:14px;align-items:center;">` +
        `<select id="kbv5-sub-type" style="padding:8px 10px;border:1px solid var(--border);border-radius:6px;">` +
          `<option value="tag">🏷 標籤</option>` +
          `<option value="category">📁 分類</option>` +
          `<option value="keyword">🔍 關鍵字</option>` +
          `<option value="department">🏢 部門</option>` +
        `</select>` +
        `<input id="kbv5-sub-value" type="text" placeholder="輸入要訂閱的值..." style="flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:6px;">` +
        `<button class="btn btn--primary btn--sm" data-add-sub>新增訂閱</button>` +
      `</div>` +
      `<div style="margin-top:14px;background:var(--surface-2);border-radius:8px;overflow:hidden;">${rows || '<div style="padding:18px;text-align:center;color:var(--text-3);font-size:12px;">尚無訂閱</div>'}</div>`;
    const layout = page.querySelector(".account-layout > div:last-child");
    if (layout) layout.appendChild(card);
    // 綁定
    card.querySelector("[data-add-sub]").addEventListener("click", async () => {
      const type = card.querySelector("#kbv5-sub-type").value;
      const value = card.querySelector("#kbv5-sub-value").value.trim();
      if (!value) { toast("請輸入訂閱值", "warn"); return; }
      const r = await api("/api/account/subscriptions", {
        method: "POST",
        body: JSON.stringify({ target_type: type, target_value: value }),
      });
      const j = await r.json().catch(() => ({}));
      if (r.ok) { toast("已新增訂閱", "ok"); loadAccountSubscriptions(page); }
      else if (r.status === 409) toast("已訂閱此項目", "warn");
      else toast(errMsg(j, "新增失敗"), "error");
    });
    card.querySelectorAll("[data-unsub]").forEach((b) =>
      b.addEventListener("click", async () => {
        if (!confirm("取消此訂閱？")) return;
        const r = await api(`/api/account/subscriptions/${b.dataset.unsub}`, { method: "DELETE" });
        if (r.ok) { toast("已取消訂閱", "ok"); loadAccountSubscriptions(page); }
        else toast("取消失敗", "error");
      })
    );
  }

  async function loadAccountSessions(page) {
    page.querySelectorAll("[data-kbv5-sessions-block]").forEach((n) => n.remove());
    const r = await api("/api/account/sessions").catch(() => null);
    if (!r || !r.ok) return;
    const j = await r.json();
    const card = document.createElement("div");
    card.className = "account-card";
    card.dataset.kbv5SessionsBlock = "1";
    const rows = (j.items || []).map((s) => {
      const ts = (s.last_used_at || s.created_at || "").slice(0, 19).replace("T", " ");
      const ua = (s.user_agent || "未知裝置").slice(0, 60);
      return `<div style="display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);">` +
        `<div style="flex:1;min-width:0;">` +
          `<div style="font-size:13px;font-weight:600;color:var(--text-1);">${escapeHtml(ua)}</div>` +
          `<div style="font-size:11px;color:var(--text-3);margin-top:2px;">IP ${escapeHtml(s.ip_address || "—")} · 最後使用 ${escapeHtml(ts)}</div>` +
        `</div>` +
        `<button class="btn btn--ghost btn--sm" data-revoke="${escapeHtml(s.id)}">登出此裝置</button>` +
      `</div>`;
    }).join("");
    card.innerHTML =
      `<div style="display:flex;justify-content:space-between;align-items:center;">` +
        `<div><div class="account-card__title">登入裝置（${j.count}）</div>` +
        `<div class="account-card__desc">當前帳號活躍 sessions · 可逐個登出或一鍵全部登出</div></div>` +
        `<button class="btn btn--danger btn--sm" data-logout-all>登出所有裝置</button>` +
      `</div>` +
      `<div style="margin-top:14px;background:var(--surface-2);border-radius:8px;overflow:hidden;">${rows || '<div style="padding:18px;text-align:center;color:var(--text-3);font-size:12px;">尚無活躍裝置</div>'}</div>`;
    // 注入到 account-side 的 sibling content 內
    const layout = page.querySelector(".account-layout > div:last-child");
    if (layout) layout.appendChild(card);
    // 綁定
    card.querySelectorAll("[data-revoke]").forEach((b) =>
      b.addEventListener("click", async () => {
        if (!confirm("確定登出此裝置？")) return;
        const r = await api(`/api/account/sessions/${b.dataset.revoke}`, { method: "DELETE" });
        if (r.ok) { toast("已登出該裝置", "ok"); loadAccountSessions(page); }
        else toast("登出失敗", "error");
      })
    );
    const allBtn = card.querySelector("[data-logout-all]");
    if (allBtn) allBtn.addEventListener("click", async () => {
      if (!confirm("確定登出所有裝置？\n本機也會被登出，需重新登入。")) return;
      const r = await api("/api/account/sessions/logout-all", { method: "POST" });
      if (r.ok) {
        toast("已登出所有裝置", "ok");
        // 自己也被登出
        if (typeof Auth.clear === "function") Auth.clear();
        showLoginPage();
      } else toast("操作失敗", "error");
    });
  }

  async function loadAccountPreferences(page) {
    page.querySelectorAll("[data-kbv5-prefs-block]").forEach((n) => n.remove());
    const r = await api("/api/account/preferences").catch(() => null);
    if (!r || !r.ok) return;
    const p = await r.json();
    const card = document.createElement("div");
    card.className = "account-card";
    card.dataset.kbv5PrefsBlock = "1";
    const NOTIFY = [
      ["notify_pending", "待審文件"],
      ["notify_account_apply", "帳號開通申請"],
      ["notify_visibility", "文件可見度變更"],
      ["notify_abnormal", "異常登入提醒"],
      ["notify_announcement", "系統公告"],
    ];
    const notifyRows = NOTIFY.map(([k, label]) =>
      `<label style="display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;cursor:pointer;">` +
      `<input type="checkbox" data-pref="${k}" ${p[k] ? "checked" : ""}/>` +
      `<span>${escapeHtml(label)}</span></label>`
    ).join("");
    const VIEWS = [["grid", "Grid"], ["list", "List"]];
    const SIZES = [["small", "小"], ["medium", "中"], ["large", "大"]];
    const PAGES = [20, 50, 100];
    const viewRadios = VIEWS.map(([v, l]) =>
      `<label style="margin-right:14px;cursor:pointer;"><input type="radio" name="default_view" data-pref="default_view" value="${v}" ${p.default_view === v ? "checked" : ""}/> ${l}</label>`
    ).join("");
    const sizeRadios = SIZES.map(([v, l]) =>
      `<label style="margin-right:14px;cursor:pointer;"><input type="radio" name="font_size" data-pref="font_size" value="${v}" ${p.font_size === v ? "checked" : ""}/> ${l}</label>`
    ).join("");
    const pageOpts = PAGES.map((v) =>
      `<option value="${v}" ${p.page_size === v ? "selected" : ""}>${v}</option>`
    ).join("");
    card.innerHTML =
      `<div style="display:flex;justify-content:space-between;align-items:center;">` +
        `<div><div class="account-card__title">通知與顯示偏好</div>` +
        `<div class="account-card__desc">勾選想收到的通知類型；下方為顯示偏好。</div></div>` +
        `<button class="btn btn--ghost btn--sm" data-rerun-onboard>🎯 重新跑首次引導</button>` +
      `</div>` +
      `<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px;">` +
        `<div><div style="font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px;">通知類型</div>${notifyRows}</div>` +
        `<div>` +
          `<div style="font-size:12px;font-weight:600;color:var(--text-2);margin:8px 0 6px;">預設視圖</div>${viewRadios}` +
          `<div style="font-size:12px;font-weight:600;color:var(--text-2);margin:14px 0 6px;">字級</div>${sizeRadios}` +
          `<div style="font-size:12px;font-weight:600;color:var(--text-2);margin:14px 0 6px;">一頁筆數</div>` +
            `<select data-pref="page_size" style="padding:6px 10px;border:1px solid var(--border);border-radius:6px;">${pageOpts}</select>` +
        `</div>` +
      `</div>`;
    const layout = page.querySelector(".account-layout > div:last-child");
    if (layout) layout.appendChild(card);
    // §32.3 重新跑引導
    const rerun = card.querySelector("[data-rerun-onboard]");
    if (rerun) rerun.addEventListener("click", () => {
      if (typeof NS.startOnboarding === "function") {
        // 切到 dashboard 才能看到 step 1 的目標
        window.switchPage("dashboard");
        setTimeout(() => NS.startOnboarding(), 400);
      }
    });
    // 即時送 PATCH
    card.querySelectorAll("[data-pref]").forEach((el) => {
      el.addEventListener("change", async () => {
        const k = el.dataset.pref;
        let v;
        if (el.type === "checkbox") v = el.checked;
        else if (el.type === "number" || k === "page_size") v = parseInt(el.value, 10);
        else v = el.value;
        const r = await api("/api/account/preferences", {
          method: "PATCH",
          body: JSON.stringify({ [k]: v }),
        });
        if (r.ok) toast("已儲存偏好", "ok");
        else toast("儲存失敗", "error");
      });
    });
  }

  // 砍掉原 HTML 上 `.switch onclick = toggle('is-on')` 的舊行為，回傳全新元素
  function neutralizeSwitch(sw) {
    const clone = sw.cloneNode(true);
    sw.parentNode.replaceChild(clone, sw);
    return clone;
  }

  // 蓋掉原 HTML 對 .totp-qr 的「假 QR 圖樣 + 偽定位點 ::before/::after」
  function ensureQrOverrideStyle() {
    if (document.getElementById("kbv5-qr-override")) return;
    const st = document.createElement("style");
    st.id = "kbv5-qr-override";
    st.textContent =
      ".totp-qr.has-qr{padding:0!important;border-color:#e2e8f0!important;" +
      "background-blend-mode:normal!important;}" +
      ".totp-qr.has-qr::before,.totp-qr.has-qr::after{display:none!important;}";
    document.head.appendChild(st);
  }

  function renderQr(card, qr_data_url) {
    const qrEl = card.querySelector(".totp-qr");
    if (!qrEl) return;
    if (!qr_data_url) {
      qrEl.style.backgroundImage = "";
      qrEl.style.background = "";
      qrEl.classList.remove("has-qr");
      return;
    }
    ensureQrOverrideStyle();
    // 完全覆寫 background 避免被舊 gradient 干擾
    qrEl.style.cssText = (qrEl.style.cssText || "") +
      ";background:#fff url('" + qr_data_url + "') center/contain no-repeat" +
      ";background-blend-mode:normal" +
      ";padding:0";
    qrEl.classList.add("has-qr");
  }

  function wireTotpCard(card) {
    let sw = card.querySelector(".switch");
    if (!sw) return;
    sw = neutralizeSwitch(sw);  // 切斷原 toggle

    // 卡片內元素
    const totpCard = card.querySelector(".totp-card");
    const codeInput = totpCard ? totpCard.querySelector('input[type="text"]') : null;
    const verifyBtn = totpCard ? totpCard.querySelector("button") : null;
    // 「已啟用」標籤：switch 前的那個 span（class 不固定，用結構找）
    const statusLabel = sw.parentNode ? sw.parentNode.querySelector("span") : null;

    function setUiEnabled(on) {
      if (on) sw.classList.add("is-on"); else sw.classList.remove("is-on");
      if (statusLabel) {
        statusLabel.textContent = on ? "已啟用" : "未啟用";
        statusLabel.style.color = on ? "var(--ok)" : "var(--text-3)";
      }
    }
    function showTotpCard(visible) {
      if (totpCard) totpCard.style.display = visible ? "" : "none";
      if (!visible) {
        const secretEl = card.querySelector(".totp-secret");
        if (secretEl) secretEl.textContent = "";
        renderQr(card, null);
        if (codeInput) codeInput.value = "";
      }
    }

    // 初始狀態（依使用者 profile）
    const u = Auth.user || {};
    setUiEnabled(!!u.totp_enabled);
    showTotpCard(false);   // **預設隱藏 QR / secret / 6 位碼欄**

    let pendingEnable = false;

    sw.addEventListener("click", async () => {
      const isOn = sw.classList.contains("is-on");

      if (isOn) {
        // 已啟用 → 想關閉（雙因素驗證：密碼 + 目前 2FA 碼）
        const v = await securePrompt({
          title: "關閉 2FA",
          desc: "需同時驗證密碼與當前 Authenticator 驗證碼。",
          fields: [
            { name: "password", label: "目前密碼", type: "password" },
            { name: "code", label: "Authenticator 6 位驗證碼", type: "text",
              placeholder: "123456", maxlength: 6, inputmode: "numeric" },
          ],
        });
        if (!v) return;
        if (!/^\d{6}$/.test((v.code || "").trim())) { toast("請輸入 6 位數字驗證碼", "error"); return; }
        const r = await api("/api/auth/2fa/disable", {
          method: "POST",
          body: JSON.stringify({ password: v.password, code: v.code.trim() }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) {
          const ec = pickErrCode(j);
          if (ec === "2fa_mandatory_for_role") toast("此角色不可關閉 2FA", "error");
          else toast(errMsg(j, "關閉 2FA 失敗"), "error");
          return;
        }
        setUiEnabled(false);
        showTotpCard(false);
        pendingEnable = false;
        Auth.clearDevice();  // 關閉 2FA 同步清掉本地信任裝置 token
        const me = await api("/api/auth/me");
        if (me.ok) localStorage.setItem("kbv5.user", JSON.stringify(await me.json()));
        toast("已關閉 2FA", "ok");
        return;
      }

      // 未啟用 → 啟動 setup（**點下去 QR 才顯示**）
      if (!pendingEnable) {
        const r = await api("/api/auth/2fa/setup", { method: "POST" });
        if (!r.ok) {
          const j = await r.json().catch(() => ({}));
          toast(errMsg(j, "無法啟動 2FA 設置"), "error");
          return;
        }
        const data = await r.json();
        const secretEl = card.querySelector(".totp-secret");
        if (secretEl) secretEl.textContent = data.secret;
        renderQr(card, data.qr_data_url);
        showTotpCard(true);
        pendingEnable = true;
        if (codeInput) codeInput.focus();
        toast("請以 Authenticator 掃描 QR，然後輸入 6 位碼按「驗證綁定」", "info");
      } else {
        toast("請輸入 6 位碼後按「驗證綁定」完成啟用", "info");
        if (codeInput) codeInput.focus();
      }
    });

    if (verifyBtn && codeInput) {
      verifyBtn.addEventListener("click", async (e) => {
        e.preventDefault();
        const code = (codeInput.value || "").trim();
        if (!/^\d{6}$/.test(code)) { toast("請輸入 6 位數字驗證碼", "error"); return; }
        const r = await api("/api/auth/2fa/verify", {
          method: "POST", body: JSON.stringify({ code }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) { toast(errMsg(j, "驗證失敗"), "error"); return; }
        setUiEnabled(true);
        showTotpCard(false);
        pendingEnable = false;
        const me = await api("/api/auth/me");
        if (me.ok) localStorage.setItem("kbv5.user", JSON.stringify(await me.json()));
        toast("2FA 已啟用", "ok");
      });
      codeInput.addEventListener("keydown", (e) => {
        if (e.key === "Enter") { e.preventDefault(); verifyBtn.click(); }
      });
    }
  }

  // ---- 密碼強度（純評分抽到 pure.js，已測；PRD §10.5）----
  function gradePassword(p) {
    return Pure.gradePassword(p);
  }

  function wirePasswordCard(card) {
    // 抓卡片內 3 個密碼 input（目前 / 新 / 確認）+ 更新密碼按鈕
    const inputs = card.querySelectorAll('input[type="password"]');
    if (inputs.length < 3) return;
    const oldInput = inputs[0];
    const newInput = inputs[1];
    const confirmInput = inputs[2];
    const btn = card.querySelector("button");
    if (!btn) return;

    // 即時強度提示
    const bar = card.querySelector(".pwd-strength__bar");
    const hintEl = card.querySelector(".pwd-strength")
      ? card.querySelector(".pwd-strength").nextElementSibling : null;
    // 更新規則提示（取代 HTML 寫死的「至少 10 字元,含大小寫與數字」）
    newInput.placeholder = "≥ 8 字、含至少 1 大寫 1 小寫";
    function refreshStrength() {
      const g = gradePassword(newInput.value || "");
      if (bar) { bar.style.width = g.width || "0%"; bar.style.background = g.barColor; }
      if (hintEl) {
        hintEl.textContent = newInput.value ? g.hint : "規則：≥ 8 字、至少 1 大寫、1 小寫（建議含數字或特殊符號）";
        hintEl.style.color = newInput.value ? g.color : "var(--text-3)";
      }
    }
    function refreshMatch() {
      if (!confirmInput.value) {
        confirmInput.style.borderColor = "";
        return;
      }
      confirmInput.style.borderColor =
        confirmInput.value === newInput.value ? "var(--ok)" : "var(--danger)";
    }
    newInput.addEventListener("input", () => { refreshStrength(); refreshMatch(); });
    confirmInput.addEventListener("input", refreshMatch);
    refreshStrength();

    async function doChange() {
      const oldPwd = (oldInput.value || "");
      const newPwd = (newInput.value || "");
      const conf = (confirmInput.value || "");
      if (!oldPwd) { toast("請輸入目前密碼", "error"); oldInput.focus(); return; }
      if (newPwd.length < 8 || !/[A-Z]/.test(newPwd) || !/[a-z]/.test(newPwd)) {
        toast("新密碼需 ≥ 8 字、至少 1 大寫 1 小寫", "error"); newInput.focus(); return;
      }
      if (newPwd !== conf) {
        toast("兩次新密碼不一致", "error"); confirmInput.focus(); return;
      }
      if (newPwd === oldPwd) { toast("新密碼不可與舊密碼相同", "error"); return; }
      btn.disabled = true;
      try {
        const r = await api("/api/auth/change-password", {
          method: "POST",
          body: JSON.stringify({ old_password: oldPwd, new_password: newPwd }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) { toast(errMsg(j, "改密失敗"), "error"); return; }
        oldInput.value = newInput.value = confirmInput.value = "";
        Auth.clear();
        toast("密碼已更新，請以新密碼重新登入", "ok");
        setTimeout(showLoginPage, 600);
      } finally {
        btn.disabled = false;
      }
    }

    btn.addEventListener("click", (e) => { e.preventDefault(); doChange(); });
    confirmInput.addEventListener("keydown", (e) => {
      if (e.key === "Enter") { e.preventDefault(); doChange(); }
    });
  }

  // -------------------- TopBar logout（單擊頭像即登出）--------------------
  async function doLogout() {
    // 先清本地 Auth 再呼叫後端（即使後端失敗也要登出）
    // device_token（記住此裝置）刻意保留 — 下次登入可繼續跳過 2FA
    Auth.clear();
    try {
      // 用 fetch 直送，不經 api wrapper（避免被 401 redirect 邏輯干擾）
      const access = sessionStorage.getItem("kbv5._lastAccess");
      // sessionStorage 不會用上，純粹防呆；正常情況 access 已從 storage 取走
    } catch (e) {}
    try {
      await fetch("/api/auth/logout", { method: "POST" });
    } catch (e) {}
    // 為了徹底清乾淨 DOM 與所有 in-memory 狀態 → 直接 hard reload
    // 帶 ?logout=1 給下次載入提示（顯示已登出 toast）
    window.location.replace(window.location.pathname + "?logout=1");
  }
  NS.logout = doLogout;

  function wireLogout() {
    // 原 HTML topbar 右側那個門口箭頭圖示（line 7664）：
    //   <button class="icon-btn" data-page="login" title="登入頁預覽">
    // 原本只是 switchPage('login') 開登入 overlay，**不真正登出**。
    // 重新綁定為真實登出（清 token + hard reload）+ 攔截原 data-page 行為。
    const logoutBtns = document.querySelectorAll(
      'button.icon-btn[data-page="login"], [data-kbv5-logout]'
    );
    logoutBtns.forEach((el) => {
      if (el.dataset.kbv5Logout === "wired") return;
      el.dataset.kbv5Logout = "wired";
      el.title = "登出";
      // 用 capture 階段攔截，搶在原 HTML 的 data-page 委派之前
      el.addEventListener("click", (e) => {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        doLogout();
      }, true);
    });
  }

  // -------------------- session probe on load --------------------
  async function probeSession() {
    if (!Auth.access) { showLoginPage(); return; }
    const r = await fetch("/api/auth/me", {
      headers: { "Authorization": "Bearer " + Auth.access },
    });
    if (!r.ok) {
      // 嘗試一次 refresh
      const ok = await tryRefresh();
      if (!ok) { Auth.clear(); showLoginPage(); return; }
      const r2 = await fetch("/api/auth/me", {
        headers: { "Authorization": "Bearer " + Auth.access },
      });
      if (!r2.ok) { Auth.clear(); showLoginPage(); return; }
      const me = await r2.json();
      localStorage.setItem(TK_USER, JSON.stringify(me));
      hideLoginPage();
      enforcePostLoginGates();
      return;
    }
    const me = await r.json();
    localStorage.setItem(TK_USER, JSON.stringify(me));
    hideLoginPage();
    enforcePostLoginGates();
  }

  // 注入 status chip 樣式（HTML 原本沒有 status-disabled / status-locked，
  // status-pending 用 amber，這裡補上樣式統一）
  function ensureStatusChipStyle() {
    if (document.getElementById("kbv5-status-chip-style")) return;
    const st = document.createElement("style");
    st.id = "kbv5-status-chip-style";
    st.textContent =
      ".status-dot.status-pending{color:#92400e;}" +
      ".status-dot.status-pending::before{background:#f59e0b;}" +
      ".status-dot.status-disabled{color:#475569;}" +
      ".status-dot.status-disabled::before{background:#94a3b8;}" +
      ".status-dot.status-locked{color:#991b1b;}" +
      ".status-dot.status-locked::before{background:#dc2626;}" +
      ".user-table .row-check{display:block!important;visibility:hidden;}" +
      ".user-table.is-batch .row-check{visibility:visible;}";
    document.head.appendChild(st);
  }

  // ============================================================
  // ADMIN — 使用者管理（L3）
  // ============================================================
  const ROLE_LABEL = {
    admin: "管理者", senior_manager: "高階主管",
    manager: "主管", user: "一般使用者",
  };
  const ROLE_BADGE = {
    admin: "role-admin", senior_manager: "role-senior",
    manager: "role-manager", user: "role-user",
  };

  function wireAdmin() {
    ensureStatusChipStyle();
    const adminPage = document.querySelector('main.page[data-page="admin"]');
    if (!adminPage) return;
    // 監聽進入 admin 頁
    const obs = new MutationObserver(() => {
      if (adminPage.classList.contains("is-active")) loadAdminUsers();
    });
    obs.observe(adminPage, { attributes: true, attributeFilter: ["class"] });
    if (adminPage.classList.contains("is-active")) loadAdminUsers();

    wireUserCreateModal();
    wireBatchBar();
    wireAdminFilters();
    wireAuditPane(adminPage);
    wirePermissionsPane(adminPage);
    wireUserDetailPage();
    // Phase5-F：admin 使用者管理頁注入「批次匯入 .md」按鈕（mockup 無此入口）
    const csvBtn = Array.from(adminPage.querySelectorAll(".btn"))
      .find((b) => (b.textContent || "").includes("批次匯入 CSV"));
    // Phase5-E 修：mockup 上「批次匯入 CSV」帶 data-page="user-import" 但 topbar 外
    // 的 data-page 不被自動接管，補上 click handler
    if (csvBtn && !csvBtn.dataset.kbv5CsvImport) {
      csvBtn.dataset.kbv5CsvImport = "1";
      csvBtn.addEventListener("click", (e) => {
        e.preventDefault(); e.stopPropagation();
        if (typeof window.switchPage === "function") window.switchPage("user-import");
      });
    }
    if (csvBtn && !adminPage.querySelector("[data-kbv5-bulk-md-btn]")) {
      const mdBtn = document.createElement("button");
      mdBtn.dataset.kbv5BulkMdBtn = "1";
      mdBtn.className = "btn btn--ghost btn--sm";
      mdBtn.innerHTML = '📦 批次匯入 .md';
      mdBtn.style.marginLeft = "4px";
      mdBtn.addEventListener("click", () => openBulkImportMdModal());
      csvBtn.parentNode.insertBefore(mdBtn, csvBtn.nextSibling);
    }
    // Phase5-E：admin 使用者頁的「匯出」按鈕（mockup 寫死，無 handler）
    // 找搜尋區（admin-filters）內含「匯出」文字的 btn-ghost
    const exportBtn = Array.from(adminPage.querySelectorAll(".btn--ghost, .btn--sm"))
      .find((b) => (b.textContent || "").trim() === "匯出"
                  || (b.textContent || "").trim() === "匯出 CSV");
    if (exportBtn && !exportBtn.dataset.kbv5Export) {
      exportBtn.dataset.kbv5Export = "1";
      exportBtn.addEventListener("click", async () => {
        const r = await fetch("/api/users/export", {
          headers: { "Authorization": "Bearer " + (Auth.access || "") },
        });
        if (!r.ok) { toast("匯出失敗（需 admin/senior/manager 權限）", "error"); return; }
        const blob = await r.blob();
        const a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = "users_export.csv";
        a.click();
        toast("已匯出使用者清單", "ok");
      });
    }
    wireDepartmentsAdmin(adminPage);
    wireCrossDeptAdmin(adminPage);
    wireTemplatesAdmin(adminPage);
    wireRulesAdmin(adminPage);
    wirePiiAdminTabs(adminPage);
    wireAiAdmin(adminPage);
  }

  // ===== L10：AI Provider / 模型對照 / 用量 =====
  // 原則：**不重建 mockup 結構**，只把真實資料填進既有卡片/modal/表格 + 接上按鈕。
  const _AI_NAME_KEY = [   // mockup 卡片名稱關鍵字 → 後端 provider key
    { match: "Anthropic", key: "claude" },
    { match: "OpenAI", key: "openai" },
    { match: "Gemini", key: "gemini" },
  ];
  const _AI_DISPLAY = { claude: "Anthropic", openai: "OpenAI", gemini: "Google Gemini" };
  const _AI_LOGO = { claude: "A", openai: "O", gemini: "G" };
  let _aiStatus = null;       // 最近一次 provider_status
  let _aiEditingKey = "claude";

  function _mergeVerdict(ms) {
    if (!ms) return "獨立新增";
    return ms.action === "merge" ? "建議合併" : "建議關聯";
  }

  function _fmtTok(n) { return Pure.fmtTok(n); }   // 純邏輯抽到 pure.js（已測）

  function _cardKey(card) {
    const nm = card.querySelector(".provider-card__name");
    const txt = nm ? nm.textContent : "";
    const hit = _AI_NAME_KEY.find((m) => txt.indexOf(m.match) >= 0);
    return hit ? hit.key : null;
  }

  function wireAiAdmin(adminPage) {
    if (adminPage.dataset.kbv5Ai === "1") return;
    adminPage.dataset.kbv5Ai = "1";
    // 覆寫 mockup 的簡單開關，改成載入真實資料的版本
    window.openProviderEditModal = openProviderEditModal;
    wireProviderModal();
    const provBtn = adminPage.querySelector('.admin-tab[data-tab-target="ai-provider"]');
    const bindBtn = adminPage.querySelector('.admin-tab[data-tab-target="ai-binding"]');
    if (provBtn) provBtn.addEventListener("click", refreshAiProviderPane);
    if (bindBtn) bindBtn.addEventListener("click", refreshAiBindingPane);
    const pane = adminPage.querySelector('.admin-pane[data-tab="ai-provider"]');
    if (pane && pane.classList.contains("is-active")) refreshAiProviderPane();
  }

  async function _fetchAiState() {
    const [ps, us] = await Promise.all([
      api("/api/admin/ai/provider"), api("/api/admin/ai/usage?days=30"),
    ]);
    if (!ps.ok) return null;
    _aiStatus = await ps.json();
    return { status: _aiStatus, usage: us.ok ? await us.json() : null };
  }

  // 既有卡片就地填真實資料（不動結構）
  async function refreshAiProviderPane() {
    const pane = document.querySelector('.admin-pane[data-tab="ai-provider"]');
    if (!pane) return;
    const st = await _fetchAiState();
    if (!st) return;
    const { status, usage } = st;
    _aiUsage = usage; _aiStatusCache = status;   // 給委派 handler 用
    _installAiDelegation();
    const byProv = {};
    (usage && usage.by_provider || []).forEach((r) => { byProv[r.provider] = r; });

    const head = pane.querySelector("h2");
    const sub = head && head.parentElement ? head.parentElement.querySelector("p") : null;
    if (sub) {
      const cost = usage ? usage.totals.cost_usd.toFixed(2) : "0.00";
      const ready = Object.values(status.keys).filter(Boolean).length;
      const hr = usage ? Math.round(usage.totals.cache_hit_rate * 100) : 0;
      sub.innerHTML = `模型供應商管理 · ${ready} 個 Provider 已設金鑰 · ` +
        `近 30 天花費 <b style="color:var(--text-1);">$ ${cost}</b> · 快取命中率 <b style="color:var(--text-1);">${hr}%</b>` +
        (status.using_local ? ` · <b style="color:var(--warn);">目前使用本地模型（主 Provider 未設金鑰）</b>` : "");
    }

    pane.querySelectorAll(".provider-card").forEach((card) => {
      const key = _cardKey(card);
      if (!key) {
        // ⑩#10：本地模型(Ollama) 無後端用量資料 → 中性化寫死的「$ 0.00 / 2026/03/20 停用」假值
        const lbadge = card.querySelector(".provider-card__status");
        if (lbadge) {
          lbadge.className = "provider-card__status " +
            (status.using_local ? "provider-card__status--active" : "provider-card__status--off");
          lbadge.textContent = status.using_local ? "● 使用中（本地備援）" : "○ 本地備援";
        }
        card.querySelectorAll(".provider-card__stat-value").forEach((s) => {
          s.textContent = "—"; s.style.color = "var(--text-3)";
        });
        const lq = card.querySelector(".provider-card__quota div, .provider-card__quota");
        if (lq) lq.textContent = "本地模型備援（主 Provider 未設金鑰時自動啟用）· 無雲端用量計費";
        return;
      }
      const ready = !!status.keys[key];
      const active = status.active === key;
      const up = byProv[key];
      const badge = card.querySelector(".provider-card__status");
      if (badge) {
        badge.className = "provider-card__status " + (ready ? "provider-card__status--active" : "provider-card__status--warn");
        badge.textContent = active ? "● 使用中" : (ready ? "● 已設定" : "⚠ 待設定金鑰");
      }
      const meta = card.querySelector(".provider-card__meta");
      if (meta) meta.textContent = "API · " + ((status.models && status.models[key]) || "—");
      card.classList.toggle("is-primary", active);
      const nameEl = card.querySelector(".provider-card__name");
      if (nameEl) {
        let pb = nameEl.querySelector(".provider-card__primary-badge");
        if (active && !pb) {
          pb = document.createElement("span");
          pb.className = "provider-card__primary-badge";
          pb.textContent = "主要";
          nameEl.appendChild(document.createTextNode(" "));
          nameEl.appendChild(pb);
        } else if (!active && pb) { pb.remove(); }
      }
      const stats = card.querySelectorAll(".provider-card__stat-value");
      if (stats.length >= 3) {
        stats[0].textContent = up ? Number(up.calls || 0).toLocaleString() : "0";
        const tok = up ? (Number(up.in_tok || 0) + Number(up.out_tok || 0)) : 0;
        stats[1].textContent = _fmtTok(tok);
        stats[2].textContent = "$ " + (up ? (up.cost / 1000) : 0).toFixed(2);
        stats[0].style.color = ""; stats[1].style.color = ""; stats[2].style.color = "";
      }
      // #3：金鑰設定後同步更新配額/警告區（原本只在卡片角落顯示「尚未驗證」橘字）
      const quota = card.querySelector(".provider-card__quota");
      if (quota) {
        quota.innerHTML = ready
          ? '<div style="font-size:11px;color:var(--ok);">✓ API Key 已設定' + (active ? " · 主要 Provider" : "") + "</div>"
          : '<div style="font-size:11px;color:var(--warn);">⚠ 尚未設定 API Key · 點「編輯設定」完成</div>';
      }
      card.onclick = () => openProviderEditModal(key);
      card.querySelectorAll(".provider-card__footer button").forEach((b) => {
        const label = (b.textContent || "").trim();
        if (label.indexOf("編輯") >= 0) b.onclick = (e) => { e.stopPropagation(); openProviderEditModal(key); };
        else if (label.indexOf("連線測試") >= 0 || label.indexOf("健康檢查") >= 0) b.onclick = (e) => { e.stopPropagation(); _testProvider(key, b); };
        else if (label.indexOf("查看文件") >= 0) b.onclick = (e) => { e.stopPropagation(); window.open(_AI_DOCS[key], "_blank", "noopener"); };
        else if (label.indexOf("查看詳細用量") >= 0) b.onclick = (e) => { e.stopPropagation(); _openUsageDetail(usage, key); };
      });
    });

    // §27.3 用量趨勢圖接真實資料（取代假圖）+ 底部各家總計
    _renderUsageChart(pane, usage);
    // 頂部按鈕：用量匯出 / 健康檢查（原本是死按鍵）
    _wireAiTopButtons(pane, status, usage);
  }

  // ---- 用量趨勢圖：用真實 daily_by_provider 畫分組 bar + 底部真實總計 ----
  const _PROV_COLOR = { claude: "#D97757", openai: "#10A37F", gemini: "#4285F4" };
  const _PROV_NAME = { claude: "Anthropic", openai: "OpenAI", gemini: "Gemini" };
  function _renderUsageChart(pane, usage) {
    const chart = pane.querySelector(".usage-chart");
    if (!chart || !usage) return;
    // 底部各家總計（真實 by_provider；總計用 totals）
    const costOf = {};
    (usage.by_provider || []).forEach((r) => { costOf[r.provider] = (r.cost || 0) / 1000; });
    chart.querySelectorAll(".usage-total-item").forEach((it) => {
      const name = (it.querySelector(".usage-total-item__name")?.textContent || "").trim();
      const val = it.querySelector(".usage-total-item__value");
      if (!val) return;
      if (name.indexOf("總計") >= 0) val.textContent = "$ " + (usage.totals.cost_usd || 0).toFixed(2);
      else {
        const key = Object.keys(_PROV_NAME).find((k) => _PROV_NAME[k] === name);
        val.textContent = "$ " + (key ? (costOf[key] || 0) : 0).toFixed(2);
      }
    });
    // 用真實每日資料畫 bar（以 cost 為高度；無 cost 用 calls）
    const days = {};
    (usage.daily_by_provider || []).forEach((r) => {
      (days[r.day] = days[r.day] || {})[r.provider] = (r.cost || 0) / 1000 || (r.calls || 0) * 0.0001;
    });
    const dayKeys = Object.keys(days).sort();
    const provs = ["claude", "openai", "gemini"];
    let maxV = 0;
    dayKeys.forEach((d) => provs.forEach((p) => { maxV = Math.max(maxV, days[d][p] || 0); }));
    if (maxV <= 0) maxV = 1;
    const svg = chart.querySelector(".usage-chart__svg");
    if (svg) {
      const W = 800, H = 200, n = Math.max(dayKeys.length, 1), gw = W / n, bw = Math.max(1.5, gw / 4);
      let bars = '<line x1="0" y1="50" x2="800" y2="50" stroke="var(--border)" stroke-dasharray="2,3"/>'
        + '<line x1="0" y1="100" x2="800" y2="100" stroke="var(--border)" stroke-dasharray="2,3"/>'
        + '<line x1="0" y1="150" x2="800" y2="150" stroke="var(--border)" stroke-dasharray="2,3"/>';
      dayKeys.forEach((d, i) => {
        provs.forEach((p, j) => {
          const v = days[d][p] || 0;
          const h = (v / maxV) * (H - 20);
          const x = i * gw + j * bw + 2;
          bars += `<rect x="${x.toFixed(1)}" y="${(H - h).toFixed(1)}" width="${bw.toFixed(1)}" height="${h.toFixed(1)}" fill="${_PROV_COLOR[p]}"/>`;
        });
      });
      svg.innerHTML = bars;
    }
  }

  // 委派綁定：mockup 會在 refresh 後重建卡片/按鈕，per-element onclick 會被洗掉；
  // 改用 document 層委派（一次性），靠 AI Provider pane is-active + 按鈕文字 + 卡片 key 分派。
  let _aiDelegated = false, _aiUsage = null, _aiStatusCache = null;
  function _installAiDelegation() {
    if (_aiDelegated) return;
    _aiDelegated = true;
    document.addEventListener("click", function (e) {
      const aiPane = document.querySelector('.admin-pane[data-tab="ai-provider"]');
      if (!aiPane || !aiPane.classList.contains("is-active")) return;  // 只在 AI Provider 頁生效
      const b = e.target.closest("button");
      if (!b) return;
      // 時間範圍鈕（7天/30天/90天/今年）→ 重抓對應天數的用量並重畫
      const rng = b.closest(".usage-chart__range") ? b : null;
      if (rng && rng.dataset.range) {
        e.preventDefault(); e.stopPropagation();
        const now = new Date();
        const map = { "7d": 7, "30d": 30, "90d": 90,
          "ytd": Math.max(1, Math.ceil((now - new Date(now.getFullYear(), 0, 1)) / 86400000)) };
        const days = map[rng.dataset.range] || 30;
        rng.parentElement.querySelectorAll("button").forEach((x) => x.classList.toggle("is-active", x === rng));
        _reloadUsageChart(days);
        return;
      }
      const label = (b.textContent || "").trim();
      const card = b.closest(".provider-card");
      const key = card ? _cardKey(card) : null;
      if (label === "用量匯出") { e.preventDefault(); e.stopPropagation(); _exportUsageCsv(_aiUsage); }
      else if (label === "查看詳細用量") { e.preventDefault(); e.stopPropagation(); _openUsageDetail(_aiUsage, key); }
      else if (label === "健康檢查") { e.preventDefault(); e.stopPropagation(); if (key) _testProvider(key, b); else _aiHealthCheckAll(_aiStatusCache, b); }
      else if (label === "連線測試" && key) { e.preventDefault(); e.stopPropagation(); _testProvider(key, b); }
    }, true);
  }

  async function _reloadUsageChart(days) {
    try {
      const r = await api(`/api/admin/ai/usage?days=${days}`);
      if (!r.ok) return;
      const usage = await r.json();
      _aiUsage = usage;
      const pane = document.querySelector('.admin-pane[data-tab="ai-provider"]');
      if (pane) _renderUsageChart(pane, usage);
    } catch (_e) { /* 靜默 */ }
  }

  function _wireAiTopButtons(pane, status, usage) {
    // 頂部按鈕可能在 pane 外（區段 header）→ 往上找最近的容器，排除卡片內按鈕
    const root = pane.parentElement || pane;
    root.querySelectorAll("button").forEach((b) => {
      if (b.closest(".provider-card")) return;   // 卡片內的健康檢查由 footer 邏輯處理
      const label = (b.textContent || "").trim();
      if (label === "用量匯出" && !b.dataset.kbv5) { b.dataset.kbv5 = "1"; b.onclick = () => _exportUsageCsv(usage); }
      else if (label === "健康檢查" && !b.dataset.kbv5) { b.dataset.kbv5 = "1"; b.onclick = () => _aiHealthCheckAll(status, b); }
    });
  }

  function _exportUsageCsv(usage) {
    if (!usage) { toast("無用量資料", "warn"); return; }
    const rows = [["類別", "項目", "請求數", "Tokens", "費用USD"]];
    (usage.by_provider || []).forEach((r) =>
      rows.push(["provider", r.provider, r.calls || 0, (r.in_tok || 0) + (r.out_tok || 0), ((r.cost || 0) / 1000).toFixed(4)]));
    (usage.by_department || []).forEach((r) =>
      rows.push(["department", r.department, r.calls || 0, "", ((r.cost || 0) / 1000).toFixed(4)]));
    (usage.daily || []).forEach((r) =>
      rows.push(["daily", r.day, r.calls || 0, (r.in_tok || 0) + (r.out_tok || 0), ((r.cost || 0) / 1000).toFixed(4)]));
    const csv = "" + rows.map((r) => r.map((c) => `"${String(c).replace(/"/g, '""')}"`).join(",")).join("\n");
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = `ai_usage_${usage.days}d.csv`;
    a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
    toast("已匯出用量 CSV", "ok");
  }

  async function _aiHealthCheckAll(status, btn) {
    const keys = Object.keys((status && status.keys) || {}).filter((k) => status.keys[k]);
    if (!keys.length) { toast("尚無已設金鑰的 Provider 可檢查", "warn"); return; }
    if (btn) btn.disabled = true;
    const lines = [];
    for (const k of keys) {
      try {
        const r = await api(`/api/admin/ai/provider/${k}/test`, { method: "POST" });
        const j = await r.json().catch(() => ({}));
        lines.push(`${_PROV_NAME[k] || k}：${j.ok ? "✅ 正常" : "❌ " + (j.error || j.detail || "失敗")}`);
      } catch (e) { lines.push(`${_PROV_NAME[k] || k}：❌ 連線錯誤`); }
    }
    if (btn) btn.disabled = false;
    toast("健康檢查：\n" + lines.join("\n"), lines.some((l) => l.indexOf("❌") >= 0) ? "warn" : "ok");
  }

  function _openUsageDetail(usage, key) {
    if (!usage) { toast("無用量資料", "warn"); return; }
    document.querySelectorAll("[data-kbv5-usage-modal]").forEach((n) => n.remove());
    const ov = document.createElement("div");
    ov.dataset.kbv5UsageModal = "1";
    ov.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;";
    const provRows = (usage.by_provider || []).map((r) =>
      `<tr><td>${_PROV_NAME[r.provider] || r.provider}</td><td style="text-align:right;">${(r.calls || 0).toLocaleString()}</td><td style="text-align:right;">${_fmtTok((r.in_tok || 0) + (r.out_tok || 0))}</td><td style="text-align:right;">$ ${((r.cost || 0) / 1000).toFixed(4)}</td></tr>`).join("");
    const deptRows = (usage.by_department || []).map((r) =>
      `<tr><td>${escapeHtml(r.department)}</td><td style="text-align:right;">${(r.calls || 0).toLocaleString()}</td><td style="text-align:right;">$ ${((r.cost || 0) / 1000).toFixed(4)}</td></tr>`).join("");
    const card = document.createElement("div");
    card.style.cssText = "background:var(--surface);border-radius:12px;padding:22px 26px;max-width:560px;width:92%;max-height:80vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3);";
    card.innerHTML =
      `<div style="font-size:16px;font-weight:700;margin-bottom:4px;">📊 詳細用量（近 ${usage.days} 天）</div>` +
      `<div style="font-size:12px;color:var(--text-3);margin-bottom:14px;">總請求 ${(usage.totals.calls || 0).toLocaleString()} · 總費用 $ ${(usage.totals.cost_usd || 0).toFixed(4)} · 快取命中 ${Math.round((usage.totals.cache_hit_rate || 0) * 100)}%</div>` +
      `<div style="font-size:13px;font-weight:600;margin:8px 0 4px;">依 Provider</div>` +
      `<table style="width:100%;font-size:12px;border-collapse:collapse;"><thead><tr style="color:var(--text-3);"><th style="text-align:left;">Provider</th><th style="text-align:right;">請求</th><th style="text-align:right;">Tokens</th><th style="text-align:right;">費用</th></tr></thead><tbody>${provRows}</tbody></table>` +
      `<div style="font-size:13px;font-weight:600;margin:14px 0 4px;">依部門</div>` +
      `<table style="width:100%;font-size:12px;border-collapse:collapse;"><thead><tr style="color:var(--text-3);"><th style="text-align:left;">部門</th><th style="text-align:right;">請求</th><th style="text-align:right;">費用</th></tr></thead><tbody>${deptRows || '<tr><td colspan=3 style="color:var(--text-3);">（無資料）</td></tr>'}</tbody></table>` +
      `<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:16px;"><button class="btn btn--quiet btn--sm" data-usage-close>關閉</button></div>`;
    ov.appendChild(card);
    document.body.appendChild(ov);
    ov.addEventListener("click", (e) => { if (e.target === ov) ov.remove(); });
    card.querySelector("[data-usage-close]").addEventListener("click", () => ov.remove());
  }

  // #6：各家官方 API 文件
  const _AI_DOCS = {
    claude: "https://docs.anthropic.com/",
    openai: "https://platform.openai.com/docs",
    gemini: "https://ai.google.dev/gemini-api/docs",
  };

  async function _testProvider(key, btn) {
    if (btn) { btn.disabled = true; }
    const r = await api(`/api/admin/ai/provider/${key}/test`, { method: "POST" });
    const j = await r.json().catch(() => ({}));
    if (btn) btn.disabled = false;
    if (j.ok) toast(`${_AI_DISPLAY[key]} 連線正常（${j.model}, ${j.latency_ms}ms）`, "success");
    else if (j.error === "not_configured") toast(`${_AI_DISPLAY[key]} 尚未設定 API Key`, "error");
    else toast(`${_AI_DISPLAY[key]} 連線失敗：${j.error || r.status}`, "error");
  }

  // === Provider 編輯 modal：填入既有 modal 的真實資料 + 存檔 ===
  function _modalFields() {
    const modal = document.getElementById("provider-edit-modal");
    if (!modal) return null;
    const fs = modal.querySelectorAll(".form-fieldset");
    const basic = fs[0], quota = fs[2], adv = fs[3];
    const texts = basic ? basic.querySelectorAll('input.form-input:not([type="password"])') : [];
    return {
      modal,
      title: modal.querySelector(".modal__title"),
      logo: modal.querySelector(".modal__title .provider-card__logo"),
      name: texts[0] || null,
      type: basic ? basic.querySelector("select.form-input") : null,
      endpoint: texts[1] || null,
      apiKey: basic ? basic.querySelector('input[type="password"]') : null,
      keyHint: basic ? basic.querySelector(".form-group__hint") : null,
      chips: modal.querySelector(".chip-group"),
      budget: quota ? quota.querySelector("input.form-input") : null,
      threshold: quota ? quota.querySelector('input[type="range"]') : null,
      thresholdLabel: quota ? quota.querySelector('input[type="range"]') : null,
      primary: adv ? adv.querySelector('input[type="checkbox"]') : null,
      save: Array.from(modal.querySelectorAll(".modal__footer button")).find((b) => b.textContent.trim() === "儲存變更"),
      test: Array.from(modal.querySelectorAll(".modal__footer button")).find((b) => b.textContent.trim() === "連線測試"),
    };
  }

  function wireProviderModal() {
    const f = _modalFields();
    if (!f || !f.modal || f.modal.dataset.kbv5Wired === "1") return;
    f.modal.dataset.kbv5Wired = "1";
    if (f.threshold) {
      const lbl = f.threshold.parentElement ? f.threshold.parentElement.querySelector("span") : null;
      f.threshold.addEventListener("input", () => { if (lbl) lbl.textContent = f.threshold.value + "%"; });
    }
    // 顯示/隱藏 API Key
    const showBtn = Array.from(f.modal.querySelectorAll("button")).find((b) => (b.textContent || "").indexOf("顯示") >= 0);
    if (showBtn && f.apiKey) showBtn.addEventListener("click", () => {
      f.apiKey.type = f.apiKey.type === "password" ? "text" : "password";
    });
    if (f.save) f.save.addEventListener("click", _saveProviderModal);
    if (f.test) f.test.addEventListener("click", () => _testProvider(_aiEditingKey, f.test));
  }

  async function openProviderEditModal(key) {
    if (typeof key !== "string" || !_AI_DISPLAY[key]) {
      key = _aiStatus ? _aiStatus.active : "claude";
    }
    _aiEditingKey = key;
    if (!_aiStatus) { await _fetchAiState(); }
    const f = _modalFields();
    if (!f || !f.modal) return;
    const st = _aiStatus || {};
    const ksrc = (st.key_source && st.key_source[key]) || "none";
    const meta = (st.meta && st.meta[key]) || {};

    if (f.title) {
      // 更新標題文字（保留 logo span）
      f.title.childNodes.forEach((n) => { if (n.nodeType === 3) n.textContent = ""; });
      f.title.appendChild(document.createTextNode(" 編輯 Provider：" + _AI_DISPLAY[key]));
    }
    if (f.logo) f.logo.textContent = _AI_LOGO[key];
    if (f.name) { f.name.value = _AI_DISPLAY[key]; f.name.readOnly = true; }
    if (f.type) {
      const typeText = { claude: "Anthropic API", openai: "OpenAI API", gemini: "Google Gemini API" }[key];
      Array.from(f.type.options).forEach((o) => {
        if (o.text === typeText || o.value === typeText) f.type.value = o.value;
      });
      f.type.disabled = true;  // 三大家固定，不可改類型
    }
    if (f.endpoint) {
      f.endpoint.value = (st.endpoints && st.endpoints[key]) || "";
      f.endpoint.readOnly = true;
      // Endpoint 由系統固定（§line868），移除「必填」標記 + 提示
      const grp = f.endpoint.closest(".form-group");
      const lbl = grp ? grp.querySelector(".form-group__label") : null;
      if (lbl) lbl.classList.remove("form-group__label--required");
      let hint = grp ? grp.querySelector(".form-group__hint") : null;
      if (grp && !hint) {
        hint = document.createElement("div");
        hint.className = "form-group__hint";
        grp.appendChild(hint);
      }
      if (hint) hint.textContent = "系統固定（資安：只連官方網址），無需也不可修改";
    }
    if (f.apiKey) {
      f.apiKey.value = "";
      f.apiKey.type = "password";
      // env 優先於 UI：環境變數提供時鎖定欄位，避免誤以為可在此覆寫
      f.apiKey.readOnly = ksrc === "env";
      f.apiKey.placeholder = ksrc === "none" ? "尚未設定 — 請貼上 API Key"
        : (ksrc === "env" ? "（由環境變數提供，優先使用，無法在此覆寫）" : "（已設定，留空則不變更）");
    }
    if (f.keyHint) {
      f.keyHint.innerHTML = ksrc === "none"
        ? '<span style="color:var(--warn);">⚠ 未設定</span>'
        : (ksrc === "env" ? '環境變數提供（優先於後台設定）· <span style="color:var(--ok);">✓ 有效</span>'
                          : '已於後台設定 · <span style="color:var(--ok);">✓ 有效</span>');
    }
    // #4：可用模型選擇移到「模型對照」分頁（此處不再重複設定），隱藏整個 fieldset。
    if (f.chips) {
      const fieldset = f.chips.closest(".form-fieldset");
      if (fieldset) fieldset.style.display = "none";
    }
    if (f.budget && meta.budget != null) f.budget.value = meta.budget;
    if (f.threshold) {
      if (meta.threshold != null) f.threshold.value = meta.threshold;
      const lbl = f.threshold.parentElement ? f.threshold.parentElement.querySelector("span") : null;
      if (lbl) lbl.textContent = f.threshold.value + "%";
    }
    if (f.primary) f.primary.checked = st.active === key;
    // 進階：移除與 §9.1 鐵則衝突的「PII 去識別化後送 API」選項（使用者裁決拿掉；
    // 鐵則為命中黑名單即完全不送 AI，不存在「去識別化後再送」）。
    Array.from(f.modal.querySelectorAll("label")).forEach((lb) => {
      if ((lb.textContent || "").indexOf("去識別化") >= 0) lb.style.display = "none";
    });
    f.modal.classList.add("is-open");
  }

  async function _saveProviderModal() {
    const f = _modalFields();
    if (!f) return;
    const key = _aiEditingKey;
    const body = { meta: {} };  // 模型選擇移至「模型對照」分頁，這裡不送 models
    if (f.primary && f.primary.checked) body.provider = key;
    if (f.apiKey && f.apiKey.value.trim()) body.api_keys = { [key]: f.apiKey.value.trim() };
    const m = {};
    if (f.budget && f.budget.value) m.budget = Number(f.budget.value) || 0;
    if (f.threshold) m.threshold = Number(f.threshold.value) || 0;
    body.meta[key] = m;
    const r = await api("/api/admin/ai/provider", { method: "PUT", body: JSON.stringify(body) });
    if (r.ok) {
      _aiStatus = await r.json().catch(() => _aiStatus);
      toast("Provider 設定已儲存", "success");
      if (f.modal) f.modal.classList.remove("is-open");
      refreshAiProviderPane();
    } else {
      toast("儲存失敗（" + r.status + "）", "error");
    }
  }

  // 模型對照：依後端 features 重繪每行（保留 .binding-table/.binding-row 版面）。
  // cloud=可綁雲端模型（同把 key 不同 model）；local=本地固定；planned=未實作鎖定。
  const _FEATURE_ICON = {
    format: ["📝", "#FEF3C7", "#92400E"], variant: ["🔤", "#E0E7FF", "#3730A3"],
    overlap: ["🔀", "#DDD6FE", "#5B21B6"], embedding: ["🔍", "#DCFCE7", "#166534"],
    pii_ai: ["⚠", "#FEE2E2", "#991B1B"], qa: ["💬", "#FCE7F3", "#9D174D"],
  };

  function _cloudModelOptions(status, current) {
    return Object.keys(status.available_models || {}).map((prov) => {
      const opts = status.available_models[prov].map((m) =>
        `<option value="${escapeHtml(m)}"${m === current ? " selected" : ""}>${escapeHtml(m)}</option>`).join("");
      return `<optgroup label="${escapeHtml(_AI_DISPLAY[prov] || prov)}">${opts}</optgroup>`;
    }).join("");
  }

  async function refreshAiBindingPane() {
    const pane = document.querySelector('.admin-pane[data-tab="ai-binding"]');
    if (!pane) return;
    const table = pane.querySelector(".binding-table");
    const st = await _fetchAiState();
    if (!st || !table) return;
    const status = st.status;
    const features = status.features || [];

    // 自動合併門檻設定（可調）：插在表格上方，idempotent
    let bar = pane.querySelector("#kbv5-merge-th-bar");
    if (!bar) {
      bar = document.createElement("div");
      bar.id = "kbv5-merge-th-bar";
      bar.style.cssText = "display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;" +
        "padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);";
      table.parentNode.insertBefore(bar, table);
    }
    const mTh = status.merge_threshold != null ? status.merge_threshold : 0.85;
    const lTh = status.link_threshold != null ? status.link_threshold : 0.70;
    bar.innerHTML =
      '<span style="font-size:13px;font-weight:600;color:var(--text-1);">自動合併相似度門檻</span>' +
      `<input id="kbv5-merge-th" type="number" min="0" max="1" step="0.01" value="${mTh}" style="width:90px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;">` +
      '<span style="font-size:11px;color:var(--text-3);">相似度 ≥ 此值 → 提交時自動合併；介於 ' +
      `<b>${lTh}</b> ~ 此值 → 只建議「關聯」。數值越低越容易合併（建議 0.75–0.85）。</span>` +
      '<button id="kbv5-merge-th-save" class="btn btn--primary btn--sm" style="margin-left:auto;">儲存門檻</button>';
    const saveTh = bar.querySelector("#kbv5-merge-th-save");
    saveTh.onclick = async () => {
      const v = parseFloat(bar.querySelector("#kbv5-merge-th").value);
      if (isNaN(v) || v < 0 || v > 1) { toast("門檻需為 0~1 之間", "error"); return; }
      const r = await api("/api/admin/ai/provider", { method: "PUT", body: JSON.stringify({ merge_threshold: v }) });
      if (r.ok) { toast("已更新自動合併門檻為 " + v, "success"); _aiStatus = await r.json().catch(() => _aiStatus); }
      else toast("儲存失敗（" + r.status + "）", "error");
    };

    table.innerHTML =
      '<div class="binding-row binding-row__head"><div>AI 功能</div><div>說明</div>' +
      '<div>使用模型</div><div>類型 / 狀態</div><div style="text-align:right;">單次成本</div></div>' +
      features.map((f) => {
        const ic = _FEATURE_ICON[f.key] || ["•", "#E5E7EB", "#374151"];
        let modelCell; let statusCell;
        if (f.type === "cloud") {
          modelCell = `<select class="binding-row__model-select" data-bind-task="${f.key}">${_cloudModelOptions(status, f.model)}</select>`;
          statusCell = f.ready
            ? '<span style="color:var(--ok);font-size:11px;">☁ 雲端 · 金鑰就緒</span>'
            : '<span style="color:var(--warn);font-size:11px;">☁ 雲端 · 該模型供應商未設金鑰</span>';
        } else if (f.type === "local") {
          modelCell = `<span style="font-size:11px;color:var(--text-2);font-family:var(--font-mono);">${escapeHtml(f.model || "本地")}</span>`;
          statusCell = `<span style="color:var(--text-3);font-size:11px;">🖥 ${escapeHtml(f.note || "本地")}</span>`;
        } else {  // planned
          modelCell = '<span style="font-size:11px;color:var(--text-3);">—</span>';
          statusCell = '<span style="color:var(--text-3);font-size:11px;">尚未實作</span>';
        }
        const cost = f.type === "cloud" ? "依長度浮動" : (f.type === "local" ? "$ 0（本地）" : "—");
        return `<div class="binding-row"${f.type === "planned" ? ' style="opacity:.55;"' : ""}>
          <div class="binding-row__task">
            <div class="binding-row__task-icon" style="background:${ic[1]};color:${ic[2]};">${ic[0]}</div>
            <div><div class="binding-row__task-name">${escapeHtml(f.label)}</div></div>
          </div>
          <div class="binding-row__task-desc" style="font-size:11px;color:var(--text-3);line-height:1.4;">${escapeHtml(f.desc || "")}</div>
          <div>${modelCell}</div>
          <div>${statusCell}</div>
          <div class="binding-row__cost" style="text-align:right;">${cost}</div>
        </div>`;
      }).join("");

    const saveBtn = Array.from(pane.querySelectorAll("button")).find((b) => b.textContent.trim() === "儲存變更");
    if (saveBtn && !saveBtn.dataset.kbv5Wired) {
      saveBtn.dataset.kbv5Wired = "1";
      saveBtn.addEventListener("click", async () => {
        const bind = {};
        pane.querySelectorAll("[data-bind-task]").forEach((s) => { bind[s.dataset.bindTask] = s.value; });
        const r = await api("/api/admin/ai/provider", { method: "PUT", body: JSON.stringify({ bindings: bind }) });
        if (r.ok) toast("模型對照已儲存（同把 API Key 可呼叫不同模型）", "success");
        else toast("儲存失敗（" + r.status + "）", "error");
      });
    }
    const resetBtn = Array.from(pane.querySelectorAll("button")).find((b) => b.textContent.trim() === "恢復預設");
    if (resetBtn && !resetBtn.dataset.kbv5Wired) {
      resetBtn.dataset.kbv5Wired = "1";
      resetBtn.addEventListener("click", async () => {
        const bind = {};
        features.filter((f) => f.type === "cloud").forEach((f) => { bind[f.key] = ""; });
        // 空字串會被後端忽略；改以送出主 Provider 預設達成「恢復預設」
        const reset = {};
        features.filter((f) => f.type === "cloud").forEach((f) => { reset[f.key] = status.models[status.active]; });
        const r = await api("/api/admin/ai/provider", { method: "PUT", body: JSON.stringify({ bindings: reset }) });
        if (r.ok) { toast("已恢復為主 Provider 預設模型", "success"); refreshAiBindingPane(); }
      });
    }

    // ⑩#11：底部「成本估算 $320~380」原為寫死假值 → 改用近 30 天實際花費（_aiUsage）或中性文案
    const tipBlock = Array.from(pane.querySelectorAll("div")).find(
      (d) => (d.textContent || "").includes("成本估算") && (d.textContent || "").includes("預估月花費"));
    if (tipBlock) {
      const inner = tipBlock.querySelector("div") || tipBlock;
      if (_aiUsage && _aiUsage.totals) {
        const c = Number(_aiUsage.totals.cost_usd || 0).toFixed(2);
        inner.innerHTML = `<b style="color:var(--text-1);">成本估算</b>：近 30 天實際 AI 花費 ` +
          `<b style="color:var(--text-1);">$ ${c}</b>（依綁定模型與流量浮動）。<br>` +
          `若想降低成本，可將「自動標籤建議」改用 claude-haiku-latest 或 gemini-flash-lite-latest、或將「合併建議」改為按需觸發。`;
      } else {
        inner.innerHTML = `<b style="color:var(--text-1);">成本估算</b>：開啟「AI Provider」分頁可載入近 30 天實際花費。<br>` +
          `若想降低成本，可將「自動標籤建議」改用較輕量模型、或將「合併建議」改為按需觸發。`;
      }
    }
  }

  // ===== 稽核日誌後台（mockup data-tab="audit"，PRD §10.10）=====
  function wireAuditPane(adminPage) {
    const pane = adminPage.querySelector('.admin-pane[data-tab="audit"]');
    if (!pane || pane.dataset.kbv5 === "1") return;
    pane.dataset.kbv5 = "1";
    // 進入分頁時載入
    const tabBtn = adminPage.querySelector('.admin-tab[data-tab-target="audit"]');
    if (tabBtn) {
      tabBtn.addEventListener("click", () => setTimeout(() => loadAuditPane(pane, true), 0));
    }
    // ⚠ 真因修正：mockup demo script 對「每個 .facet-item」設了 onclick=toggle('is-checked')，
    // 會與下方本 handler 同時觸發 → 多選 toggle 互相抵消（看似失效）。清掉那些 onclick。
    pane.querySelectorAll(".facet-item").forEach((it) => { it.onclick = null; });
    // 左側 facet 勾選：事件委派。冪等註冊（先移除既有再掛）。
    const _MULTI_FACET_GROUPS = ["事件類型", "風險等級", "結果"];
    if (pane._kbv5FacetHandler) pane.removeEventListener("click", pane._kbv5FacetHandler);
    const facetHandler = (e) => {
      const item = e.target.closest(".facet-item");
      if (!item || !pane.contains(item)) return;
      const nameEl = item.querySelector(".facet-item__name");
      if (!nameEl || (nameEl.textContent || "").includes("無資料")) return;  // 佔位列/非選項
      const group = item.closest(".facet-group");
      if (!group) return;
      const title = (group.querySelector(".facet-group__title") || {}).textContent || "";
      if (_MULTI_FACET_GROUPS.includes(title)) {
        item.classList.toggle("is-checked");                                   // 多選：純 toggle
      } else {
        // 單選（時間範圍 / 使用者）
        const wasChecked = item.classList.contains("is-checked");
        group.querySelectorAll(".facet-item").forEach((x) => x.classList.remove("is-checked"));
        if (!(title === "使用者" && wasChecked)) item.classList.add("is-checked");
      }
      loadAuditPane(pane);  // 重新拉資料套用過濾
    };
    pane.addEventListener("click", facetHandler);
    pane._kbv5FacetHandler = facetHandler;
    // 已是當前分頁則立即載
    if (pane.classList.contains("is-active")) loadAuditPane(pane, true);
  }

  async function loadAuditPane(pane, rebuildFacets) {
    // flash 修復：先同步清掉 mockup 寫死的假稽核列，再抓資料
    pane.querySelectorAll(".audit-row").forEach((el) => el.remove());
    // 1. 統計卡（4 個 KPI）
    const stats = pane.querySelectorAll(".audit-stat");
    try {
      const r = await api("/api/admin/audit-log/stats");
      if (r.ok) {
        const j = await r.json();
        const setStat = (i, value) => {
          const v = stats[i] && stats[i].querySelector(".audit-stat__value");
          if (!v) return;
          // 保留 delta span，只改前面文字
          const delta = v.querySelector(".audit-stat__delta");
          v.childNodes.forEach((n) => { if (n.nodeType === 3) n.remove(); });
          v.insertBefore(document.createTextNode(String(value) + " "), delta || null);
        };
        setStat(0, j.today_events);
        setStat(1, j.high_risk_7d);
        setStat(2, j.failed_login_7d);
        setStat(3, j.confidential_access_7d);
        // 清掉 mock 的 ↑/↓ delta（無真實對比資料）
        pane.querySelectorAll(".audit-stat__delta").forEach((n) => n.remove());
      }
    } catch (e) {}

    // ⑩#9：左側 facet 計數 + 使用者清單由真實資料重算。
    // 僅在進入分頁時重建（避免每次過濾重載都重建使用者列、洗掉勾選狀態並造成競態）。
    if (rebuildFacets) _updateAuditFacetCounts(pane);

    // 2. 時間軸：清 mock + 帶當前 facet 拉資料
    const timeline = pane.querySelector(".audit-timeline");
    if (!timeline) return;
    const params = _readAuditFacets(pane);
    const q = new URLSearchParams(params).toString();
    const r2 = await api("/api/admin/audit-log?" + q + (q ? "&" : "") + "limit=200");
    if (!r2.ok) return;
    const j2 = await r2.json();
    // 清 mock rows + day headers
    timeline.innerHTML = "";
    // 依日期分組（使用者本地時區，非 UTC）
    const byDay = {};
    (j2.items || []).forEach((it) => {
      const day = _localDate(it.timestamp);
      (byDay[day] = byDay[day] || []).push(it);
    });
    const days = Object.keys(byDay).sort().reverse();
    if (days.length === 0) {
      timeline.innerHTML = '<div style="padding:24px;text-align:center;color:var(--text-3);font-size:13px;">（無符合條件的稽核紀錄）</div>';
    }
    days.forEach((day) => {
      const header = document.createElement("div");
      header.className = "audit-day-header";
      header.innerHTML = `🕒 ${escapeHtml(day)} <span class="audit-day-header__count">${byDay[day].length} 筆</span>`;
      timeline.appendChild(header);
      byDay[day].forEach((it) => {
        const row = document.createElement("div");
        row.className = "audit-row" + (it.risk === "high" ? " is-high-risk" : "");
        const time = _localTime(it.timestamp);
        const init = (it.display_name || it.username || "?").slice(0, 1).toUpperCase();
        const detailStr = it.detail ? (typeof it.detail === "string" ? it.detail : JSON.stringify(it.detail)) : "";
        const result = it.result === "fail" ? " ✕"
          : it.result === "blocked" ? " ⛔" : "";
        const riskLbl = it.risk === "high" ? "高" : it.risk === "med" ? "中" : "低";
        const typeMap = { auth: "驗證", read: "讀取", edit: "編輯", delete: "刪除",
                           admin: "管理", security: "安全事件" };
        row.innerHTML =
          `<div class="audit-row__time">${escapeHtml(time)}</div>` +
          `<div class="audit-row__user">` +
            `<div class="avatar" style="width:22px;height:22px;font-size:10px;">${escapeHtml(init)}</div>` +
            `<span class="audit-row__user-name">${escapeHtml(it.display_name || it.username || "(已刪除)")}</span>` +
          `</div>` +
          `<div class="audit-row__action">${escapeHtml(it.action)}${result}` +
            (detailStr ? ` <span style="color:var(--text-3);">· ${escapeHtml(detailStr.slice(0, 80))}</span>` : "") +
          `</div>` +
          `<span class="audit-row__type audit-type--${escapeHtml(it.category)}">${escapeHtml(typeMap[it.category] || it.category)}</span>` +
          `<span class="audit-row__risk audit-row__risk--${escapeHtml(it.risk)}">${riskLbl}</span>`;
        timeline.appendChild(row);
      });
    });

    // 副標：共 N 筆
    const sub = pane.querySelector("h2");
    if (sub && sub.nextElementSibling) {
      sub.nextElementSibling.textContent = `記錄所有系統操作 · 共 ${j2.total.toLocaleString()} 筆記錄`;
    }

    // 隱藏 mockup 的「匯出 CSV / 即時監控」按鈕（D97 + 後續再做）
    pane.querySelectorAll("h2").forEach((h) => {
      const actions = h.closest("div")?.parentElement?.querySelector('div[style*="gap:8px"]');
      if (actions) actions.style.display = "none";
    });
  }

  // ⑩#9：以近 500 筆稽核（不套 facet 過濾）真實 tally 各 facet 計數 + 重建使用者清單
  async function _updateAuditFacetCounts(pane) {
    const r = await api("/api/admin/audit-log?limit=500").catch(() => null);
    if (!r || !r.ok) return;
    const j = await r.json();
    const items = j.items || [];
    const { cat, risk, res, d7, d30, d90, topUsers, capped } =
      Pure.tallyAuditFacets(items, Date.now());
    const fmt = (n) => (capped ? n + "+" : String(n));
    const setCount = (group, matcher) => {
      const g = Array.from(pane.querySelectorAll(".facet-group"))
        .find((x) => (x.querySelector(".facet-group__title") || {}).textContent === group);
      if (!g) return;
      g.querySelectorAll(".facet-item").forEach((item) => {
        const nm = (item.querySelector(".facet-item__name") || {}).textContent || "";
        const cnt = item.querySelector(".facet-item__count");
        if (!cnt) return;
        const v = matcher(nm);
        if (v != null) cnt.textContent = fmt(v);
      });
    };
    setCount("時間範圍", (nm) => nm.includes("7") ? d7 : nm.includes("30") ? d30 : nm.includes("90") ? d90 : (nm.includes("自訂") ? null : null));
    setCount("事件類型", (nm) => nm.includes("驗證") || nm.includes("登入") ? (cat.auth || 0)
      : nm.includes("讀取") ? (cat.read || 0) : nm.includes("編輯") || nm.includes("提交") ? (cat.edit || 0)
        : nm.includes("刪除") ? (cat.delete || 0) : nm.includes("管理") ? (cat.admin || 0)
          : nm.includes("安全") ? (cat.security || 0) : null);
    setCount("風險等級", (nm) => nm.includes("高") ? (risk.high || 0) : nm.includes("中") ? (risk.med || 0) : nm.includes("低") ? (risk.low || 0) : null);
    setCount("結果", (nm) => nm.includes("成功") ? res.success : nm.includes("失敗") ? res.fail : null);
    // 使用者 facet：用真實 top 用戶取代寫死名單
    const ug = Array.from(pane.querySelectorAll(".facet-group"))
      .find((x) => (x.querySelector(".facet-group__title") || {}).textContent === "使用者");
    if (ug) {
      const top = topUsers;
      // 名稱→user_id 對照（供點選 facet 後以 user_id 過濾）
      const uidByName = {};
      items.forEach((it) => {
        const nm = it.display_name || it.username || "";
        if (nm && it.user_id != null && uidByName[nm] == null) uidByName[nm] = it.user_id;
      });
      ug.querySelectorAll(".facet-item, .facet-clear").forEach((n) => n.remove());
      const title = ug.querySelector(".facet-group__title");
      top.forEach(([nm, c]) => {
        const row = document.createElement("div");
        row.className = "facet-item";
        if (uidByName[nm] != null) row.dataset.uid = String(uidByName[nm]);
        row.innerHTML = `<div class="facet-checkbox"></div><span class="facet-item__name">${escapeHtml(nm)}</span><span class="facet-item__count">${fmt(c)}</span>`;
        ug.appendChild(row);
      });
      if (!top.length && title) {
        const empty = document.createElement("div");
        empty.className = "facet-item";
        empty.innerHTML = '<span class="facet-item__name" style="color:var(--text-3);">（無資料）</span>';
        ug.appendChild(empty);
      }
    }
  }

  // facet 名稱 → 後端代碼對照
  function _auditFacetCode(group, name) {
    const n = name || "";
    if (group === "事件類型") {
      if (n.includes("驗證") || n.includes("登入")) return "auth";
      if (n.includes("讀取")) return "read";
      if (n.includes("編輯") || n.includes("提交")) return "edit";
      if (n.includes("刪除")) return "delete";
      if (n.includes("管理")) return "admin";
      if (n.includes("安全")) return "security";
    } else if (group === "風險等級") {
      if (n.includes("高")) return "high";
      if (n.includes("中")) return "med";
      if (n.includes("低")) return "low";
    } else if (group === "結果") {
      if (n.includes("成功")) return "success";
      if (n.includes("失敗")) return "fail";
    }
    return null;
  }

  // 多選群組 → CSV 參數：全勾→不帶(不過濾)；部分→帶勾選；全不勾→帶 __none__(顯示空)
  function _readMultiFacet(pane, group, paramKey, params) {
    const g = Array.from(pane.querySelectorAll(".facet-group"))
      .find((x) => (x.querySelector(".facet-group__title") || {}).textContent === group);
    if (!g) return;
    const all = Array.from(g.querySelectorAll(".facet-item"))
      .filter((it) => _auditFacetCode(group, (it.querySelector(".facet-item__name") || {}).textContent));
    if (!all.length) return;
    const checked = all.filter((it) => it.classList.contains("is-checked"));
    if (checked.length === all.length) return;             // 全勾 = 不過濾
    if (checked.length === 0) { params[paramKey] = "__none__"; return; }
    params[paramKey] = checked
      .map((it) => _auditFacetCode(group, (it.querySelector(".facet-item__name") || {}).textContent))
      .filter(Boolean).join(",");
  }

  function _readAuditFacets(pane) {
    const params = {};
    // 時間範圍（單選）
    const timeG = Array.from(pane.querySelectorAll(".facet-group"))
      .find((g) => (g.querySelector(".facet-group__title") || {}).textContent === "時間範圍");
    if (timeG) {
      const sel = timeG.querySelector(".facet-item.is-checked .facet-item__name");
      if (sel && !sel.textContent.includes("自訂")) {
        const days = sel.textContent.includes("90") ? 90
          : sel.textContent.includes("30") ? 30 : 7;
        params.since = new Date(Date.now() - days * 86400000).toISOString();
      }
    }
    // 事件類型 / 風險等級 / 結果（多選）
    _readMultiFacet(pane, "事件類型", "category", params);
    _readMultiFacet(pane, "風險等級", "risk", params);
    _readMultiFacet(pane, "結果", "result", params);
    // 使用者（單選，用 data-uid）
    const userG = Array.from(pane.querySelectorAll(".facet-group"))
      .find((g) => (g.querySelector(".facet-group__title") || {}).textContent === "使用者");
    if (userG) {
      const sel = userG.querySelector(".facet-item.is-checked");
      if (sel && sel.dataset.uid) params.user_id = sel.dataset.uid;
    }
    return params;
  }

  // ===== 權限矩陣後台（mockup data-tab="permissions"，PRD §2）=====
  function wirePermissionsPane(adminPage) {
    const pane = adminPage.querySelector('.admin-pane[data-tab="permissions"]');
    if (!pane || pane.dataset.kbv5 === "1") return;
    pane.dataset.kbv5 = "1";
    // 隱藏 mockup「匯出 CSV / 編輯規則」按鈕（規則由 code 唯一定義，無 admin 編輯介面 §7.3 YAGNI）
    pane.querySelectorAll(".btn").forEach((b) => {
      const t = (b.textContent || "").trim();
      if (t === "匯出 CSV" || t === "編輯規則") b.style.display = "none";
    });
    // 入頁時載入 + 切 visibility tab
    const tabBtn = adminPage.querySelector('.admin-tab[data-tab-target="permissions"]');
    if (tabBtn) {
      tabBtn.addEventListener("click", () => setTimeout(() => loadPermissionsPane(pane), 0));
    }
    if (pane.classList.contains("is-active")) loadPermissionsPane(pane);
    // visibility 切換
    pane.querySelectorAll(".perm-vis-tabs [data-vis]").forEach((b) => {
      b.addEventListener("click", () => {
        pane.querySelectorAll(".perm-vis-tabs [data-vis]").forEach((x) => x.classList.remove("is-active"));
        b.classList.add("is-active");
        loadPermissionsPane(pane, b.dataset.vis);
      });
    });
  }

  const _ROLE_HEADERS_ZH = {
    user: "一般使用者", manager: "主管", senior_manager: "高階主管",
    admin: "管理者", guest: "外部訪客",
  };

  async function loadPermissionsPane(pane, visibility) {
    visibility = visibility || (pane.querySelector(".perm-vis-tabs .is-active") || {}).dataset?.vis || "department";
    const r = await api("/api/admin/permission-matrix?visibility=" + encodeURIComponent(visibility));
    if (!r.ok) return;
    const j = await r.json();
    const table = pane.querySelector(".perm-matrix__table");
    if (!table) return;
    // 重新渲染 thead + tbody（保 SVG icon 用簡易 emoji 取代以省 markup）
    const ICON = {
      eye: "👁", pencil: "✎", trash: "🗑", "trash-2": "💥", check: "✓",
      shield: "🛡", share: "🔗", paperclip: "📎", clock: "🕒",
      rotate: "↻", settings: "⚙",
    };
    const thead = '<thead><tr><th style="text-align:left;width:200px;">動作 \\ 角色</th>' +
      j.roles.map((r) => `<th style="width:120px;">${escapeHtml(_ROLE_HEADERS_ZH[r] || r)}</th>`).join("") +
      "</tr></thead>";
    const rows = Object.entries(j.matrix).map(([_action, info]) => {
      const cells = j.roles.map((role) => {
        const c = info.cells[role] || { kind: "deny" };
        const cls = "perm-cell-" + c.kind;
        const text = c.kind === "allow" ? "✓" : c.kind === "deny" ? "✕"
          : c.kind === "stepup" ? "需密碼" : (c.hint && c.hint.length <= 4 ? c.hint : "條件");
        const title = c.hint ? ` title="${escapeHtml(c.hint)}"` : "";
        return `<td class="${cls}"${title}>${escapeHtml(text)}</td>`;
      }).join("");
      const icon = ICON[info.icon] || "•";
      return `<tr><th><span class="perm-matrix__row-icon">${icon}</span> ${escapeHtml(info.label)}</th>${cells}</tr>`;
    }).join("");
    table.innerHTML = thead + "<tbody>" + rows + "</tbody>";

    // 圖例下方提示「當前可見度」副標
    const legendNote = pane.querySelector(".perm-legend .perm-legend__item:last-child");
    if (legendNote) {
      const visLabel = {
        public: "公開", department: "部門內部", selected_departments: "自選部門",
        restricted: "限定人員", confidential: "高度機密",
      }[visibility] || visibility;
      legendNote.textContent = `※ 此表為「${visLabel}」可見度，切換頂部 tab 可看其他可見度規則`;
    }
  }

  // ===== 使用者詳情頁（mockup data-page="user-detail"）=====
  NS.openUserDetail = function (uid) {
    NS._userDetailId = uid;
    window.switchPage("user-detail");
  };

  function wireUserDetailPage() {
    const page = document.querySelector('main.page[data-page="user-detail"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";
    const obs = new MutationObserver(() => {
      if (page.classList.contains("is-active") && NS._userDetailId) {
        loadUserDetail(NS._userDetailId);
      }
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active") && NS._userDetailId) loadUserDetail(NS._userDetailId);

    // 左 nav 點擊：切 section
    page.querySelectorAll(".userdetail-nav__item").forEach((btn) => {
      btn.addEventListener("click", () => {
        const target = btn.dataset.section;
        page.querySelectorAll(".userdetail-nav__item").forEach((b) => b.classList.remove("is-active"));
        btn.classList.add("is-active");
        page.querySelectorAll(".userdetail-section").forEach((s) => s.classList.remove("is-active"));
        const sec = page.querySelector(`.userdetail-section[data-section="${target}"]`);
        if (sec) sec.classList.add("is-active");
      });
    });

    // 「← 返回」按鈕
    const backBtn = Array.from(page.querySelectorAll(".btn"))
      .find((b) => (b.textContent || "").includes("返回使用者管理"));
    if (backBtn) backBtn.onclick = (e) => {
      e.preventDefault(); e.stopPropagation();
      window.switchPage("admin");
    };
    // 編輯按鈕暫關（編輯走 admin 列表的 ✎）
    page.querySelectorAll(".page__actions .btn").forEach((b) => {
      if ((b.textContent || "").includes("編輯")) b.style.display = "none";
    });
  }

  async function loadUserDetail(uid) {
    const page = document.querySelector('main.page[data-page="user-detail"]');
    if (!page) return;

    // 1. 拉 user
    const r = await api(`/api/users/${uid}`);
    if (!r.ok) {
      toast(r.status === 404 ? "找不到此使用者" : "讀取失敗", "error");
      return;
    }
    const u = await r.json();

    // 2. 左側 profile 卡
    const avatar = page.querySelector(".userdetail-side__avatar");
    if (avatar) avatar.textContent = (u.display_name || u.username || "?").slice(0, 1).toUpperCase();
    const name = page.querySelector(".userdetail-side__name");
    if (name) name.textContent = u.display_name || u.username;
    const idEl = page.querySelector(".userdetail-side__id");
    if (idEl) idEl.textContent = "@" + u.username;
    const status = page.querySelector(".userdetail-side__status");
    if (status) {
      const tags = [];
      tags.push(u.is_active ? "● 已開通" : "● 停用");
      if (u.totp_enabled) tags.push("2FA");
      if (u.is_deleted) tags.push("已刪除");
      status.textContent = tags.join(" · ");
      status.style.color = u.is_active && !u.is_deleted ? "var(--ok)" : "var(--text-3)";
    }

    // 3. 基本資料 section：清掉 mockup info-item，重新依 API 鋪
    const profileSec = page.querySelector('.userdetail-section[data-section="profile"]');
    if (profileSec) {
      const grid = profileSec.querySelector(".info-grid");
      if (grid) {
        const ROLE_LBL = { admin: "管理者", senior_manager: "高階主管", manager: "主管", user: "一般使用者", guest: "訪客" };
        const items = [
          ["姓名", u.display_name || u.username],
          ["使用者帳號", u.username],
          ["Email", u.email || "—"],
          ["分機", u.extension || "—"],
          ["系統角色", ROLE_LBL[u.role] || u.role],
          ["主要部門", u.department || "—"],
          ["建立時間", _localDate(u.created_at) || "—"],
          ["最後登入", u.last_login ? reviewTimeLabel(u.last_login) : "—"],
          ["兩階段驗證", u.totp_enabled ? "● 已啟用 · TOTP App" : "○ 未啟用"],
          ["強制改密碼", u.force_password_change ? "● 是" : "—"],
          ["帳號狀態", u.is_active ? "已開通" : "停用"],
          ["失敗登入次數", String(u.failed_login_count ?? 0)],
        ];
        grid.innerHTML = items.map(([k, v]) =>
          `<div class="info-item"><div class="info-item__label">${escapeHtml(k)}</div>` +
          `<div class="info-item__value">${escapeHtml(String(v))}</div></div>`
        ).join("");
      }
    }

    // 4. 部門與角色 section
    const deptSec = page.querySelector('.userdetail-section[data-section="dept"]');
    if (deptSec) {
      // 清掉硬編，注入簡化版
      deptSec.querySelectorAll("h4 + div").forEach((d) => d.remove());
      const heads = deptSec.querySelectorAll("h4");
      const ROLE_LBL = { admin: "管理者", senior_manager: "高階主管", manager: "主管", user: "一般使用者", guest: "訪客" };
      // 主要部門 (heads[0])
      if (heads[0]) {
        const main = document.createElement("div");
        main.style.cssText = "display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--accent-bg);border:1px solid var(--accent);border-radius:var(--r-md);margin-bottom:20px;";
        main.innerHTML = `<div style="width:36px;height:36px;background:var(--accent);color:white;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;">⚙</div>` +
          `<div style="flex:1;"><div style="font-size:var(--fs-md);font-weight:600;">${escapeHtml(u.department || "（未設）")}</div>` +
          `<div style="font-size:11px;color:var(--text-2);">隸屬於此部門</div></div>` +
          `<span style="font-size:11px;background:var(--accent);color:white;padding:2px 8px;border-radius:10px;font-weight:600;">主要</span>`;
        heads[0].after(main);
      }
      // 兼任部門 (heads[1])
      if (heads[1]) {
        const sec = (u.secondary_departments || []);
        if (!sec.length) {
          const empty = document.createElement("div");
          empty.style.cssText = "padding:14px;font-size:12px;color:var(--text-3);background:var(--surface-2);border-radius:var(--r-md);margin-bottom:20px;";
          empty.textContent = "（無兼任部門）";
          heads[1].after(empty);
        } else {
          sec.forEach((d) => {
            const item = document.createElement("div");
            item.style.cssText = "display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface-2);border-radius:var(--r-md);margin-bottom:8px;";
            item.innerHTML = `<div style="width:30px;height:30px;background:#E0F2FE;color:#075985;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;">●</div>` +
              `<div style="flex:1;"><div style="font-size:var(--fs-sm);font-weight:600;">${escapeHtml(d)}</div>` +
              `<div style="font-size:11px;color:var(--text-3);">兼任 · 可存取部門內部文件</div></div>`;
            heads[1].after(item);
          });
        }
      }
      // 系統角色 (heads[2])
      if (heads[2]) {
        const r3 = document.createElement("div");
        r3.style.cssText = "display:flex;align-items:center;gap:14px;padding:16px;background:linear-gradient(90deg,var(--warn-bg),var(--surface));border:1px solid #FCD34D;border-radius:var(--r-md);margin-bottom:8px;";
        r3.innerHTML = `<div style="width:40px;height:40px;background:var(--warn);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;">✓</div>` +
          `<div style="flex:1;"><div style="font-size:var(--fs-md);font-weight:700;">${escapeHtml(ROLE_LBL[u.role] || u.role)}</div>` +
          `<div style="font-size:11px;color:var(--text-2);margin-top:2px;">RBAC 角色，影響可審核 / 編輯範圍</div></div>`;
        heads[2].after(r3);
      }
    }

    // 5. 取得權限 section：簡化顯示 (依 role 概要)
    const permsSec = page.querySelector('.userdetail-section[data-section="perms"]');
    if (permsSec) {
      const lists = permsSec.querySelectorAll(".perm-list");
      lists.forEach((l) => l.innerHTML = "");
      const list = lists[0];
      if (list) {
        const role = u.role;
        const perms = [
          { name: "讀取部門內部文件", ok: ["admin", "senior_manager", "manager", "user"].includes(role) },
          { name: "建立 / 編輯自己的文件", ok: ["admin", "senior_manager", "manager", "user"].includes(role) },
          { name: "編輯本部門其他文件", ok: ["admin", "senior_manager", "manager"].includes(role) },
          { name: "審核本部門提交", ok: ["admin", "manager"].includes(role) },
          { name: "變更可見度（需密碼）", ok: ["admin", "senior_manager", "manager"].includes(role) },
          { name: "軟刪除（需密碼）", ok: ["admin", "senior_manager", "manager"].includes(role) },
          { name: "永久刪除（需密碼）", ok: ["admin", "senior_manager"].includes(role) },
          { name: "管理權限後台", ok: ["admin", "senior_manager"].includes(role) },
        ];
        list.innerHTML = perms.map((p) =>
          `<div class="perm-list__row"><div class="perm-list__name">• ${escapeHtml(p.name)}</div>` +
          `<div class="perm-list__status perm-list__status--${p.ok ? "allow" : "deny"}">${p.ok ? "✓ 允許" : "✕ 拒絕"}</div></div>`
        ).join("");
      }
    }

    // 6. 活動歷史 + 7. 稽核紀錄：拉 audit-log filtered by user_id
    const actR = await api(`/api/admin/audit-log?user_id=${uid}&limit=100`).catch(() => null);
    if (actR && actR.ok) {
      const aj = await actR.json();
      const items = aj.items || [];
      // 更新左 nav 計數
      const actNav = page.querySelector('.userdetail-nav__item[data-section="activity"] .userdetail-nav__count');
      if (actNav) actNav.textContent = String(items.length);
      const audNav = page.querySelector('.userdetail-nav__item[data-section="audit"] .userdetail-nav__count');
      if (audNav) audNav.textContent = String(items.filter((it) => it.risk === "high" || it.category === "security").length);

      // 活動歷史 section（最近 20 筆，所有 category）
      const actSec = page.querySelector('.userdetail-section[data-section="activity"]');
      if (actSec) {
        _clearSectionMock(actSec);   // ⑩#3：清 mockup 假 tab/contrib-row/footer，保留標題
        const list = _injectListBox(actSec);
        list.innerHTML = "";
        items.slice(0, 20).forEach((it) => {
          const row = document.createElement("div");
          row.style.cssText = "padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;";
          row.innerHTML = `<span style="color:var(--text-3);font-family:var(--font-mono);font-size:11px;">${escapeHtml((it.timestamp || "").slice(0, 19).replace("T", " "))}</span>` +
            ` · <b>${escapeHtml(it.action)}</b>` +
            (it.detail ? ` <span style="color:var(--text-3);">${escapeHtml(JSON.stringify(it.detail).slice(0, 80))}</span>` : "");
          list.appendChild(row);
        });
        if (!items.length) list.innerHTML = '<div style="padding:20px;text-align:center;font-size:12px;color:var(--text-3);">尚無活動紀錄</div>';
      }
      // 稽核紀錄 section（只高風險 + 安全事件）
      const audSec = page.querySelector('.userdetail-section[data-section="audit"]');
      if (audSec) {
        _clearSectionMock(audSec);   // ⑩#4：清 mockup 假 audit-row，保留標題
        const list = _injectListBox(audSec);
        list.innerHTML = "";
        const high = items.filter((it) => it.risk === "high" || it.category === "security");
        high.slice(0, 50).forEach((it) => {
          const row = document.createElement("div");
          row.style.cssText = "padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;background:" + (it.risk === "high" ? "#FEF2F2" : "transparent") + ";";
          row.innerHTML = `<span style="color:var(--text-3);font-family:var(--font-mono);font-size:11px;">${escapeHtml((it.timestamp || "").slice(0, 19).replace("T", " "))}</span>` +
            ` · <b>${escapeHtml(it.action)}</b>` +
            ` <span class="audit-row__risk audit-row__risk--${it.risk}">${it.risk}</span>` +
            (it.ip_address ? ` · ${escapeHtml(it.ip_address)}` : "");
          list.appendChild(row);
        });
        if (!high.length) list.innerHTML = '<div style="padding:20px;text-align:center;font-size:12px;color:var(--text-3);">無高風險或安全事件</div>';
      }
    }
  }

  function _injectListBox(section) {
    const box = document.createElement("div");
    box.dataset.activityList = "1";
    box.style.cssText = "background:var(--surface-2);border-radius:var(--r-md);overflow:hidden;margin-top:12px;";
    section.appendChild(box);
    return box;
  }

  // ⑩#3/#4：移除 section 內所有 mockup 假資料子元素，只保留標題（避免真假並存）
  function _clearSectionMock(section) {
    Array.from(section.children).forEach((ch) => {
      if (ch.classList && ch.classList.contains("userdetail-section__title")) return;
      ch.remove();
    });
  }

  // 通用：注入一個 admin 分頁（按鈕 + pane），回傳 {pane}；onShow 在進入時呼叫
  function _injectAdminTab(adminPage, key, label, onShow) {
    const tabs = adminPage.querySelector(".admin-tabs");
    if (!tabs) return null;
    if (adminPage.querySelector(`.admin-pane[data-tab="${key}"]`)) return null;
    const tabBtn = document.createElement("button");
    tabBtn.className = "admin-tab";
    tabBtn.dataset.tabTarget = key;
    tabBtn.textContent = label;
    tabs.appendChild(tabBtn);
    const pane = document.createElement("div");
    pane.className = "admin-pane";
    pane.dataset.tab = key;
    const lastPane = Array.from(adminPage.querySelectorAll(".admin-pane")).pop();
    if (lastPane && lastPane.parentNode) lastPane.parentNode.insertBefore(pane, lastPane.nextSibling);
    else adminPage.appendChild(pane);
    tabBtn.addEventListener("click", () => {
      adminPage.querySelectorAll(".admin-tab").forEach((b) => b.classList.remove("is-active"));
      tabBtn.classList.add("is-active");
      adminPage.querySelectorAll(".admin-pane").forEach((p) => p.classList.remove("is-active"));
      pane.classList.add("is-active");
      if (typeof onShow === "function") onShow(pane);
    });
    adminPage.querySelectorAll(".admin-tab[data-tab-target]").forEach((b) => {
      if (b === tabBtn) return;
      b.addEventListener("click", () => { tabBtn.classList.remove("is-active"); pane.classList.remove("is-active"); });
    });
    return pane;
  }

  function _adminListShell(title, addLabel) {
    return `<div class="admin-toolbar"><div class="admin-toolbar__left"></div>` +
      (addLabel ? `<div class="admin-toolbar__right"><button class="btn btn--primary btn--sm" data-add>+ ${escapeHtml(addLabel)}</button></div>` : "") +
      `</div><div class="user-table" data-list></div>`;
  }

  // 6 個 PII 子功能收進「多層 PII 防護」單一分頁，左側子選單切換
  let _piiSub = null;
  const _PII_SUBS = [
    { key: "rules", label: "偵測規則", isRules: true },   // 第一項：精確規則 + 語意主題（已併入）
    { key: "samples", label: "機密樣本", add: "上傳樣本", onAdd: () => openSampleModal(), load: loadSamplesPane, list: true },
    { key: "whitelist", label: "白名單", add: "新增白名單", onAdd: () => openWhitelistModal(), load: loadWhitelistPane, list: true },
    { key: "variants", label: "變體詞典", load: renderVariantsTable },
    { key: "appeals", label: "誤判申訴", load: loadAppealsPane, custom: '<div class="admin-toolbar"><div class="admin-toolbar__left"></div></div><div class="user-table" data-list></div>' },
    { key: "metrics", label: "PII 統計", load: loadMetricsPane, custom: '<div data-metrics style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px;"></div><div data-metrics2 style="margin-top:16px;"></div>' },
  ];

  function wirePiiAdminTabs(adminPage) {
    if (adminPage.dataset.kbv5Pii === "1") return;
    adminPage.dataset.kbv5Pii = "1";
    const isAdminSenior = ["admin", "senior_manager"].includes((Auth.user && Auth.user.role) || "");
    const pane = _injectAdminTab(adminPage, "pii", "多層 PII 防護", () => _selectPiiSub(_PII_SUBS[0].key, isAdminSenior));
    if (!pane) return;
    pane.innerHTML =
      `<div style="display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:start;">` +
      `<div class="pii-subnav" style="display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--border);padding-right:8px;"></div>` +
      `<div data-piisub style="min-width:0;"></div></div>`;
    // 偵測規則併入本頁 → 隱藏原頂層「偵測規則 (PII)」分頁按鈕
    const rulesTabBtn = adminPage.querySelector('.admin-tab[data-tab-target="rules"]');
    if (rulesTabBtn) rulesTabBtn.style.display = "none";
    const nav = pane.querySelector(".pii-subnav");
    _piiSub = pane.querySelector("[data-piisub]");
    _PII_SUBS.forEach((s) => {
      const b = document.createElement("button");
      b.type = "button"; b.dataset.k = s.key; b.textContent = s.label;
      b.style.cssText = "text-align:left;padding:9px 12px;border:0;background:transparent;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text-2);";
      b.addEventListener("click", () => _selectPiiSub(s.key, isAdminSenior));
      nav.appendChild(b);
    });
  }

  function _selectPiiSub(key, isAdminSenior) {
    const pane = document.querySelector('.admin-pane[data-tab="pii"]');
    if (!pane || !_piiSub) return;
    pane.querySelectorAll(".pii-subnav button").forEach((b) => {
      const on = b.dataset.k === key;
      b.style.background = on ? "var(--accent-bg,#e0f2fe)" : "transparent";
      b.style.color = on ? "var(--accent,#009BCB)" : "var(--text-2)";
      b.style.fontWeight = on ? "600" : "400";
    });
    const s = _PII_SUBS.find((x) => x.key === key);
    if (!s) return;
    // 偵測規則：重用既有 rules pane（移進子內容區顯示），不重建 UI
    const rulesPane = document.querySelector('.admin-pane[data-tab="rules"]');
    const adminPg = document.querySelector('main.page[data-page="admin"]');
    if (s.isRules) {
      _piiSub.innerHTML = "";
      if (rulesPane) {
        rulesPane.classList.add("is-active");      // 強制顯示（脫離原本 tab 控制）
        _piiSub.appendChild(rulesPane);
        if (typeof loadDetectionRules === "function") loadDetectionRules();
        _runPiiTest();
      }
      return;
    }
    // 切到其他子項：若 rules pane 還寄生在子內容區 → 移回 admin 頁並隱藏
    if (rulesPane && _piiSub.contains(rulesPane) && adminPg) {
      rulesPane.classList.remove("is-active");
      adminPg.appendChild(rulesPane);
    }
    if (s.list) {
      _piiSub.innerHTML = _adminListShell(s.label, isAdminSenior ? s.add : "");
      const a = _piiSub.querySelector("[data-add]"); if (a) a.onclick = s.onAdd;
    } else if (s.custom) {
      _piiSub.innerHTML = s.custom;
    }
    s.load(_piiSub);
  }

  // ----- 誤判申訴 -----
  const APPEAL_STATUS = { pending: "待審", approved: "已通過", rejected: "已駁回" };
  async function loadAppealsPane(pane) {
    pane = pane || _piiSub;
    const r = await api("/api/admin/false-positives");
    if (!r.ok) { pane.querySelector("[data-list]").innerHTML = `<div style="padding:24px;text-align:center;color:var(--text-3);">${r.status === 403 ? "權限不足" : "載入失敗"}</div>`; return; }
    const list = await r.json();
    const left = pane.querySelector(".admin-toolbar__left");
    const pend = list.filter((a) => a.status === "pending").length;
    if (left) left.innerHTML = `共 <b style="color:var(--text-1);">${list.length}</b> 件 · 待審 <b style="color:var(--warn);">${pend}</b>`;
    const isAdminSenior = ["admin", "senior_manager"].includes((Auth.user && Auth.user.role) || "");
    const table = await _fillList(pane, list, [
      { h: "申訴者", w: "minmax(100px,1fr)", render: (a) => escapeHtml(a.display_name || a.username || "?") },
      { h: "命中", w: "minmax(140px,1.4fr)", render: (a) => `層${a.layer} ${escapeHtml(a.matched_rule || "")}${a.similarity ? `（${a.similarity}）` : ""}<div style="font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${escapeHtml((a.text_snippet || "").slice(0, 40))}</div>` },
      { h: "理由", w: "minmax(120px,1.4fr)", render: (a) => `<span style="font-size:12px;">${escapeHtml(a.user_reason || "—")}</span>` },
      { h: "狀態", w: "80px", render: (a) => `<span class="status-dot ${a.status === "pending" ? "status-pending" : a.status === "approved" ? "status-active" : "status-disabled"}">${APPEAL_STATUS[a.status]}</span>` },
      { h: "操作", w: "minmax(140px,1.2fr)", render: (a) => (a.status === "pending" && isAdminSenior) ? `<div class="row-actions" style="justify-content:flex-start;"><button title="檢視" data-act="view" data-id="${a.id}">👁</button></div>` : "—" },
    ], "目前沒有申訴");
    if (table) table.querySelectorAll("button[data-act]").forEach((b) => b.addEventListener("click", () => {
      const a = list.find((x) => x.id === parseInt(b.dataset.id, 10));
      openAppealReviewModal(a);
    }));
  }
  function openAppealReviewModal(a) {
    const m = _kbModal(
      `<div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;"><div style="font-size:15px;font-weight:600;color:#0b1f33;">誤判申訴審核</div><button id="ar-x" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button></div>` +
      `<div style="padding:18px 22px;font-size:13px;color:#334155;">` +
      `<div><b>命中：</b>層 ${a.layer} ${escapeHtml(a.matched_rule || "")}${a.similarity ? `（相似度 ${a.similarity}）` : ""}</div>` +
      `<div style="margin-top:8px;"><b>申訴理由：</b>${escapeHtml(a.user_reason || "（未填）")}</div>` +
      `<div style="margin-top:8px;"><b>內容片段：</b></div><pre style="margin-top:4px;padding:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;white-space:pre-wrap;font-size:12px;max-height:200px;overflow:auto;">${escapeHtml(a.text_snippet || "")}</pre>` +
      `<label style="display:flex;gap:8px;align-items:center;margin-top:12px;cursor:pointer;"><input type="checkbox" id="ar-wl"><span>同意誤判並加入白名單（日後類似內容放行）</span></label>` +
      `<label style="font-size:12px;color:#475569;margin-top:12px;display:block;">備註（選填）</label><input id="ar-note" style="width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;box-sizing:border-box;margin-top:4px;"></div>` +
      `<div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;"><button id="ar-reject" style="padding:8px 16px;border:1px solid #fca5a5;background:#fff;color:#b91c1c;border-radius:6px;cursor:pointer;font-size:13px;">駁回（確實機密）</button><button id="ar-approve" style="padding:8px 18px;border:0;background:#16a34a;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">同意誤判</button></div>`, 520);
    m.card.querySelector("#ar-x").onclick = m.close;
    const note = () => m.card.querySelector("#ar-note").value.trim();
    m.card.querySelector("#ar-approve").addEventListener("click", async () => {
      const r = await api(`/api/admin/false-positives/${a.id}/approve`, { method: "POST", body: JSON.stringify({ add_whitelist: m.card.querySelector("#ar-wl").checked, admin_note: note() }) });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { toast(errMsg(j, "操作失敗"), "error"); return; }
      m.close(); toast("已同意誤判" + (j.added_whitelist ? "（已加白名單）" : ""), "ok"); loadAppealsPane();
    });
    m.card.querySelector("#ar-reject").addEventListener("click", async () => {
      const r = await api(`/api/admin/false-positives/${a.id}/reject`, { method: "POST", body: JSON.stringify({ admin_note: note() }) });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { toast(errMsg(j, "操作失敗"), "error"); return; }
      m.close(); toast("已駁回申訴", "ok"); loadAppealsPane();
    });
  }

  // ----- PII 統計 -----
  async function loadMetricsPane(pane) {
    pane = pane || _piiSub;
    const r = await api("/api/admin/pii-metrics");
    const grid = pane.querySelector("[data-metrics]"); const more = pane.querySelector("[data-metrics2]");
    if (!r.ok) { grid.innerHTML = `<div style="grid-column:1/-1;text-align:center;color:var(--text-3);padding:24px;">${r.status === 403 ? "權限不足" : "載入失敗"}</div>`; return; }
    const m = await r.json();
    const kpi = (label, val, sub) => `<div class="kpi"><div class="kpi__accent-bar"></div><div class="kpi__label">${label}</div><div class="kpi__value">${val}</div><div class="kpi__sub">${sub || ""}</div></div>`;
    grid.innerHTML = kpi("總攔截數", m.total_blocks, "累計 pii_block") +
      kpi("規則數", m.counts.rules, "層1/2") +
      kpi("敏感主題", m.counts.topics, "層3 啟用") +
      kpi("機密樣本", m.counts.confidential_samples, "層4");
    more.innerHTML =
      `<div style="font-size:13px;font-weight:600;margin-bottom:8px;">各層命中</div>` +
      `<div style="display:flex;gap:14px;flex-wrap:wrap;">` +
      [1, 2, 3, 4].map((l) => `<div style="padding:10px 16px;border:1px solid var(--border);border-radius:8px;"><div style="font-size:12px;color:var(--text-3);">層 ${l}</div><div style="font-size:20px;font-weight:700;">${m.by_layer[l] || 0}</div></div>`).join("") +
      `</div>` +
      `<div style="font-size:13px;font-weight:600;margin:16px 0 8px;">誤判申訴</div>` +
      `<div style="display:flex;gap:14px;">` +
      `<div style="padding:10px 16px;border:1px solid var(--border);border-radius:8px;"><div style="font-size:12px;color:var(--warn);">待審</div><div style="font-size:20px;font-weight:700;">${m.appeals.pending}</div></div>` +
      `<div style="padding:10px 16px;border:1px solid var(--border);border-radius:8px;"><div style="font-size:12px;color:var(--ok);">已通過</div><div style="font-size:20px;font-weight:700;">${m.appeals.approved}</div></div>` +
      `<div style="padding:10px 16px;border:1px solid var(--border);border-radius:8px;"><div style="font-size:12px;color:var(--text-3);">已駁回</div><div style="font-size:20px;font-weight:700;">${m.appeals.rejected}</div></div>` +
      `</div>`;
  }

  async function _fillList(pane, rows, cols, emptyText) {
    const table = pane.querySelector("[data-list]");
    if (!table) return;
    const head = `<div class="user-table__head" style="grid-template-columns:${cols.map((c) => c.w).join(" ")};">` +
      cols.map((c) => `<div>${escapeHtml(c.h)}</div>`).join("") + `</div>`;
    const body = rows.map((r) => `<div class="user-row" style="grid-template-columns:${cols.map((c) => c.w).join(" ")};">` +
      cols.map((c) => `<div>${c.render(r)}</div>`).join("") + `</div>`).join("");
    table.innerHTML = head + (rows.length ? body :
      `<div style="padding:24px;text-align:center;color:var(--text-3);">${escapeHtml(emptyText)}</div>`);
    return table;
  }

  // ----- 敏感主題 -----
  async function loadTopicsPane(pane) {
    pane = pane || _piiSub;
    const r = await api("/api/admin/sensitive-topics");
    if (!r.ok) { pane.querySelector("[data-list]").innerHTML = `<div style="padding:24px;text-align:center;color:var(--text-3);">${r.status === 403 ? "權限不足" : "載入失敗"}</div>`; return; }
    const list = await r.json();
    const left = pane.querySelector(".admin-toolbar__left");
    if (left) left.innerHTML = `共 <b style="color:var(--text-1);">${list.length}</b> 個主題`;
    const table = await _fillList(pane, list, [
      { h: "主題", w: "minmax(140px,1.6fr)", render: (t) => `<b>${escapeHtml(t.name)}</b>${t.is_builtin ? ' <span style="color:var(--text-3);font-size:11px;">(內建)</span>' : ""}<div style="font-size:12px;color:var(--text-3);">${escapeHtml(t.description || "")}</div>` },
      { h: "範例", w: "70px", render: (t) => `${t.sample_count} 段` },
      { h: "門檻", w: "70px", render: (t) => (t.threshold || 0).toFixed(2) },
      { h: "狀態", w: "90px", render: (t) => t.is_active ? '<span class="status-dot status-active">啟用</span>' : '<span class="status-dot status-disabled">⊘ 停用</span>' },
      { h: "操作", w: "minmax(120px,1fr)", render: (t) => `<div class="row-actions"><button title="編輯" data-act="edit" data-id="${t.id}">✎</button>${t.is_builtin ? "" : `<button title="刪除" class="danger" data-act="del" data-id="${t.id}" data-name="${escapeHtml(t.name)}">🗑</button>`}</div>` },
    ], "尚無主題");
    if (table) table.querySelectorAll("button[data-act]").forEach((b) => b.addEventListener("click", () => {
      if (b.dataset.act === "edit") openTopicModal(parseInt(b.dataset.id, 10));
      else _deleteTopic(parseInt(b.dataset.id, 10), b.dataset.name);
    }));
  }
  async function _deleteTopic(tid, name) {
    await stepUpPrompt({ title: `刪除主題：${name}`, desc: "刪除後此語意主題不再偵測。需密碼確認。", submitText: "確認刪除" },
      async (pw) => { void pw; const r = await api(`/api/admin/sensitive-topics/${tid}`, { method: "DELETE" });
        const j = await r.json().catch(() => ({})); if (!r.ok) return errMsg(j, "刪除失敗"); toast("已刪除主題", "ok"); loadDetectionRules(); });
  }
  async function openTopicModal(tid) {
    let topic = null, samples = [];
    if (typeof tid === "number") {
      const lr = await api("/api/admin/sensitive-topics"); if (lr.ok) topic = (await lr.json()).find((x) => x.id === tid);
      const sr = await api(`/api/admin/sensitive-topics/${tid}/samples`); if (sr.ok) samples = (await sr.json()).map((s) => s.sample_text);
    }
    const isEdit = !!topic;
    const css = "width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;box-sizing:border-box;margin-top:4px;";
    const m = _kbModal(
      `<div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;"><div style="font-size:15px;font-weight:600;color:#0b1f33;">${isEdit ? "編輯主題" : "新增敏感主題"}</div><button id="tm-x" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button></div>` +
      `<div style="padding:18px 22px;">` +
      `<label style="font-size:12px;color:#475569;">主題名稱</label><input id="tm-name" style="${css}" value="${topic ? escapeHtml(topic.name) : ""}"${isEdit ? " disabled" : ""}>` +
      `<label style="font-size:12px;color:#475569;margin-top:12px;display:block;">描述</label><input id="tm-desc" style="${css}" value="${topic ? escapeHtml(topic.description || "") : ""}">` +
      `<label style="font-size:12px;color:#475569;margin-top:12px;display:block;">相似度門檻（0.3–0.95，越低越嚴）</label><input id="tm-thr" type="number" step="0.05" min="0.3" max="0.95" style="${css}" value="${topic ? topic.threshold : 0.65}">` +
      `<label style="font-size:12px;color:#475569;margin-top:12px;display:block;">範例文字（每行一段，至少 3 段）</label><textarea id="tm-samples" style="${css};min-height:140px;font-size:13px;">${escapeHtml(samples.join("\n"))}</textarea>` +
      `<div id="tm-err" style="display:none;margin-top:10px;font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:8px 10px;"></div></div>` +
      `<div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;"><button id="tm-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">取消</button><button id="tm-save" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">${isEdit ? "儲存" : "建立"}</button></div>`, 520);
    const err = m.card.querySelector("#tm-err");
    m.card.querySelector("#tm-x").onclick = m.close; m.card.querySelector("#tm-cancel").onclick = m.close;
    m.card.querySelector("#tm-save").addEventListener("click", async () => {
      err.style.display = "none";
      const samplesArr = m.card.querySelector("#tm-samples").value.split("\n").map((s) => s.trim()).filter(Boolean);
      const thr = parseFloat(m.card.querySelector("#tm-thr").value);
      const desc = m.card.querySelector("#tm-desc").value.trim();
      if (samplesArr.length < 3) { err.textContent = "至少需 3 段範例"; err.style.display = ""; return; }
      let r, j;
      if (isEdit) r = await api(`/api/admin/sensitive-topics/${tid}`, { method: "PATCH", body: JSON.stringify({ description: desc, threshold: thr, samples: samplesArr }) });
      else r = await api("/api/admin/sensitive-topics", { method: "POST", body: JSON.stringify({ name: m.card.querySelector("#tm-name").value.trim(), description: desc, threshold: thr, samples: samplesArr }) });
      j = await r.json().catch(() => ({}));
      if (!r.ok) { err.textContent = errMsg(j, "儲存失敗"); err.style.display = ""; return; }
      m.close(); toast(isEdit ? "主題已更新（重算向量）" : "主題已建立", "ok"); loadDetectionRules();
    });
  }

  // ----- 機密樣本 -----
  async function loadSamplesPane(pane) {
    pane = pane || _piiSub;
    const r = await api("/api/admin/confidential-samples");
    if (!r.ok) { pane.querySelector("[data-list]").innerHTML = `<div style="padding:24px;text-align:center;color:var(--text-3);">${r.status === 403 ? "權限不足" : "載入失敗"}</div>`; return; }
    const list = await r.json();
    const left = pane.querySelector(".admin-toolbar__left");
    if (left) left.innerHTML = `共 <b style="color:var(--text-1);">${list.length}</b> 個機密樣本 <span style="color:var(--text-3);">（只存向量，原文已丟棄）</span>`;
    const table = await _fillList(pane, list, [
      { h: "標籤", w: "minmax(160px,2fr)", render: (s) => `<b>${escapeHtml(s.label)}</b><div style="font-size:12px;color:var(--text-3);">${escapeHtml(s.description || "")}</div>` },
      { h: "原文長度", w: "90px", render: (s) => `${s.text_length || 0} 字` },
      { h: "建立", w: "minmax(120px,1fr)", render: (s) => escapeHtml(_localDate(s.added_at)) },
      { h: "操作", w: "80px", render: (s) => `<div class="row-actions"><button title="刪除" class="danger" data-act="del" data-id="${s.id}" data-name="${escapeHtml(s.label)}">🗑</button></div>` },
    ], "尚無機密樣本");
    if (table) table.querySelectorAll("button[data-act]").forEach((b) => b.addEventListener("click", () => _deleteSample(parseInt(b.dataset.id, 10), b.dataset.name)));
  }
  async function _deleteSample(sid, name) {
    await stepUpPrompt({ title: `刪除機密樣本：${name}`, desc: "刪除後不再以此樣本比對。需密碼確認。", submitText: "確認刪除" },
      async (pw) => { void pw; const r = await api(`/api/admin/confidential-samples/${sid}`, { method: "DELETE" });
        const j = await r.json().catch(() => ({})); if (!r.ok) return errMsg(j, "刪除失敗"); toast("已刪除樣本", "ok"); loadSamplesPane(); });
  }
  function openSampleModal() {
    const css = "width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;box-sizing:border-box;margin-top:4px;";
    const m = _kbModal(
      `<div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;"><div style="font-size:15px;font-weight:600;color:#0b1f33;">上傳機密樣本</div><button id="sm-x" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button></div>` +
      `<div style="padding:18px 22px;">` +
      `<div style="font-size:12px;color:#64748b;margin-bottom:8px;">系統只會儲存這段文字的「語意向量」，<b>原文不會被保存</b>。之後相似內容（≥0.75）會被層 4 擋下。</div>` +
      `<label style="font-size:12px;color:#475569;">標籤（給自己辨識用）</label><input id="sm-label" style="${css}" placeholder="例：甘油配方v3.2">` +
      `<label style="font-size:12px;color:#475569;margin-top:12px;display:block;">描述（選填）</label><input id="sm-desc" style="${css}">` +
      `<label style="font-size:12px;color:#475569;margin-top:12px;display:block;">機密內容文字</label><textarea id="sm-text" style="${css};min-height:140px;font-size:13px;"></textarea>` +
      `<label style="font-size:12px;color:#475569;margin-top:12px;display:block;">您的登入密碼（高風險動作）</label><input id="sm-pw" type="password" style="${css}">` +
      `<div id="sm-err" style="display:none;margin-top:10px;font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:8px 10px;"></div></div>` +
      `<div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;"><button id="sm-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">取消</button><button id="sm-save" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">上傳</button></div>`, 520);
    const err = m.card.querySelector("#sm-err");
    m.card.querySelector("#sm-x").onclick = m.close; m.card.querySelector("#sm-cancel").onclick = m.close;
    m.card.querySelector("#sm-save").addEventListener("click", async () => {
      err.style.display = "none";
      const label = m.card.querySelector("#sm-label").value.trim();
      const text = m.card.querySelector("#sm-text").value.trim();
      const pw = m.card.querySelector("#sm-pw").value;
      if (!label || !text) { err.textContent = "標籤與內容必填"; err.style.display = ""; return; }
      if (!pw) { err.textContent = "請輸入密碼確認"; err.style.display = ""; return; }
      const r = await api("/api/admin/confidential-samples", { method: "POST", body: JSON.stringify({ label, description: m.card.querySelector("#sm-desc").value.trim(), text, step_up_password: pw }) });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { err.textContent = errMsg(j, "上傳失敗"); err.style.display = ""; return; }
      m.close(); toast("機密樣本已上傳（原文已丟棄）", "ok"); loadSamplesPane();
    });
  }

  // ----- 白名單 -----
  async function loadWhitelistPane(pane) {
    pane = pane || _piiSub;
    const r = await api("/api/admin/whitelist-samples");
    if (!r.ok) { pane.querySelector("[data-list]").innerHTML = `<div style="padding:24px;text-align:center;color:var(--text-3);">${r.status === 403 ? "權限不足" : "載入失敗"}</div>`; return; }
    const list = await r.json();
    const left = pane.querySelector(".admin-toolbar__left");
    if (left) left.innerHTML = `共 <b style="color:var(--text-1);">${list.length}</b> 個白名單樣本 <span style="color:var(--text-3);">（與其相似>0.85 的內容放行）</span>`;
    const table = await _fillList(pane, list, [
      { h: "標籤", w: "minmax(200px,3fr)", render: (s) => escapeHtml(s.label || "（未命名）") },
      { h: "建立", w: "minmax(120px,1fr)", render: (s) => escapeHtml(_localDate(s.added_at)) },
      { h: "操作", w: "80px", render: (s) => `<div class="row-actions"><button title="刪除" class="danger" data-act="del" data-id="${s.id}">🗑</button></div>` },
    ], "尚無白名單樣本");
    if (table) table.querySelectorAll("button[data-act]").forEach((b) => b.addEventListener("click", async () => {
      const r2 = await api(`/api/admin/whitelist-samples/${b.dataset.id}`, { method: "DELETE" });
      if (r2.ok) { toast("已刪除", "ok"); loadWhitelistPane(); } else toast("刪除失敗", "error");
    }));
  }
  function openWhitelistModal() {
    const css = "width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;box-sizing:border-box;margin-top:4px;";
    const m = _kbModal(
      `<div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;"><div style="font-size:15px;font-weight:600;color:#0b1f33;">新增白名單樣本</div><button id="wm-x" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button></div>` +
      `<div style="padding:18px 22px;"><div style="font-size:12px;color:#64748b;margin-bottom:8px;">與此內容語意高度相似（>0.85）的提交，即使被層3/4 命中也會放行（解誤殺）。只存向量。</div>` +
      `<label style="font-size:12px;color:#475569;">標籤</label><input id="wm-label" style="${css}">` +
      `<label style="font-size:12px;color:#475569;margin-top:12px;display:block;">內容文字</label><textarea id="wm-text" style="${css};min-height:140px;font-size:13px;"></textarea>` +
      `<div id="wm-err" style="display:none;margin-top:10px;font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:8px 10px;"></div></div>` +
      `<div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;"><button id="wm-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">取消</button><button id="wm-save" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">新增</button></div>`, 480);
    const err = m.card.querySelector("#wm-err");
    m.card.querySelector("#wm-x").onclick = m.close; m.card.querySelector("#wm-cancel").onclick = m.close;
    m.card.querySelector("#wm-save").addEventListener("click", async () => {
      err.style.display = "none";
      const text = m.card.querySelector("#wm-text").value.trim();
      if (!text) { err.textContent = "請輸入內容"; err.style.display = ""; return; }
      const r = await api("/api/admin/whitelist-samples", { method: "POST", body: JSON.stringify({ label: m.card.querySelector("#wm-label").value.trim(), text }) });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { err.textContent = errMsg(j, "新增失敗"); err.style.display = ""; return; }
      m.close(); toast("白名單已新增", "ok"); loadWhitelistPane();
    });
  }

  // ----- 變體詞典（表格 UI；不再給 JSON）-----
  const _VARIANT_CATS = ["zh_to_en", "homophones", "synonyms"];
  function _dictToRows(dict) {
    const terms = {};
    for (const cat of _VARIANT_CATS) {
      const m = dict[cat] || {};
      for (const t of Object.keys(m)) {
        terms[t] = terms[t] || new Set();
        (m[t] || []).forEach((v) => v && terms[t].add(v));
      }
    }
    return Object.keys(terms).sort().map((t) => ({ term: t, variants: [...terms[t]] }));
  }

  async function renderVariantsTable(pane) {
    pane = pane || _piiSub;
    const isAdminSenior = ["admin", "senior_manager"].includes((Auth.user && Auth.user.role) || "");
    const r = await api("/api/admin/variants");
    if (!r.ok) { pane.innerHTML = `<div style="padding:24px;text-align:center;color:var(--text-3);">${r.status === 403 ? "權限不足" : "載入失敗"}</div>`; return; }
    const dict = await r.json();
    const rows = _dictToRows(dict);
    // 取「已設為偵測」的名詞集合（以 detection_rules 為單一來源）
    let enabled = new Set();
    try {
      const sr = await api("/api/admin/variants/detect-status");
      if (sr.ok) (await sr.json()).enabled_terms.forEach((t) => enabled.add(t));
    } catch (e) { void e; }
    pane.innerHTML =
      `<div style="font-size:13px;color:var(--text-3);margin-bottom:10px;">這裡是「同義詞庫」：登記名詞與其同義／別名／英譯。<br>勾選 <b>偵測</b> 的名詞會被當 PII <b>攔截</b>（連同它的變體）；未勾選的<b>只當同義詞庫</b>使用、不會攔。<br>拆字空白、同形字等機械變體系統會<b>自動處理</b>，不必手動輸入。</div>` +
      _adminListShell("變體詞典", isAdminSenior ? "新增名詞" : "");
    const a = pane.querySelector("[data-add]"); if (a) a.onclick = () => openVariantTermModal();
    const left = pane.querySelector(".admin-toolbar__left");
    if (left) left.innerHTML = `共 <b style="color:var(--text-1);">${rows.length}</b> 個名詞 · <b style="color:var(--accent,#009BCB);">${enabled.size}</b> 個已啟用偵測`;
    const table = await _fillList(pane, rows, [
      { h: "名詞", w: "minmax(110px,1fr)", render: (x) => `<b>${escapeHtml(x.term)}</b>` },
      { h: "變體 / 同義詞", w: "minmax(200px,2.2fr)", render: (x) => x.variants.length
        ? x.variants.map((v) => `<span style="display:inline-block;background:var(--surface-2,#f1f5f9);border-radius:999px;padding:2px 8px;margin:2px 4px 2px 0;font-size:12px;">${escapeHtml(v)}</span>`).join("")
        : '<span style="color:var(--text-3);">（無）</span>' },
      { h: "偵測", w: "minmax(72px,0.5fr)", render: (x) => isAdminSenior
        ? `<label title="設為 PII 偵測規則（含變體）" style="display:inline-flex;align-items:center;cursor:pointer;"><input type="checkbox" data-detect data-term="${escapeHtml(x.term)}"${enabled.has(x.term) ? " checked" : ""} style="width:16px;height:16px;cursor:pointer;"></label>`
        : (enabled.has(x.term) ? "✓" : "—") },
      { h: "操作", w: "minmax(96px,0.7fr)", render: (x) => isAdminSenior
        ? `<div class="row-actions" style="justify-content:flex-start;"><button title="編輯" data-act="edit" data-term="${escapeHtml(x.term)}">✎</button><button title="刪除" class="danger" data-act="del" data-term="${escapeHtml(x.term)}">🗑</button></div>` : "—" },
    ], "尚無名詞，點「新增名詞」建立");
    if (table) {
      table.querySelectorAll("button[data-act]").forEach((b) => b.addEventListener("click", () => {
        if (b.dataset.act === "edit") openVariantTermModal(b.dataset.term);
        else _deleteVariantTerm(b.dataset.term);
      }));
      table.querySelectorAll("input[data-detect]").forEach((cb) => cb.addEventListener("change", async () => {
        const term = cb.dataset.term; const want = cb.checked;
        cb.disabled = true;
        const rr = await api("/api/admin/variants/detect", { method: "POST", body: JSON.stringify({ term, enabled: want }) });
        cb.disabled = false;
        if (!rr.ok) { cb.checked = !want; const j = await rr.json().catch(() => ({})); toast(errMsg(j, "設定失敗"), "err"); return; }
        toast(want ? `已啟用「${term}」偵測（含變體）` : `已停用「${term}」偵測`, "ok");
        if (left) { want ? enabled.add(term) : enabled.delete(term); left.innerHTML = `共 <b style="color:var(--text-1);">${rows.length}</b> 個名詞 · <b style="color:var(--accent,#009BCB);">${enabled.size}</b> 個已啟用偵測`; }
      }));
    }
  }

  function _splitVariants(s) {
    return (s || "").split(/[,，、\n]/).map((x) => x.trim()).filter(Boolean);
  }

  async function openVariantTermModal(term) {
    const r = await api("/api/admin/variants");
    const dict = r.ok ? await r.json() : {};
    let existing = [];
    if (term) { const rows = _dictToRows(dict); const row = rows.find((x) => x.term === term); existing = row ? row.variants : []; }
    const isEdit = !!term;
    const css = "width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;box-sizing:border-box;margin-top:4px;";
    const m = _kbModal(
      `<div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;"><div style="font-size:15px;font-weight:600;color:#0b1f33;">${isEdit ? "編輯名詞變體" : "新增名詞"}</div><button id="vt-x" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button></div>` +
      `<div style="padding:18px 22px;">` +
      `<label style="font-size:12px;color:#475569;">名詞</label><input id="vt-term" style="${css}" value="${escapeHtml(term || "")}"${isEdit ? " disabled" : ""} placeholder="例：甘油">` +
      `<div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px;">` +
      `<label style="font-size:12px;color:#475569;">變體 / 同義詞 / 英譯（用逗號或換行分隔）</label>` +
      `<button id="vt-auto" type="button" style="padding:4px 10px;border:1px solid #cbd5e1;background:#fff;color:#009BCB;border-radius:6px;cursor:pointer;font-size:12px;">✨ 自動產生</button></div>` +
      `<textarea id="vt-vars" style="${css};min-height:120px;font-size:13px;" placeholder="例：丙三醇, 保濕劑, glycerin">${escapeHtml(existing.join(", "))}</textarea>` +
      `<div id="vt-auto-note" style="font-size:11px;color:#94a3b8;margin-top:6px;">儲存後會自動套用到所有關鍵字規則的偵測。</div>` +
      `<div id="vt-err" style="display:none;margin-top:10px;font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:8px 10px;"></div></div>` +
      `<div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;"><button id="vt-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">取消</button><button id="vt-save" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">儲存</button></div>`, 480);
    const err = m.card.querySelector("#vt-err");
    m.card.querySelector("#vt-x").onclick = m.close; m.card.querySelector("#vt-cancel").onclick = m.close;
    // 自動產生（接真實 AI：有金鑰用 Provider 產同義詞/英譯，無金鑰退本地機械變體）
    m.card.querySelector("#vt-auto").addEventListener("click", async () => {
      const t = m.card.querySelector("#vt-term").value.trim();
      const note = m.card.querySelector("#vt-auto-note");
      if (!t) { err.textContent = "請先輸入名詞"; err.style.display = ""; return; }
      const btn = m.card.querySelector("#vt-auto"); btn.disabled = true; btn.textContent = "產生中…";
      try {
        const r = await api("/api/admin/variants/generate", { method: "POST", body: JSON.stringify({ term: t }) });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) { err.textContent = errMsg(j, "產生失敗"); err.style.display = ""; return; }
        const ta = m.card.querySelector("#vt-vars");
        const merged = [...new Set(_splitVariants(ta.value).concat(j.variants || []))];
        ta.value = merged.join(", ");
        const src = j.source === "local" ? "本地機械變體" : `AI（${j.source || "?"}）`;
        if (note) note.textContent = (j.variants && j.variants.length)
          ? `已加入 ${j.variants.length} 個建議 · 來源：${src}` : `目前無更多建議 · 來源：${src}`;
      } finally { btn.disabled = false; btn.textContent = "✨ 自動產生"; }
    });
    m.card.querySelector("#vt-save").addEventListener("click", async () => {
      err.style.display = "none";
      const t = m.card.querySelector("#vt-term").value.trim();
      const vars = _splitVariants(m.card.querySelector("#vt-vars").value);
      if (!t) { err.textContent = "請輸入名詞"; err.style.display = ""; return; }
      if (!vars.length) { err.textContent = "請至少輸入一個變體 / 同義詞"; err.style.display = ""; return; }
      const cur = await (await api("/api/admin/variants")).json().catch(() => ({}));
      cur.synonyms = cur.synonyms || {};
      cur.synonyms[t] = vars;  // 使用者新增/編輯一律存於 synonyms
      const rr = await api("/api/admin/variants", { method: "PUT", body: JSON.stringify({ data: cur }) });
      const jj = await rr.json().catch(() => ({}));
      if (!rr.ok) { err.textContent = errMsg(jj, "儲存失敗"); err.style.display = ""; return; }
      m.close(); toast(`已儲存（重算 ${jj.recomputed_rules} 條規則）`, "ok"); renderVariantsTable();
    });
  }

  async function _deleteVariantTerm(term) {
    await stepUpPrompt({ title: `刪除名詞：${term}`, desc: "從變體詞典移除此名詞的所有變體。需密碼確認。", submitText: "確認刪除" },
      async (pw) => {
        void pw;
        const cur = await (await api("/api/admin/variants")).json().catch(() => ({}));
        for (const cat of _VARIANT_CATS) { if (cur[cat]) delete cur[cat][term]; }
        const rr = await api("/api/admin/variants", { method: "PUT", body: JSON.stringify({ data: cur }) });
        const jj = await rr.json().catch(() => ({}));
        if (!rr.ok) return errMsg(jj, "刪除失敗");
        toast("已刪除", "ok"); renderVariantsTable();
      });
  }

  // ============================================================
  // 偵測規則（PII 層1）管理：接線既有「偵測規則 (PII)」分頁
  // ============================================================
  function wireRulesAdmin(adminPage) {
    const pane = adminPage.querySelector('.admin-pane[data-tab="rules"]');
    if (!pane || pane.dataset.kbv5 === "1") return;
    pane.dataset.kbv5 = "1";
    const obs = new MutationObserver(() => {
      if (pane.classList.contains("is-active")) loadDetectionRules();
    });
    obs.observe(pane, { attributes: true, attributeFilter: ["class"] });
    if (pane.classList.contains("is-active")) loadDetectionRules();

    // 接管 mockup 的全域函式
    window.openRuleEditModal = (rid) => openRuleEditModal(typeof rid === "number" ? rid : null);
    window.openHitLogModal = () => openPiiHitLogModal();
    window.loadSampleRule = () => {};
    const addBtn = pane.querySelector(".btn--primary");
    if (addBtn) {
      addBtn.onclick = (e) => { e.preventDefault(); openRuleEditModal(null); };
      // 注入「+ 語意主題」按鈕（敏感主題已併入本頁）
      if (addBtn.parentElement && !pane.querySelector("[data-add-topic]")) {
        const tb = document.createElement("button");
        tb.className = "btn btn--ghost"; tb.dataset.addTopic = "1";
        tb.textContent = "+ 語意主題"; tb.style.marginRight = "6px";
        tb.onclick = (e) => { e.preventDefault(); openTopicModal(null); };
        addBtn.parentElement.insertBefore(tb, addBtn);
      }
    }
    // 匯入規則集：找按鈕文字綁 file picker
    Array.from(pane.querySelectorAll("button, .btn")).forEach((b) => {
      if ((b.textContent || "").trim().includes("匯入規則集")) {
        b.onclick = (e) => { e.preventDefault(); _importRulesFromFile(); };
      }
    });
    _wirePiiTester(pane);
  }

  function _importRulesFromFile() {
    const inp = document.createElement("input");
    inp.type = "file";
    inp.accept = ".json,application/json";
    inp.addEventListener("change", async () => {
      const f = inp.files && inp.files[0];
      if (!f) return;
      let rules;
      try {
        const parsed = JSON.parse(await f.text());
        rules = Array.isArray(parsed) ? parsed : (Array.isArray(parsed.rules) ? parsed.rules : null);
        if (!rules) throw new Error("格式");
      } catch (x) {
        toast("檔案需為 JSON 陣列，或含 rules 陣列的物件", "error"); return;
      }
      if (!rules.length) { toast("檔案沒有規則", "error"); return; }
      if (!window.confirm(`將匯入 ${rules.length} 條規則（同名跳過、語法錯誤略過）。繼續？`)) return;
      const r = await api("/api/admin/detection-rules/import", {
        method: "POST", body: JSON.stringify({ rules }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { toast(errMsg(j, "匯入失敗"), "error"); return; }
      const errN = (j.errors || []).length;
      toast(`匯入完成：新增 ${j.created}、跳過 ${j.skipped}${errN ? `、略過 ${errN}` : ""}`, errN ? "info" : "ok");
      if (errN) console.warn("匯入略過明細：", j.errors);
      loadDetectionRules();
      _runPiiTest();
    });
    inp.click();
  }

  // ── 即時偵測測試（用「當前啟用規則」即時掃描；切換開關後重掃即反映）──
  const _PII_SAMPLES = {
    contact: "客戶資料表\n姓名：陳怡君\n身分證：A123456789\n手機：0912-345-678\n公司 Email：chen.yj@demo.local\n外部聯絡：test@gmail.com",
    hr: "人事資料\n員工：王小明\n身分證：B221234567\n到職日：2023-05-01\n月薪明細請見附件\n緊急聯絡電話：0922-111-222",
    finance: "財務報表\n信用卡：4532 1234 5678 9010\n帳號：009-12345678\n專案代號：PROJ-AB1234\n2024 Q3 銷售淨額：12,300,000",
    clean: "本週工作摘要\n完成知識庫匯入流程的單元測試，並更新使用手冊第三章。下週預計進行壓力測試與效能調校。",
  };
  let _piiTestTimer = null;

  function _wirePiiTester(pane) {
    const input = pane.querySelector("#pii-test-input");
    if (!input || input.dataset.kbv5 === "1") return;
    input.dataset.kbv5 = "1";
    window.loadSampleText = (kind) => {
      const t = _PII_SAMPLES[kind];
      if (t == null) return;
      input.value = t;
      _runPiiTest(pane);
    };
    input.addEventListener("input", () => {
      clearTimeout(_piiTestTimer);
      _piiTestTimer = setTimeout(() => _runPiiTest(pane), 350);
    });
    _runPiiTest(pane);  // 初次載入即掃一次（取代 mockup 靜態結果）
  }

  const _PII_ACTION_CLASS = { block: "pii-hit--block", mask: "pii-hit--mask", warn: "pii-hit--warn", log: "pii-hit--log" };
  const _PII_ACTION_LABEL = { block: "攔截", mask: "遮罩", warn: "警告", log: "記錄" };

  async function _runPiiTest(pane) {
    pane = pane || document.querySelector('.admin-pane[data-tab="rules"]');
    if (!pane) return;
    const input = pane.querySelector("#pii-test-input");
    const preview = pane.querySelector("#pii-test-result");
    if (!input || !preview) return;
    const text = input.value || "";
    const r = await api("/api/admin/detection-rules/scan", {
      method: "POST", body: JSON.stringify({ text }),
    }).catch(() => null);
    if (!r || !r.ok) { preview.textContent = text; return; }
    const data = await r.json();
    const spans = (data.spans || []).slice().sort((a, b) => a.start - b.start);
    // 貪婪取不重疊 span，依序套高亮
    let html = "", cursor = 0;
    const counts = { block: 0, warn: 0, mask: 0, log: 0 };
    spans.forEach((s) => {
      if (s.start < cursor) return;  // 與前一段重疊 → 跳過
      html += escapeHtml(text.slice(cursor, s.start));
      const cls = _PII_ACTION_CLASS[s.action] || "pii-hit--warn";
      const tip = `${escapeHtml(s.rule)} · ${_PII_ACTION_LABEL[s.action] || s.action}${s.builtin ? " · 內建" : ""}`;
      html += `<span class="pii-hit ${cls}" title="${tip}">${escapeHtml(s.text)}</span>`;
      counts[s.action] = (counts[s.action] || 0) + 1;
      cursor = s.end;
    });
    html += escapeHtml(text.slice(cursor));
    // 語意層命中（整段）→ 附在結果上方提示
    let semNote = "";
    (data.semantic || []).forEach((h) => {
      const what = h.layer === 3 ? `語意主題「${escapeHtml(h.topic || "")}」` : `機密樣本相似（${escapeHtml(h.rule || "")}）`;
      semNote += `<div style="margin-bottom:6px;padding:6px 8px;border-radius:6px;background:var(--danger-bg,#fef2f2);color:#b91c1c;font-size:12px;">🛡 整段命中：${what}（相似度 ${h.similarity}）→ 提交時將攔截</div>`;
    });
    preview.innerHTML = semNote + (html || '<span style="color:var(--text-3);">（無內容）</span>');
    // 更新統計列
    const stats = pane.querySelectorAll(".pii-stats .pii-stat");
    const order = ["block", "warn", "mask", "log"];
    stats.forEach((st, i) => {
      const c = st.querySelector(".pii-stat__count");
      if (c && order[i] != null) c.textContent = String(counts[order[i]] || 0);
    });
    const timeEl = pane.querySelector('.pii-stats span[style*="margin-left:auto"]');
    if (timeEl) timeEl.textContent = `⚡ 即時 · ${spans.length} 命中`;
  }

  // 全部命中紀錄 modal（audit_log 的 pii_block 事件）
  async function openPiiHitLogModal() {
    const overlay = document.createElement("div");
    overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;";
    const card = document.createElement("div");
    card.style.cssText = "background:#fff;border-radius:12px;max-width:760px;width:100%;max-height:84vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.3);";
    card.innerHTML =
      '<div style="padding:16px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">' +
      '<div style="font-size:15px;font-weight:600;color:#0b1f33;">PII 全部命中紀錄</div>' +
      '<button id="pii-hits-x" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button></div>' +
      '<div id="pii-hits-body" style="padding:14px 22px;font-size:13px;color:#475569;">載入中…</div>';
    overlay.appendChild(card);
    document.body.appendChild(overlay);
    const close = () => overlay.remove();
    card.querySelector("#pii-hits-x").addEventListener("click", close);
    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });

    const r = await api("/api/admin/pii-hits?limit=200").catch(() => null);
    const body = card.querySelector("#pii-hits-body");
    if (!r || !r.ok) { body.textContent = "讀取失敗"; return; }
    const data = await r.json();
    const items = data.items || [];
    if (!items.length) { body.innerHTML = '<div style="padding:24px;text-align:center;color:#94a3b8;">尚無 PII 攔截紀錄</div>'; return; }
    const rows = items.map((it) => {
      const t = (it.timestamp || "").replace("T", " ").slice(0, 19);
      const detail = it.match ? escapeHtml(String(it.match))
        : (it.similarity != null ? `相似度 ${it.similarity}` : "");
      return `<tr style="border-bottom:1px solid #f1f5f9;">` +
        `<td style="padding:7px 8px;white-space:nowrap;color:#64748b;font-size:12px;">${escapeHtml(t)}</td>` +
        `<td style="padding:7px 8px;">${escapeHtml(it.user || "")}</td>` +
        `<td style="padding:7px 8px;"><span style="background:#fef2f2;color:#b91c1c;border-radius:4px;padding:1px 6px;font-size:11px;">層${it.layer || "?"} ${escapeHtml(it.layer_label || "")}</span></td>` +
        `<td style="padding:7px 8px;">${escapeHtml(it.rule || "—")}</td>` +
        `<td style="padding:7px 8px;color:#64748b;font-size:12px;">${detail}</td></tr>`;
    }).join("");
    body.innerHTML =
      `<div style="margin-bottom:8px;color:#64748b;">共 ${items.length} 筆（近 200）</div>` +
      '<table style="width:100%;border-collapse:collapse;"><thead><tr style="text-align:left;color:#94a3b8;font-size:11px;">' +
      '<th style="padding:6px 8px;">時間</th><th style="padding:6px 8px;">使用者</th><th style="padding:6px 8px;">層級</th><th style="padding:6px 8px;">規則</th><th style="padding:6px 8px;">命中</th>' +
      `</tr></thead><tbody>${rows}</tbody></table>`;
  }

  const RULE_TYPE_LABEL = { keyword: "關鍵字", phrase: "片語", regex: "正則" };
  const RULE_ACTION_LABEL = { block: "攔截", warn: "警告", mask: "遮罩", log: "記錄" };
  let _rulesCache = [];

  let _loadRulesToken = 0;
  async function loadDetectionRules() {
    const pane = document.querySelector('.admin-pane[data-tab="rules"]');
    const table = pane && pane.querySelector(".rule-table");
    if (!table) return;
    const myToken = ++_loadRulesToken;     // 防並發重複渲染（觀察者+明確呼叫競態 → 重複列）
    table.querySelectorAll(".rule-row").forEach((el) => el.remove());  // flash 修復：抓資料前先清 mockup 假規則列
    const r = await api("/api/admin/detection-rules");
    if (myToken !== _loadRulesToken) return;  // 已有更新的呼叫 → 放棄本次渲染
    table.querySelectorAll(".rule-row").forEach((el) => el.remove());
    if (!r.ok) {
      const msg = document.createElement("div");
      msg.className = "rule-row";
      msg.style.cssText = "padding:24px;color:var(--text-3);text-align:center;cursor:default;";
      msg.textContent = r.status === 403 ? "您沒有管理偵測規則的權限。" : "載入失敗";
      table.appendChild(msg);
      return;
    }
    _rulesCache = await r.json();
    // 更新統計列
    const sub = pane.querySelector("p");
    if (sub) {
      const active = _rulesCache.filter((x) => x.is_active).length;
      sub.innerHTML = `個人資料偵測、敏感字串攔截 · 共 <b style="color:var(--text-1);">${_rulesCache.length}</b> 條（${active} 條啟用）`;
    }
    _rulesCache.forEach((rule) => table.appendChild(_ruleRow(rule)));
    // 併入「語意主題」(敏感主題) 作為「語意」類型的規則列（各帶開關）
    await _appendTopicRows(table, sub);
  }

  async function _appendTopicRows(table, subEl) {
    const r = await api("/api/admin/sensitive-topics").catch(() => null);
    if (!r || !r.ok) return;
    const topics = await r.json();
    topics.forEach((t) => table.appendChild(_topicRow(t)));
    if (subEl) {
      const tActive = topics.filter((t) => t.is_active).length;
      subEl.innerHTML += ` ＋ 語意主題 <b style="color:var(--text-1);">${topics.length}</b> 個（${tActive} 啟用）`;
    }
    if ((_rulesCache || []).length === 0 && topics.length === 0) {
      const empty = document.createElement("div");
      empty.className = "rule-row";
      empty.style.cssText = "padding:24px;color:var(--text-3);text-align:center;cursor:default;";
      empty.textContent = "尚無規則，點上方按鈕建立";
      table.appendChild(empty);
    }
  }

  function _topicRow(t) {
    const row = document.createElement("div");
    row.className = "rule-row";
    const lock = t.is_builtin ? ' <span style="color:var(--text-3);font-size:11px;">(內建)</span>' : "";
    row.innerHTML =
      `<div onclick="event.stopPropagation()"><div class="rule-toggle${t.is_active ? "" : " is-off"}" style="cursor:pointer;"></div></div>` +
      `<div><div class="rule-row__name">${escapeHtml(t.name)}${lock} <span style="background:#ede9fe;color:#6d28d9;font-size:10px;border-radius:4px;padding:1px 5px;">語意</span></div>` +
      `<div class="rule-row__desc">${escapeHtml(t.description || "")}</div></div>` +
      `<div><code class="rule-row__pattern">語意比對 · 門檻 ${(t.threshold || 0).toFixed(2)} · ${t.sample_count} 範例</code></div>` +
      `<div><span class="rule-action-badge rule-action--block">攔截</span></div>` +
      `<div class="rule-row__hits" style="text-align:center;">—</div>` +
      `<div class="rule-row__actions" onclick="event.stopPropagation()">` +
        `<button title="編輯" data-topic-act="edit" data-id="${t.id}">✎</button>` +
        (t.is_builtin ? "" : `<button title="刪除" class="danger" data-topic-act="del" data-id="${t.id}" data-name="${escapeHtml(t.name)}">🗑</button>`) +
      `</div>`;
    const toggle = row.querySelector(".rule-toggle");
    if (toggle) toggle.addEventListener("click", () => _toggleTopic(t.id, !t.is_active));
    row.querySelectorAll("button[data-topic-act]").forEach((b) => b.addEventListener("click", () => {
      if (b.dataset.topicAct === "edit") openTopicModal(parseInt(b.dataset.id, 10));
      else _deleteTopic(parseInt(b.dataset.id, 10), b.dataset.name);
    }));
    return row;
  }

  async function _toggleTopic(id, active) {
    const r = await api(`/api/admin/sensitive-topics/${id}`, {
      method: "PATCH", body: JSON.stringify({ is_active: active }),
    });
    if (!r.ok) { toast(errMsg(await r.json().catch(() => ({})), "切換失敗"), "error"); return; }
    loadDetectionRules();
    _runPiiTest();
  }

  function _ruleRow(rule) {
    const row = document.createElement("div");
    row.className = "rule-row";
    const patShown = (rule.rule_type === "regex" ? `/${rule.pattern}/` : rule.pattern);
    const variantNote = (rule.rule_type === "keyword" && rule.variants && rule.variants.length)
      ? ` <span style="color:var(--text-3);">+${rule.variants.length} 變體</span>` : "";
    const lock = rule.is_builtin ? ' <span style="color:var(--text-3);font-size:11px;">(內建)</span>' : "";
    row.innerHTML =
      `<div onclick="event.stopPropagation()"><div class="rule-toggle${rule.is_active ? "" : " is-off"}" data-id="${rule.id}" style="cursor:pointer;"></div></div>` +
      `<div><div class="rule-row__name">${escapeHtml(rule.rule_name)}${lock}</div>` +
      `<div class="rule-row__desc">類型：${RULE_TYPE_LABEL[rule.rule_type] || rule.rule_type}${variantNote}</div></div>` +
      `<div><code class="rule-row__pattern">${escapeHtml(patShown)}</code></div>` +
      `<div><span class="rule-action-badge rule-action--block">${RULE_ACTION_LABEL[rule.action] || rule.action}</span></div>` +
      `<div class="rule-row__hits" style="text-align:center;">—</div>` +
      `<div class="rule-row__actions" onclick="event.stopPropagation()">` +
        `<button title="編輯" data-act="edit" data-id="${rule.id}">✎</button>` +
        (rule.is_builtin ? "" : `<button title="刪除" class="danger" data-act="del" data-id="${rule.id}" data-name="${escapeHtml(rule.rule_name)}">🗑</button>`) +
      `</div>`;
    const toggle = row.querySelector(".rule-toggle");
    if (toggle) toggle.addEventListener("click", () => _toggleRule(rule.id, !rule.is_active));
    row.querySelectorAll("button[data-act]").forEach((b) => {
      b.addEventListener("click", () => {
        if (b.dataset.act === "edit") openRuleEditModal(parseInt(b.dataset.id, 10));
        else _deleteRule(parseInt(b.dataset.id, 10), b.dataset.name);
      });
    });
    return row;
  }

  async function _toggleRule(rid, active) {
    const r = await api(`/api/admin/detection-rules/${rid}`, {
      method: "PATCH", body: JSON.stringify({ is_active: active }),
    });
    if (!r.ok) { toast(errMsg(await r.json().catch(() => ({})), "切換失敗"), "error"); return; }
    loadDetectionRules();
    _runPiiTest();  // 切換規則後即時重掃，讓下方測試反映新的啟用狀態
  }

  async function _deleteRule(rid, name) {
    await stepUpPrompt({
      title: `刪除規則：${name}`,
      desc: "停用並移除此偵測規則（內建規則不可刪）。需密碼確認。",
      submitText: "確認刪除",
    }, async (password) => {
      // 規則刪除不需後端密碼，但仍要求確認；此處只做前端確認
      void password;
      const r = await api(`/api/admin/detection-rules/${rid}`, { method: "DELETE" });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) return errMsg(j, "刪除失敗");
      toast("已刪除規則", "ok");
      loadDetectionRules();
    });
  }

  function openRuleEditModal(rid) {
    const rule = rid ? _rulesCache.find((x) => x.id === rid) : null;
    const isEdit = !!rule;
    const builtin = rule && rule.is_builtin;
    const typeOpts = ["keyword", "phrase", "regex"].map((t) =>
      `<option value="${t}"${rule && rule.rule_type === t ? " selected" : ""}>${RULE_TYPE_LABEL[t]}</option>`).join("");
    const actOpts = ["block", "warn", "mask", "log"].map((a) =>
      `<option value="${a}"${rule && rule.action === a ? " selected" : ""}>${RULE_ACTION_LABEL[a]}</option>`).join("");
    const inputCss = "width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;box-sizing:border-box;margin-top:4px;";
    const m = _kbModal(`
      <div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">
        <div style="font-size:15px;font-weight:600;color:#0b1f33;">${isEdit ? "編輯規則" : "新增偵測規則"}</div>
        <button id="re-close" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button>
      </div>
      <div style="padding:18px 22px;">
        <label style="font-size:12px;color:#475569;font-weight:500;">規則名稱</label>
        <input id="re-name" style="${inputCss}" value="${rule ? escapeHtml(rule.rule_name) : ""}">
        <div style="display:flex;gap:10px;margin-top:12px;">
          <div style="flex:1;"><label style="font-size:12px;color:#475569;font-weight:500;">類型</label>
            <select id="re-type" style="${inputCss}"${builtin ? " disabled" : ""}>${typeOpts}</select></div>
          <div style="flex:1;"><label style="font-size:12px;color:#475569;font-weight:500;">觸發動作</label>
            <select id="re-action" style="${inputCss}">${actOpts}</select></div>
        </div>
        <label style="font-size:12px;color:#475569;font-weight:500;margin-top:12px;display:block;">內容（關鍵字/片語或正則）</label>
        <input id="re-pattern" style="${inputCss}" value="${rule ? escapeHtml(rule.pattern) : ""}"${builtin ? " disabled" : ""}>
        <div style="font-size:11px;color:#94a3b8;margin-top:4px;">關鍵字類型會自動產生拆字/英譯/同義詞等變體（層 2）。</div>
        <label style="font-size:12px;color:#475569;font-weight:500;margin-top:12px;display:block;">測試文字（選填）</label>
        <input id="re-sample" style="${inputCss}" placeholder="貼一段文字測試是否命中">
        <div id="re-test" style="font-size:12px;margin-top:6px;min-height:16px;"></div>
        <div id="re-err" style="display:none;margin-top:10px;font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:8px 10px;"></div>
      </div>
      <div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">
        <button id="re-testbtn" style="padding:8px 14px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">測試</button>
        <div style="display:flex;gap:8px;">
          <button id="re-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">取消</button>
          <button id="re-save" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">${isEdit ? "儲存" : "建立"}</button>
        </div>
      </div>`, 520);
    const errEl = m.card.querySelector("#re-err");
    const testEl = m.card.querySelector("#re-test");
    m.card.querySelector("#re-close").onclick = m.close;
    m.card.querySelector("#re-cancel").onclick = m.close;
    m.card.querySelector("#re-testbtn").addEventListener("click", async () => {
      const r = await api("/api/admin/detection-rules/test", {
        method: "POST", body: JSON.stringify({
          pattern: m.card.querySelector("#re-pattern").value,
          rule_type: m.card.querySelector("#re-type").value,
          sample: m.card.querySelector("#re-sample").value,
        }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { testEl.textContent = errMsg(j, "測試失敗"); testEl.style.color = "#dc2626"; return; }
      testEl.textContent = j.matched ? `✓ 命中${j.match ? "：" + j.match : ""}` : "✕ 未命中";
      testEl.style.color = j.matched ? "#16a34a" : "#64748b";
    });
    m.card.querySelector("#re-save").addEventListener("click", async () => {
      errEl.style.display = "none";
      const name = m.card.querySelector("#re-name").value.trim();
      const rtype = m.card.querySelector("#re-type").value;
      const pattern = m.card.querySelector("#re-pattern").value.trim();
      const action = m.card.querySelector("#re-action").value;
      if (!name || !pattern) { errEl.textContent = "名稱與內容必填"; errEl.style.display = ""; return; }
      let r, j;
      if (isEdit) {
        r = await api(`/api/admin/detection-rules/${rid}`, {
          method: "PATCH", body: JSON.stringify(builtin ? { rule_name: name, action } : { rule_name: name, pattern, action }),
        });
      } else {
        r = await api("/api/admin/detection-rules", {
          method: "POST", body: JSON.stringify({ rule_name: name, rule_type: rtype, pattern, action }),
        });
      }
      j = await r.json().catch(() => ({}));
      if (!r.ok) { errEl.textContent = errMsg(j, "儲存失敗"); errEl.style.display = ""; return; }
      m.close();
      toast(isEdit ? "規則已更新" : "規則已建立", "ok");
      loadDetectionRules();
    });
  }

  // ============================================================
  // 部門管理（注入 admin 分頁；後端 CRUD 已存在 /api/departments）
  // ============================================================
  function ensureDeptStyle() {
    if (document.getElementById("kbv5-dept-style")) return;
    const st = document.createElement("style");
    st.id = "kbv5-dept-style";
    // 沿用 .user-table__head / .user-row 全部視覺，只覆寫部門表的欄寬（5 欄）
    // 操作欄左對齊，讓圖示貼近「操作」表頭（預設 .row-actions 是 flex-end 會被推到最右）
    st.textContent =
      "#kbv5-dept-table .user-table__head,#kbv5-dept-table .user-row{" +
      "grid-template-columns:36px minmax(160px,2fr) 120px 90px minmax(120px,1fr);}" +
      "#kbv5-dept-table .row-actions{justify-content:flex-start;}";
    document.head.appendChild(st);
  }

  function wireDepartmentsAdmin(adminPage) {
    const tabs = adminPage.querySelector(".admin-tabs");
    if (!tabs || tabs.dataset.kbv5Dept === "1") return;
    tabs.dataset.kbv5Dept = "1";
    ensureDeptStyle();

    // 注入分頁按鈕
    const tabBtn = document.createElement("button");
    tabBtn.className = "admin-tab";
    tabBtn.dataset.tabTarget = "departments";
    tabBtn.textContent = "部門管理";
    tabs.appendChild(tabBtn);

    // 注入分頁內容
    const pane = document.createElement("div");
    pane.className = "admin-pane";
    pane.dataset.tab = "departments";
    pane.innerHTML = `
      <div class="admin-toolbar">
        <div class="admin-toolbar__left"></div>
        <div class="admin-toolbar__right">
          <button class="btn btn--primary btn--sm" id="kbv5-dept-add">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
            新增部門
          </button>
        </div>
      </div>
      <div class="batch-bar" id="kbv5-dept-batch">
        <span class="batch-bar__count" id="kbv5-dept-batch-count"></span>
        <button class="btn btn--quiet btn--sm" data-bact="clear">清除選取</button>
        <div class="batch-bar__divider"></div>
        <button class="btn btn--ghost btn--sm" data-bact="deactivate">批次停用</button>
        <button class="btn btn--ghost btn--sm" data-bact="reactivate">批次重新啟用</button>
        <button class="btn btn--ghost btn--sm" data-bact="delete" style="color:var(--danger,#dc2626);">批次刪除</button>
      </div>
      <div class="user-table" id="kbv5-dept-table"></div>`;
    // 放在 tabs 之後、最後一個 pane 之後
    const lastPane = Array.from(adminPage.querySelectorAll(".admin-pane")).pop();
    if (lastPane && lastPane.parentNode) lastPane.parentNode.insertBefore(pane, lastPane.nextSibling);
    else adminPage.appendChild(pane);

    // 分頁切換（自行處理，因 HTML 既有 listener 不含此新鈕）
    tabBtn.addEventListener("click", () => {
      adminPage.querySelectorAll(".admin-tab").forEach((b) => b.classList.remove("is-active"));
      tabBtn.classList.add("is-active");
      adminPage.querySelectorAll(".admin-pane").forEach((p) => p.classList.remove("is-active"));
      pane.classList.add("is-active");
      loadDepartmentsAdmin();
    });
    // 點其他既有分頁時，移除本分頁 active（既有 listener 不知道本 pane）
    adminPage.querySelectorAll('.admin-tab[data-tab-target]').forEach((b) => {
      if (b === tabBtn) return;
      b.addEventListener("click", () => {
        tabBtn.classList.remove("is-active");
        pane.classList.remove("is-active");
      });
    });

    const addBtn = pane.querySelector("#kbv5-dept-add");
    const isAdmin = (Auth.user && Auth.user.role) === "admin";
    if (!isAdmin) addBtn.style.display = "none";  // 僅 admin 可增刪改（後端亦強制）
    addBtn.addEventListener("click", openDeptMultiAddModal);
  }

  // 一次新增多個部門
  function openDeptMultiAddModal() {
    const m = _kbModal(`
      <div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">
        <div style="font-size:15px;font-weight:600;color:#0b1f33;">新增部門（可一次多筆）</div>
        <button id="dma-close" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button>
      </div>
      <div style="padding:18px 22px;">
        <div id="dma-rows"></div>
        <button id="dma-more" style="margin-top:8px;padding:6px 12px;border:1px dashed #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">+ 再加一列</button>
        <div id="dma-err" style="display:none;margin-top:12px;font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:8px 10px;"></div>
      </div>
      <div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;">
        <button id="dma-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">取消</button>
        <button id="dma-save" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">建立</button>
      </div>`, 480);
    const rowsWrap = m.card.querySelector("#dma-rows");
    const errEl = m.card.querySelector("#dma-err");
    function addRow(val) {
      const row = document.createElement("div");
      row.style.cssText = "display:flex;gap:8px;align-items:center;margin-bottom:8px;";
      row.innerHTML =
        `<input class="dma-input" placeholder="部門名稱" value="${escapeHtml(val || "")}" style="flex:1;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;box-sizing:border-box;">` +
        `<button class="dma-del" title="移除" style="border:0;background:transparent;color:#94a3b8;font-size:18px;cursor:pointer;padding:0 6px;">✕</button>`;
      row.querySelector(".dma-del").addEventListener("click", () => {
        if (rowsWrap.children.length > 1) row.remove();
      });
      rowsWrap.appendChild(row);
    }
    addRow(); addRow(); addRow();
    m.card.querySelector("#dma-more").addEventListener("click", () => addRow());
    m.card.querySelector("#dma-close").addEventListener("click", m.close);
    m.card.querySelector("#dma-cancel").addEventListener("click", m.close);
    const saveBtn = m.card.querySelector("#dma-save");
    saveBtn.addEventListener("click", async () => {
      const names = Array.from(rowsWrap.querySelectorAll(".dma-input"))
        .map((i) => i.value.trim()).filter(Boolean);
      const uniq = [...new Set(names)];
      if (!uniq.length) { errEl.textContent = "請至少填一個部門名稱"; errEl.style.display = ""; return; }
      saveBtn.disabled = true; saveBtn.textContent = "建立中…"; errEl.style.display = "none";
      const ok = [], fail = [];
      for (const name of uniq) {
        try {
          const r = await api("/api/departments", { method: "POST", body: JSON.stringify({ name }) });
          if (r.ok) ok.push(name);
          else { const j = await r.json().catch(() => ({})); fail.push(`${name}（${errMsg(j, "失敗")}）`); }
        } catch (e) { fail.push(`${name}（網路錯誤）`); }
      }
      saveBtn.disabled = false; saveBtn.textContent = "建立";
      if (fail.length) {
        errEl.innerHTML = `成功 ${ok.length} 筆；失敗：${fail.map(escapeHtml).join("、")}`;
        errEl.style.display = "";
        if (ok.length) loadDepartmentsAdmin();
        return;
      }
      m.close();
      toast(`已新增 ${ok.length} 個部門`, "ok");
      loadDepartmentsAdmin();
    });
  }

  async function loadDepartmentsAdmin() {
    const table = document.getElementById("kbv5-dept-table");
    if (!table || !Auth.access) return;
    const isAdmin = (Auth.user && Auth.user.role) === "admin";
    // flash 修復：先同步覆蓋 mockup 寫死的假部門列為載入態，再抓資料
    table.innerHTML = '<div style="padding:24px;text-align:center;color:var(--text-3);">載入中…</div>';
    const r = await api("/api/departments");
    if (!r.ok) { table.innerHTML = '<div style="padding:24px;color:var(--text-3);text-align:center;">載入失敗</div>'; return; }
    const list = await r.json();
    const toolbarLeft = document.querySelector('.admin-pane[data-tab="departments"] .admin-toolbar__left');
    if (toolbarLeft) {
      const active = list.filter((d) => d.is_active).length;
      toolbarLeft.innerHTML = `共 <b style="color:var(--text-1);">${list.length}</b> 個部門 · 啟用 <b style="color:var(--accent);">${active}</b>`;
    }
    if (!list.length) { table.innerHTML = '<div style="padding:24px;color:var(--text-3);text-align:center;">尚無部門</div>'; return; }
    _deptList = list;
    const head =
      `<div class="user-table__head">
        <div>${isAdmin ? '<input type="checkbox" id="dept-check-all" style="width:16px;height:16px;cursor:pointer;">' : ""}</div>
        <div>部門名稱</div><div>狀態</div><div>人數</div><div>操作</div>
      </div>`;
    table.innerHTML = head +
      list.map((d) => {
        const statusChip = d.is_active
          ? '<span class="status-dot status-active">啟用</span>'
          : '<span class="status-dot status-disabled">⊘ 停用</span>';
        const nm = escapeHtml(d.name);
        const actions = isAdmin ? (
          `<button title="改名" data-act="rename" data-id="${d.id}" data-name="${nm}">✎</button>` +
          (d.is_active
            ? `<button title="停用" data-act="deactivate" data-id="${d.id}" data-name="${nm}">⊘</button>`
            : `<button title="重新啟用" data-act="reactivate" data-id="${d.id}" style="color:var(--ok);">↻</button>` +
              `<button title="刪除" class="danger" data-act="delete" data-id="${d.id}" data-name="${nm}">🗑</button>`)
        ) : "";
        return `<div class="user-row">
          <div>${isAdmin ? `<input type="checkbox" class="dept-check" data-id="${d.id}" style="width:16px;height:16px;cursor:pointer;">` : ""}</div>
          <div style="font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${nm}</div>
          <div class="user-cell--status">${statusChip}</div>
          <div class="user-cell--status" style="color:var(--text-3);">${d.user_count} 人</div>
          <div class="row-actions">${actions}</div>
        </div>`;
      }).join("");

    table.querySelectorAll("button[data-act]").forEach((btn) => {
      btn.addEventListener("click", () => onDeptAction(btn.dataset.act, parseInt(btn.dataset.id, 10), btn.dataset.name));
    });
    if (isAdmin) {
      const allCb = table.querySelector("#dept-check-all");
      table.querySelectorAll(".dept-check").forEach((c) => c.addEventListener("change", _refreshDeptBatchBar));
      if (allCb) allCb.addEventListener("change", () => {
        table.querySelectorAll(".dept-check").forEach((c) => { c.checked = allCb.checked; });
        _refreshDeptBatchBar();
      });
      _wireDeptBatchBar();
      _refreshDeptBatchBar();
    }
  }

  let _deptList = [];
  function _selectedDeptIds() {
    return Array.from(document.querySelectorAll("#kbv5-dept-table .dept-check:checked"))
      .map((c) => parseInt(c.dataset.id, 10));
  }
  function _refreshDeptBatchBar() {
    const bar = document.getElementById("kbv5-dept-batch");
    if (!bar) return;
    const ids = _selectedDeptIds();
    bar.classList.toggle("is-active", ids.length > 0);
    const cnt = document.getElementById("kbv5-dept-batch-count");
    if (cnt) cnt.textContent = `已選 ${ids.length} 個部門`;
  }
  function _wireDeptBatchBar() {
    const bar = document.getElementById("kbv5-dept-batch");
    if (!bar || bar.dataset.kbv5 === "1") return;
    bar.dataset.kbv5 = "1";
    bar.querySelectorAll("button[data-bact]").forEach((btn) => {
      btn.addEventListener("click", () => onDeptBatch(btn.dataset.bact));
    });
  }

  async function onDeptBatch(bact) {
    if (bact === "clear") {
      document.querySelectorAll("#kbv5-dept-table .dept-check, #dept-check-all").forEach((c) => { c.checked = false; });
      _refreshDeptBatchBar();
      return;
    }
    const ids = _selectedDeptIds();
    if (!ids.length) { toast("請先勾選部門", "error"); return; }

    if (bact === "reactivate") {
      let ok = 0, fail = 0;
      for (const id of ids) {
        const r = await api(`/api/departments/${id}/reactivate`, { method: "POST" });
        if (r.ok) ok++; else fail++;
      }
      toast(`重新啟用：成功 ${ok}` + (fail ? `，失敗 ${fail}` : ""), fail ? "error" : "ok");
      loadDepartmentsAdmin();
      return;
    }
    // deactivate / delete 需 step-up 密碼（問一次，套用全部）
    const label = bact === "deactivate" ? "批次停用" : "批次刪除";
    await stepUpPrompt({
      title: `${label}（已選 ${ids.length} 個）`,
      desc: bact === "deactivate"
        ? "停用的部門須無啟用中使用者；無法停用者會被略過。需密碼確認。"
        : "刪除的部門須已停用且無使用者/文件引用；不符者會被略過。需密碼確認。",
      submitText: label,
    }, async (password) => {
      // 先驗一次密碼（用任一 endpoint 會驗），這裡逐筆送同一密碼
      let ok = 0; const fails = [];
      for (const id of ids) {
        const path = bact === "deactivate"
          ? `/api/departments/${id}/deactivate` : `/api/departments/${id}`;
        const method = bact === "deactivate" ? "POST" : "DELETE";
        const r = await api(path, { method, body: JSON.stringify({ password }) });
        if (r.ok) { ok++; continue; }
        const j = await r.json().catch(() => ({}));
        // 密碼錯 → 中止並保留 dialog
        if (pickErrCode(j) === "step_up_failed") return "密碼確認失敗";
        const nm = (_deptList.find((d) => d.id === id) || {}).name || id;
        fails.push(`${nm}（${errMsg(j, "失敗")}）`);
      }
      loadDepartmentsAdmin();
      if (fails.length) { toast(`成功 ${ok}，略過：${fails.join("、")}`, "error"); }
      else toast(`${label}完成（${ok} 個）`, "ok");
    });
  }

  async function onDeptAction(act, did, name) {
    if (act === "rename") {
      await securePrompt({
        title: `部門改名：${name}`,
        fields: [{ name: "name", label: "新名稱", type: "text", value: name }],
        submitText: "儲存",
        onSubmit: async (v) => {
          const nn = (v.name || "").trim();
          if (!nn) return "請輸入名稱";
          const r = await api(`/api/departments/${did}`, { method: "PATCH", body: JSON.stringify({ name: nn }) });
          const j = await r.json().catch(() => ({}));
          if (!r.ok) return errMsg(j, "改名失敗");
          toast("已更名（使用者/文件部門同步）", "ok");
          loadDepartmentsAdmin();
        },
      });
    } else if (act === "deactivate") {
      await stepUpPrompt({
        title: `停用部門：${name}`,
        desc: "停用後此部門不再出現在下拉選單。需該部門無啟用中使用者。需密碼確認。",
      }, async (password) => {
        const r = await api(`/api/departments/${did}/deactivate`, { method: "POST", body: JSON.stringify({ password }) });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) return errMsg(j, "停用失敗");
        toast("已停用部門", "ok");
        loadDepartmentsAdmin();
      });
    } else if (act === "reactivate") {
      const r = await api(`/api/departments/${did}/reactivate`, { method: "POST" });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { toast(errMsg(j, "重新啟用失敗"), "error"); return; }
      toast("已重新啟用", "ok");
      loadDepartmentsAdmin();
    } else if (act === "delete") {
      await stepUpPrompt({
        title: `刪除部門：${name}`,
        desc: "永久刪除（須已停用且無使用者/文件引用）。需密碼確認。",
        submitText: "確認刪除",
      }, async (password) => {
        const r = await api(`/api/departments/${did}`, { method: "DELETE", body: JSON.stringify({ password }) });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) return errMsg(j, "刪除失敗");
        toast("已刪除部門", "ok");
        loadDepartmentsAdmin();
      });
    }
  }

  // ============================================================
  // §41.5 跨部門主題管理（admin/senior，注入式分頁）
  // ============================================================
  function ensureCrossDeptStyle() {
    if (document.getElementById("kbv5-xdept-style")) return;
    const st = document.createElement("style");
    st.id = "kbv5-xdept-style";
    st.textContent =
      "#kbv5-xdept-list .xdept-card{border:1px solid #e2e8f0;border-radius:8px;padding:14px 16px;margin-bottom:12px;background:#fff;}" +
      "#kbv5-xdept-list .xdept-card.is-moc{background:#f0fdf4;border-color:#bbf7d0;}" +
      "#kbv5-xdept-list .xdept-card.is-ign{background:#f8fafc;opacity:.7;}" +
      "#kbv5-xdept-list .xdept-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}" +
      "#kbv5-xdept-list .xdept-title{font-weight:600;color:#0b1f33;font-size:15px;}" +
      "#kbv5-xdept-list .xdept-chip{display:inline-block;padding:2px 8px;border-radius:10px;background:#e0f2fe;color:#075985;font-size:11px;margin-right:4px;}" +
      "#kbv5-xdept-list .xdept-doc{color:#2563eb;text-decoration:none;cursor:pointer;}" +
      "#kbv5-xdept-list .xdept-doc + .xdept-doc::before{content:'、';color:#94a3b8;}" +
      "#kbv5-xdept-list .xdept-status{font-size:11px;padding:3px 10px;border-radius:10px;font-weight:600;}" +
      "#kbv5-xdept-list .xdept-status.s-pending{background:#fef3c7;color:#92400e;}" +
      "#kbv5-xdept-list .xdept-status.s-moc{background:#d1fae5;color:#065f46;}" +
      "#kbv5-xdept-list .xdept-status.s-ign{background:#e5e7eb;color:#475569;}";
    document.head.appendChild(st);
  }

  function wireCrossDeptAdmin(adminPage) {
    const tabs = adminPage.querySelector(".admin-tabs");
    if (!tabs || tabs.dataset.kbv5Xdept === "1") return;
    const role = (Auth.user && Auth.user.role) || "user";
    if (role !== "admin" && role !== "senior_manager") return;   // 後端亦強制
    tabs.dataset.kbv5Xdept = "1";
    ensureCrossDeptStyle();

    const tabBtn = document.createElement("button");
    tabBtn.className = "admin-tab";
    tabBtn.dataset.tabTarget = "cross-dept-topics";
    tabBtn.textContent = "跨部門主題";
    tabs.appendChild(tabBtn);

    const pane = document.createElement("div");
    pane.className = "admin-pane";
    pane.dataset.tab = "cross-dept-topics";
    pane.innerHTML =
      '<div class="admin-toolbar">' +
      '<div class="admin-toolbar__left">' +
      '<select id="kbv5-xdept-filter" style="padding:7px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;">' +
      '<option value="">全部</option>' +
      '<option value="pending">待處理</option>' +
      '<option value="moc_created">已建立 MOC</option>' +
      '<option value="ignored">已忽略</option>' +
      "</select></div>" +
      '<div class="admin-toolbar__right">' +
      '<button class="btn btn--ghost btn--sm" id="kbv5-xdept-refresh">重新整理</button>' +
      "</div></div>" +
      '<div id="kbv5-xdept-list"></div>';
    const lastPane = Array.from(adminPage.querySelectorAll(".admin-pane")).pop();
    if (lastPane && lastPane.parentNode) lastPane.parentNode.insertBefore(pane, lastPane.nextSibling);
    else adminPage.appendChild(pane);

    tabBtn.addEventListener("click", () => {
      adminPage.querySelectorAll(".admin-tab").forEach((b) => b.classList.remove("is-active"));
      tabBtn.classList.add("is-active");
      adminPage.querySelectorAll(".admin-pane").forEach((p) => p.classList.remove("is-active"));
      pane.classList.add("is-active");
      loadCrossDeptTopics();
    });
    adminPage.querySelectorAll('.admin-tab[data-tab-target]').forEach((b) => {
      if (b === tabBtn) return;
      b.addEventListener("click", () => {
        tabBtn.classList.remove("is-active");
        pane.classList.remove("is-active");
      });
    });
    pane.querySelector("#kbv5-xdept-refresh").addEventListener("click", loadCrossDeptTopics);
    pane.querySelector("#kbv5-xdept-filter").addEventListener("change", loadCrossDeptTopics);
  }

  async function loadCrossDeptTopics() {
    const pane = document.querySelector('.admin-pane[data-tab="cross-dept-topics"]');
    if (!pane) return;
    const list = pane.querySelector("#kbv5-xdept-list");
    const status = pane.querySelector("#kbv5-xdept-filter").value;
    list.innerHTML = '<div style="padding:24px;text-align:center;color:#94a3b8;">載入中…</div>';
    const url = "/api/admin/cross-department-topics" + (status ? `?status=${status}` : "");
    const r = await api(url);
    if (!r.ok) {
      list.innerHTML = '<div style="padding:24px;color:#b91c1c;">' +
        escapeHtml(errMsg(await r.json().catch(() => ({})), "讀取失敗")) + "</div>";
      return;
    }
    const items = (await r.json()).items || [];
    if (!items.length) {
      list.innerHTML = '<div style="padding:32px;text-align:center;color:#94a3b8;font-size:13px;">' +
        "目前無跨部門主題重疊。AI 偵測到不同部門有同主題且合併被擋時，會自動列在此處。</div>";
      return;
    }
    list.innerHTML = items.map(renderCrossDeptCard).join("");
    list.querySelectorAll("[data-xdept-doc]").forEach((el) =>
      el.addEventListener("click", (e) => { e.preventDefault();
        NS.openDocView(parseInt(el.dataset.xdeptDoc, 10)); }));
    list.querySelectorAll("[data-xdept-moc]").forEach((el) =>
      el.addEventListener("click", () => NS.openDocView(parseInt(el.dataset.xdeptMoc, 10))));
    list.querySelectorAll("[data-xdept-action]").forEach((btn) =>
      btn.addEventListener("click", () => crossDeptAction(btn.dataset.xdeptAction,
        parseInt(btn.dataset.xdeptId, 10), btn.dataset.xdeptTopic || "")));
  }

  function renderCrossDeptCard(t) {
    const stCls = t.status === "moc_created" ? "is-moc" : (t.status === "ignored" ? "is-ign" : "");
    const stLabel = { pending: "待處理", moc_created: "已建立 MOC", ignored: "已忽略" }[t.status] || t.status;
    const stKey = { pending: "s-pending", moc_created: "s-moc", ignored: "s-ign" }[t.status] || "s-pending";
    const depts = (t.departments || []).map((d) =>
      `<span class="xdept-chip">${escapeHtml(d)}</span>`).join("");
    const docs = (t.documents || []).map((d) =>
      `<a class="xdept-doc" data-xdept-doc="${d.id}">${escapeHtml(d.title)}（${escapeHtml(d.owner_department || "")}）</a>`).join("");
    let actions = "";
    if (t.status === "pending") {
      actions =
        `<button class="btn btn--primary btn--sm" data-xdept-action="moc" data-xdept-id="${t.id}" data-xdept-topic="${escapeHtml(t.topic)}">建立統一 MOC</button>` +
        `<button class="btn btn--ghost btn--sm" data-xdept-action="ignore" data-xdept-id="${t.id}" style="margin-left:6px;">忽略 30 天</button>`;
    } else if (t.status === "moc_created" && t.moc_id) {
      actions = `<button class="btn btn--ghost btn--sm" data-xdept-moc="${t.moc_id}">開啟 MOC →</button>`;
    }
    return `<div class="xdept-card ${stCls}"><div class="xdept-row">` +
      `<div style="flex:1;"><div class="xdept-title">${escapeHtml(t.topic)}</div>` +
      `<div style="margin-top:6px;">${depts}</div>` +
      `<div style="margin-top:8px;font-size:13px;color:#475569;">${docs}</div></div>` +
      `<div style="text-align:right;"><span class="xdept-status ${stKey}">${stLabel}</span>` +
      `<div style="margin-top:10px;">${actions}</div></div></div></div>`;
  }

  async function crossDeptAction(action, tid, topic) {
    if (action === "moc") {
      if (!window.confirm(`為「${topic}」建立統一 MOC？\n會生成一篇 public 純索引文件，並把涉及文件的「所屬 MOC」指向它。`)) return;
      const r = await api(`/api/admin/cross-department-topics/${tid}/moc`, { method: "POST" });
      if (!r.ok) { toast(errMsg(await r.json().catch(() => ({})), "建立失敗"), "error"); return; }
      toast("統一 MOC 已建立", "success");
      loadCrossDeptTopics();
    } else if (action === "ignore") {
      if (!window.confirm("忽略此主題 30 天？期間不再通知。")) return;
      const r = await api(`/api/admin/cross-department-topics/${tid}/ignore`, { method: "POST" });
      if (!r.ok) { toast(errMsg(await r.json().catch(() => ({})), "操作失敗"), "error"); return; }
      toast("已忽略 30 天", "info");
      loadCrossDeptTopics();
    }
  }

  // ============================================================
  // §48.9 文檔模板管理（注入式分頁；admin/senior/manager 限定）
  // ============================================================
  function ensureTplAdminStyle() {
    if (document.getElementById("kbv5-tpla-style")) return;
    const st = document.createElement("style");
    st.id = "kbv5-tpla-style";
    st.textContent =
      "#kbv5-tpla-table .user-table__head,#kbv5-tpla-table .user-row{" +
      "grid-template-columns:minmax(180px,2fr) 90px 70px 70px minmax(120px,1.2fr);}" +
      "#kbv5-tpla-table .row-actions{justify-content:flex-start;gap:6px;}" +
      "#kbv5-tpla-modal textarea{width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;" +
      "font-size:13px;font-family:ui-monospace,monospace;box-sizing:border-box;resize:vertical;}";
    document.head.appendChild(st);
  }

  function wireTemplatesAdmin(adminPage) {
    const tabs = adminPage.querySelector(".admin-tabs");
    if (!tabs || tabs.dataset.kbv5Tpla === "1") return;
    const role = (Auth.user && Auth.user.role) || "user";
    if (!["admin", "senior_manager", "manager"].includes(role)) return;
    tabs.dataset.kbv5Tpla = "1";
    ensureTplAdminStyle();

    const tabBtn = document.createElement("button");
    tabBtn.className = "admin-tab";
    tabBtn.dataset.tabTarget = "templates";
    tabBtn.textContent = "文檔模板";
    tabs.appendChild(tabBtn);

    const pane = document.createElement("div");
    pane.className = "admin-pane";
    pane.dataset.tab = "templates";
    pane.innerHTML =
      '<div class="admin-toolbar"><div class="admin-toolbar__left">' +
      '<button class="btn btn--ghost btn--sm" id="kbv5-tpla-trash-toggle">🗑 垃圾桶</button>' +
      "</div>" +
      '<div class="admin-toolbar__right">' +
      '<button class="btn btn--primary btn--sm" id="kbv5-tpla-add">+ 新增模板</button>' +
      "</div></div>" +
      '<div class="user-table" id="kbv5-tpla-table">' +
      '<div class="user-table__head" id="kbv5-tpla-head">' +
      '<div>名稱 / 描述</div><div>範圍</div><div>預設</div><div>啟用</div><div>操作</div>' +
      "</div></div>";
    const lastPane = Array.from(adminPage.querySelectorAll(".admin-pane")).pop();
    if (lastPane && lastPane.parentNode) lastPane.parentNode.insertBefore(pane, lastPane.nextSibling);
    else adminPage.appendChild(pane);

    tabBtn.addEventListener("click", () => {
      adminPage.querySelectorAll(".admin-tab").forEach((b) => b.classList.remove("is-active"));
      tabBtn.classList.add("is-active");
      adminPage.querySelectorAll(".admin-pane").forEach((p) => p.classList.remove("is-active"));
      pane.classList.add("is-active");
      _tplaTrashView = false;  // 每次進分頁回到模板列表（非垃圾桶）
      loadTemplatesAdmin();
    });
    adminPage.querySelectorAll('.admin-tab[data-tab-target]').forEach((b) => {
      if (b === tabBtn) return;
      b.addEventListener("click", () => {
        tabBtn.classList.remove("is-active");
        pane.classList.remove("is-active");
      });
    });
    pane.querySelector("#kbv5-tpla-add").addEventListener("click", () => openTemplateModal(null));
    pane.querySelector("#kbv5-tpla-trash-toggle").addEventListener("click", () => {
      _tplaTrashView = !_tplaTrashView;
      loadTemplatesAdmin();
    });
  }

  // 文檔模板：是否處於垃圾桶檢視
  let _tplaTrashView = false;

  async function loadTemplatesAdmin() {
    const table = document.querySelector("#kbv5-tpla-table");
    if (!table) return;
    table.querySelectorAll(".user-row").forEach((el) => el.remove());
    const head = document.querySelector("#kbv5-tpla-head");
    const toggle = document.querySelector("#kbv5-tpla-trash-toggle");
    const addBtn = document.querySelector("#kbv5-tpla-add");
    if (_tplaTrashView) {
      if (toggle) toggle.textContent = "← 返回模板列表";
      if (addBtn) addBtn.style.display = "none";
      if (head) head.innerHTML = "<div>名稱 / 描述</div><div>範圍</div><div>刪除者</div><div>剩餘天數</div><div>操作</div>";
      return renderTemplateTrash(table);
    }
    if (toggle) toggle.textContent = "🗑 垃圾桶";
    if (addBtn) addBtn.style.display = "";
    if (head) head.innerHTML = "<div>名稱 / 描述</div><div>範圍</div><div>預設</div><div>啟用</div><div>操作</div>";
    const r = await api("/api/templates?include_inactive=true");
    const items = r.ok ? await r.json() : [];
    if (!items.length) {
      const msg = document.createElement("div");
      msg.className = "user-row";
      msg.style.cssText = "padding:32px;text-align:center;color:#94a3b8;font-size:13px;";
      msg.textContent = "尚未建立模板。按右上「+ 新增模板」開始。";
      table.appendChild(msg);
      return;
    }
    items.forEach((t) => {
      const row = document.createElement("div");
      row.className = "user-row";
      if (!t.is_active) row.style.opacity = "0.55";  // 停用列淡化，但仍可見可操作
      const scopeLabel = t.scope === "global" ? "全域" : `部門：${t.department_name || ""}`;
      row.innerHTML =
        `<div><div style="font-weight:600;color:#0b1f33;">${escapeHtml(t.name)}</div>` +
        (t.description ? `<div style="font-size:11px;color:#64748b;margin-top:2px;">${escapeHtml(t.description)}</div>` : "") + "</div>" +
        `<div style="font-size:12px;">${escapeHtml(scopeLabel)}</div>` +
        `<div>${t.is_default ? '<span style="color:#059669;">★</span>' : ""}</div>` +
        `<div>${t.is_active ? "✓" : '<span style="color:#94a3b8;">停用</span>'}</div>` +
        '<div class="row-actions">' +
        `<button title="編輯" data-tpla-edit="${t.id}">✎</button>` +
        (t.is_active && !t.is_default
          ? `<button title="設為預設" data-tpla-default="${t.id}">★</button>`
          : "") +
        (t.is_active
          ? `<button title="停用" class="danger" data-tpla-del="${t.id}">⊘</button>`
          : `<button title="啟用" data-tpla-enable="${t.id}">↻</button>`) +
        `<button title="刪除（移入垃圾桶）" class="danger" data-tpla-trash="${t.id}">🗑</button>` +
        "</div>";
      table.appendChild(row);
    });
    table.querySelectorAll("[data-tpla-edit]").forEach((b) =>
      b.addEventListener("click", () => openTemplateModal(parseInt(b.dataset.tplaEdit, 10))));
    table.querySelectorAll("[data-tpla-default]").forEach((b) =>
      b.addEventListener("click", async () => {
        const r2 = await api(`/api/admin/templates/${b.dataset.tplaDefault}/set-default`, { method: "POST" });
        if (r2.ok) { toast("已設為預設", "ok"); loadTemplatesAdmin(); }
        else toast(errMsg(await r2.json().catch(() => ({})), "操作失敗"), "error");
      }));
    table.querySelectorAll("[data-tpla-del]").forEach((b) =>
      b.addEventListener("click", async () => {
        if (!window.confirm("停用此模板？既有使用此模板的文件保留原樣。")) return;
        const r2 = await api(`/api/admin/templates/${b.dataset.tplaDel}`, { method: "DELETE" });
        if (r2.ok) { toast("已停用", "ok"); loadTemplatesAdmin(); }
        else toast(errMsg(await r2.json().catch(() => ({})), "停用失敗"), "error");
      }));
    table.querySelectorAll("[data-tpla-enable]").forEach((b) =>
      b.addEventListener("click", async () => {
        const r2 = await api(`/api/admin/templates/${b.dataset.tplaEnable}`, {
          method: "PUT", body: JSON.stringify({ is_active: true }),
        });
        if (r2.ok) { toast("已啟用", "ok"); loadTemplatesAdmin(); }
        else toast(errMsg(await r2.json().catch(() => ({})), "啟用失敗"), "error");
      }));
    table.querySelectorAll("[data-tpla-trash]").forEach((b) =>
      b.addEventListener("click", async () => {
        if (!window.confirm("刪除此模板？將移入垃圾桶，30 天後自動永久刪除；期間可還原。")) return;
        const r2 = await api(`/api/admin/templates/${b.dataset.tplaTrash}/trash`, { method: "POST" });
        if (r2.ok) { toast("已移入垃圾桶", "ok"); loadTemplatesAdmin(); }
        else toast(errMsg(await r2.json().catch(() => ({})), "刪除失敗"), "error");
      }));
  }

  async function renderTemplateTrash(table) {
    const r = await api("/api/admin/templates/trash");
    const data = r.ok ? await r.json() : { items: [] };
    const items = data.items || [];
    if (!items.length) {
      const msg = document.createElement("div");
      msg.className = "user-row";
      msg.style.cssText = "padding:32px;text-align:center;color:#94a3b8;font-size:13px;";
      msg.textContent = "垃圾桶是空的。被刪除的模板會在此保留 30 天，逾期自動永久刪除。";
      table.appendChild(msg);
      return;
    }
    items.forEach((t) => {
      const row = document.createElement("div");
      row.className = "user-row";
      const scopeLabel = t.scope === "global" ? "全域" : `部門：${t.department_name || ""}`;
      const dleft = (t.days_left == null) ? "—" : `${t.days_left} 天`;
      const dColor = (t.days_left != null && t.days_left <= 7) ? "#dc2626" : "#64748b";
      row.innerHTML =
        `<div><div style="font-weight:600;color:#0b1f33;">${escapeHtml(t.name)}</div>` +
        (t.description ? `<div style="font-size:11px;color:#64748b;margin-top:2px;">${escapeHtml(t.description)}</div>` : "") + "</div>" +
        `<div style="font-size:12px;">${escapeHtml(scopeLabel)}</div>` +
        `<div style="font-size:12px;color:#64748b;">${escapeHtml(t.deleted_by || "—")}</div>` +
        `<div style="font-size:12px;color:${dColor};">${dleft}</div>` +
        '<div class="row-actions">' +
        `<button title="還原" data-tpla-restore="${t.id}">↩</button>` +
        `<button title="永久刪除（不可逆）" class="danger" data-tpla-perm="${t.id}">✕</button>` +
        "</div>";
      table.appendChild(row);
    });
    table.querySelectorAll("[data-tpla-restore]").forEach((b) =>
      b.addEventListener("click", async () => {
        const r2 = await api(`/api/admin/templates/${b.dataset.tplaRestore}/restore`, { method: "POST" });
        if (r2.ok) { toast("已還原（停用狀態，請至列表啟用）", "ok"); loadTemplatesAdmin(); }
        else toast(errMsg(await r2.json().catch(() => ({})), "還原失敗"), "error");
      }));
    table.querySelectorAll("[data-tpla-perm]").forEach((b) =>
      b.addEventListener("click", async () => {
        if (!window.confirm("永久刪除此模板？此操作無法復原。")) return;
        const r2 = await api(`/api/admin/templates/${b.dataset.tplaPerm}/permanent`, { method: "DELETE" });
        if (r2.ok) { toast("已永久刪除", "ok"); loadTemplatesAdmin(); }
        else toast(errMsg(await r2.json().catch(() => ({})), "永久刪除失敗"), "error");
      }));
  }

  async function openTemplateModal(tplId) {
    const isEdit = tplId !== null;
    let current = null;
    if (isEdit) {
      const r = await api(`/api/templates/${tplId}`);
      if (!r.ok) { toast("讀取失敗", "error"); return; }
      current = await r.json();
    }
    // 部門清單
    let depts = [];
    try {
      const dr = await api("/api/departments?is_active=true");
      if (dr.ok) depts = await dr.json();
    } catch (_e) {}
    const m = _kbModal(
      '<div id="kbv5-tpla-modal" style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">' +
      `<div style="font-size:15px;font-weight:600;color:#0b1f33;">${isEdit ? "編輯模板" : "新增模板"}</div>` +
      '<button id="tpla-x" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button></div>' +
      '<div id="kbv5-tpla-modal" style="padding:18px 22px;max-height:70vh;overflow:auto;">' +
      '<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;">' +
      '<div><label style="display:block;font-size:12px;color:#475569;margin-bottom:4px;">名稱 *</label>' +
      `<input id="tpla-name" value="${escapeHtml(current?.name || "")}" style="width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;box-sizing:border-box;"></div>` +
      '<div><label style="display:block;font-size:12px;color:#475569;margin-bottom:4px;">範圍 *</label>' +
      `<select id="tpla-scope" ${isEdit ? "disabled" : ""} style="width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;box-sizing:border-box;">` +
      `<option value="global" ${current?.scope === "global" ? "selected" : ""}>全域（admin/senior 限定）</option>` +
      `<option value="department" ${current?.scope === "department" ? "selected" : ""}>部門</option>` +
      "</select></div></div>" +
      '<div id="tpla-dept-wrap" style="margin-bottom:12px;display:none;">' +
      '<label style="display:block;font-size:12px;color:#475569;margin-bottom:4px;">部門 *</label>' +
      `<select id="tpla-dept" ${isEdit ? "disabled" : ""} style="width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;box-sizing:border-box;">` +
      depts.map((d) => `<option value="${d.id}" ${current?.department_id === d.id ? "selected" : ""}>${escapeHtml(d.name)}</option>`).join("") +
      "</select></div>" +
      '<div style="margin-bottom:12px;"><label style="display:block;font-size:12px;color:#475569;margin-bottom:4px;">描述</label>' +
      `<input id="tpla-desc" value="${escapeHtml(current?.description || "")}" placeholder="200 字內" style="width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;box-sizing:border-box;"></div>` +
      '<div style="margin-bottom:12px;">' +
      '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">' +
      '<label style="font-size:12px;color:#475569;">文件區塊（AI 會依此產出對應段落）*</label>' +
      '<button id="tpla-struct-toggle" class="btn btn--quiet btn--sm" style="font-size:11px;padding:4px 10px;">切換到 Markdown ▾</button>' +
      "</div>" +
      '<div id="tpla-struct-blocks" style="display:none;border:1px solid #e2e8f0;border-radius:6px;padding:10px;background:#f8fafc;">' +
      '<div id="tpla-struct-rows" style="display:flex;flex-direction:column;gap:6px;"></div>' +
      '<button id="tpla-struct-add" style="margin-top:8px;padding:6px 14px;border:1px dashed #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:12px;">+ 新增區塊</button>' +
      "</div>" +
      `<textarea id="tpla-struct" rows="6" placeholder="## 區塊一&#10;## 區塊二" style="display:none;">${escapeHtml(current?.structure_md || "")}</textarea>` +
      "</div>" +
      '<div style="margin-bottom:12px;">' +
      '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">' +
      '<label style="font-size:12px;color:#475569;">AI 指令（用詞/單位/格式等）*</label>' +
      '<div style="display:flex;gap:6px;">' +
      '<button id="tpla-opt-undo" class="btn btn--quiet btn--sm" style="display:none;font-size:11px;padding:4px 10px;">↩ 還原</button>' +
      '<button id="tpla-opt-btn" class="btn btn--ghost btn--sm" style="font-size:11px;padding:4px 10px;">✨ 一鍵優化（AI）</button>' +
      "</div></div>" +
      `<textarea id="tpla-prompt" rows="5" placeholder="你是 XX 寫手。請依下列規則...">${escapeHtml(current?.ai_prompt || "")}</textarea></div>` +
      '<div style="margin-bottom:12px;"><label style="display:block;font-size:12px;color:#475569;margin-bottom:4px;">範例內容（選填，給使用者參考）</label>' +
      `<textarea id="tpla-example" rows="4">${escapeHtml(current?.example_content || "")}</textarea></div>` +
      '<label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#475569;">' +
      `<input id="tpla-default" type="checkbox" ${current?.is_default ? "checked" : ""}> 設為該範圍預設模板（同範圍只能一筆預設）</label>` +
      "</div>" +
      '<div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;">' +
      '<button id="tpla-cancel" class="btn btn--quiet btn--sm">取消</button>' +
      `<button id="tpla-save" class="btn btn--primary btn--sm">${isEdit ? "儲存" : "建立"}</button></div>`,
      640);
    const scope = m.card.querySelector("#tpla-scope");
    const deptWrap = m.card.querySelector("#tpla-dept-wrap");
    function syncDeptVis() { deptWrap.style.display = scope.value === "department" ? "" : "none"; }
    scope.addEventListener("change", syncDeptVis); syncDeptVis();

    // ===== 結構建構器（區塊模式 vs 原始 Markdown）=====
    const blocksWrap = m.card.querySelector("#tpla-struct-blocks");
    const blocksRows = m.card.querySelector("#tpla-struct-rows");
    const blocksAdd = m.card.querySelector("#tpla-struct-add");
    const structTa = m.card.querySelector("#tpla-struct");
    const structToggle = m.card.querySelector("#tpla-struct-toggle");
    let structMode = "blocks";
    function parseMdToTitles(md) {
      // 回 null 表示「無法無損轉為純標題列」（含非標題內容）
      const lines = (md || "").split(/\r?\n/);
      const titles = [];
      for (const ln of lines) {
        const t = ln.trim(); if (!t) continue;
        const mm = t.match(/^##\s+(.+)$/); if (!mm) return null;
        titles.push(mm[1].trim());
      }
      return titles;
    }
    function addBlockRow(title) {
      const row = document.createElement("div");
      row.style.cssText = "display:flex;gap:6px;align-items:center;";
      row.innerHTML =
        `<span style="color:#94a3b8;font-size:13px;font-weight:600;">##</span>` +
        `<input class="tpla-blk-input" value="${escapeHtml(title || "")}" placeholder="區塊標題（例：實驗目的）" ` +
        'style="flex:1;padding:6px 10px;border:1px solid #cbd5e1;border-radius:4px;font-size:13px;">' +
        '<button class="tpla-blk-up" title="上移" style="border:0;background:transparent;color:#94a3b8;font-size:14px;cursor:pointer;padding:0 4px;">↑</button>' +
        '<button class="tpla-blk-dn" title="下移" style="border:0;background:transparent;color:#94a3b8;font-size:14px;cursor:pointer;padding:0 4px;">↓</button>' +
        '<button class="tpla-blk-del" title="移除" style="border:0;background:transparent;color:#94a3b8;font-size:16px;cursor:pointer;padding:0 6px;">✕</button>';
      row.querySelector(".tpla-blk-del").addEventListener("click", () => {
        if (blocksRows.children.length > 1) row.remove();
      });
      row.querySelector(".tpla-blk-up").addEventListener("click", () => {
        if (row.previousElementSibling) blocksRows.insertBefore(row, row.previousElementSibling);
      });
      row.querySelector(".tpla-blk-dn").addEventListener("click", () => {
        if (row.nextElementSibling) blocksRows.insertBefore(row.nextElementSibling, row);
      });
      blocksRows.appendChild(row);
    }
    function collectBlocksToMd() {
      return Array.from(blocksRows.querySelectorAll(".tpla-blk-input"))
        .map((i) => i.value.trim()).filter(Boolean).map((t) => `## ${t}`).join("\n");
    }
    function setStructMode(mode) {
      structMode = mode;
      if (mode === "blocks") {
        blocksWrap.style.display = ""; structTa.style.display = "none";
        structToggle.textContent = "切換到 Markdown ▾";
      } else {
        blocksWrap.style.display = "none"; structTa.style.display = "";
        structToggle.textContent = "切換到區塊 ▴";
      }
    }
    structToggle.addEventListener("click", () => {
      if (structMode === "blocks") {
        structTa.value = collectBlocksToMd();
        setStructMode("raw");
      } else {
        const titles = parseMdToTitles(structTa.value);
        if (titles === null) {
          if (!window.confirm("目前 Markdown 含非標題內容（清單/表格等），切換到區塊模式僅保留 ## 標題，繼續嗎？")) return;
          const fb = (structTa.value.match(/^##\s+(.+)$/gm) || []).map((s) => s.replace(/^##\s+/, "").trim());
          blocksRows.innerHTML = ""; (fb.length ? fb : [""]).forEach(addBlockRow);
        } else {
          blocksRows.innerHTML = ""; (titles.length ? titles : [""]).forEach(addBlockRow);
        }
        setStructMode("blocks");
      }
    });
    blocksAdd.addEventListener("click", () => addBlockRow(""));
    // 初始化：依現有 structure_md 選模式
    {
      const init = parseMdToTitles(current?.structure_md || "");
      if (init !== null) {
        (init.length ? init : [""]).forEach(addBlockRow);
        setStructMode("blocks");
      } else {
        setStructMode("raw");
      }
    }

    // ===== AI 指令一鍵優化 + 還原 =====
    const optBtn = m.card.querySelector("#tpla-opt-btn");
    const optUndo = m.card.querySelector("#tpla-opt-undo");
    const promptTa = m.card.querySelector("#tpla-prompt");
    let promptStash = null;
    optBtn.addEventListener("click", async () => {
      const cur = promptTa.value.trim();
      if (!cur) { toast("請先輸入 AI 指令再優化", "info"); return; }
      optBtn.disabled = true;
      const orig = optBtn.textContent;
      optBtn.textContent = "優化中…";
      try {
        const r = await api("/api/admin/templates/optimize-prompt", {
          method: "POST", body: JSON.stringify({ prompt: cur }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) { toast(errMsg(j, "優化失敗"), "error"); return; }
        promptStash = cur;
        promptTa.value = j.prompt;
        optUndo.style.display = "";
        toast("已用 AI 優化指令（可按還原）", "ok");
      } finally {
        optBtn.disabled = false; optBtn.textContent = orig;
      }
    });
    optUndo.addEventListener("click", () => {
      if (promptStash === null) return;
      promptTa.value = promptStash;
      promptStash = null;
      optUndo.style.display = "none";
      toast("已還原原指令", "info");
    });

    m.card.querySelector("#tpla-x").addEventListener("click", m.close);
    m.card.querySelector("#tpla-cancel").addEventListener("click", m.close);
    m.card.querySelector("#tpla-save").addEventListener("click", async () => {
      const structValue = structMode === "blocks" ? collectBlocksToMd() : structTa.value;
      const payload = {
        name: m.card.querySelector("#tpla-name").value.trim(),
        description: m.card.querySelector("#tpla-desc").value.trim() || null,
        structure_md: structValue,
        ai_prompt: m.card.querySelector("#tpla-prompt").value,
        example_content: m.card.querySelector("#tpla-example").value || null,
        is_default: m.card.querySelector("#tpla-default").checked,
      };
      if (!payload.name || !payload.structure_md.trim() || !payload.ai_prompt.trim()) {
        toast("名稱 / 結構 / AI 指令必填", "error"); return;
      }
      let r;
      if (isEdit) {
        // PUT 不含 scope / department_id（後端不允許改）
        const patch = { name: payload.name, description: payload.description,
                        structure_md: payload.structure_md, ai_prompt: payload.ai_prompt,
                        example_content: payload.example_content };
        r = await api(`/api/admin/templates/${tplId}`, { method: "PUT", body: JSON.stringify(patch) });
      } else {
        payload.scope = scope.value;
        if (payload.scope === "department") {
          payload.department_id = parseInt(m.card.querySelector("#tpla-dept").value, 10);
        }
        r = await api("/api/admin/templates", { method: "POST", body: JSON.stringify(payload) });
      }
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { toast(errMsg(j, "儲存失敗"), "error"); return; }
      // 編輯+勾選 is_default 須額外打 set-default
      if (isEdit && payload.is_default && !current?.is_default) {
        await api(`/api/admin/templates/${tplId}/set-default`, { method: "POST" });
      }
      toast(isEdit ? "已儲存" : "已建立", "ok");
      m.close(); loadTemplatesAdmin();
    });
  }

  // 完整使用者清單快取（供前端篩選）
  let _allUsers = [];

  async function loadAdminUsers() {
    const usersPane = document.querySelector('.admin-pane[data-tab="users"]');
    if (!usersPane) return;
    const table = usersPane.querySelector(".user-table");
    if (!table) return;
    // 先清掉 HTML mockup 寫死的列（避免 API 失敗時殘留示意資料）
    table.querySelectorAll(".user-row").forEach((el) => el.remove());
    const r = await api("/api/users");
    if (!r.ok) {
      _allUsers = [];
      const head = table.querySelector(".user-table__head");
      const msg = document.createElement("div");
      msg.style.cssText = "padding:32px;color:var(--text-3);font-size:13px;text-align:center;";
      msg.className = "user-row";  // 方便下次清除
      msg.textContent = r.status === 403 ? "您沒有檢視使用者管理的權限。" : "載入失敗，請重新整理。";
      table.appendChild(msg);
      return;
    }
    _allUsers = await r.json();
    applyAdminFilters();  // 套用目前篩選條件並 render
  }

  function _userStatusKey(u) {
    if (!u.is_active && !u.last_login) return "pending";   // 待開通
    if (!u.is_active && u.last_login) return "disabled";   // 停用
    return "active";                                       // 已開通
  }

  function applyAdminFilters() {
    const usersPane = document.querySelector('.admin-pane[data-tab="users"]');
    if (!usersPane) return;
    const table = usersPane.querySelector(".user-table");
    if (!table) return;
    const filters = usersPane.querySelector(".admin-filters");
    let q = "", deptF = "", roleF = "", statusF = "";
    if (filters) {
      const input = filters.querySelector("input");
      const selects = filters.querySelectorAll("select");
      q = (input && input.value || "").trim().toLowerCase();
      deptF = selects[0] ? selects[0].value : "";
      roleF = selects[1] ? selects[1].value : "";
      statusF = selects[2] ? selects[2].value : "";
    }
    const ROLE_LABEL_REV = { "管理者": "admin", "高階主管": "senior_manager", "主管": "manager", "一般使用者": "user" };
    const STATUS_REV = { "已開通": "active", "待開通": "pending", "停用": "disabled" };

    const filtered = _allUsers.filter((u) => {
      if (q) {
        const hay = `${u.username} ${u.display_name || ""} ${u.email} ${u.department}`.toLowerCase();
        if (!hay.includes(q)) return false;
      }
      if (deptF && !deptF.startsWith("所有") && u.department !== deptF) return false;
      if (roleF && !roleF.startsWith("所有")) {
        const want = ROLE_LABEL_REV[roleF];
        if (want && u.role !== want) return false;
      }
      if (statusF && !statusF.startsWith("所有")) {
        const want = STATUS_REV[statusF];
        if (want && _userStatusKey(u) !== want) return false;
      }
      return true;
    });

    renderUserRows(table, filtered);
    const toolbar = usersPane.querySelector(".admin-toolbar__left");
    if (toolbar) {
      const pend = _allUsers.filter((u) => _userStatusKey(u) === "pending").length;
      const disabled = _allUsers.filter((u) => _userStatusKey(u) === "disabled").length;
      const shown = filtered.length;
      const total = _allUsers.length;
      const filterNote = shown !== total ? ` · 篩選後 <b style="color:var(--accent);">${shown}</b> 位` : "";
      toolbar.innerHTML =
        `共 <b style="color:var(--text-1);">${total}</b> 位使用者${filterNote}` +
        ` · 待開通 <b style="color:var(--warn);">${pend}</b> · 停用 <b style="color:var(--text-3);">${disabled}</b>`;
    }
  }

  function wireAdminFilters() {
    const usersPane = document.querySelector('.admin-pane[data-tab="users"]');
    if (!usersPane) return;
    const filters = usersPane.querySelector(".admin-filters");
    if (!filters || filters.dataset.kbv5 === "1") return;
    filters.dataset.kbv5 = "1";

    const input = filters.querySelector("input");
    const selects = filters.querySelectorAll("select");
    // 動態填入部門 select（保留第一個「所有部門」）
    if (selects[0]) {
      fetch("/api/departments", { headers: { "Authorization": "Bearer " + (Auth.access || "") } })
        .then((r) => r.ok && r.json())
        .then((list) => {
          if (!list) return;
          selects[0].innerHTML = '<option>所有部門</option>' +
            list.map((d) => `<option>${escapeHtml(d.name)}</option>`).join("");
        }).catch(() => {});
    }
    if (input) {
      input.placeholder = "姓名 / 帳號 / email / 部門";
      let t = null;
      input.addEventListener("input", () => {
        clearTimeout(t);
        t = setTimeout(applyAdminFilters, 200);
      });
    }
    selects.forEach((s) => s.addEventListener("change", applyAdminFilters));
  }

  function renderUserRows(table, list) {
    table.querySelectorAll(".user-row").forEach((el) => el.remove());
    const me = Auth.user || {};
    const frag = document.createDocumentFragment();
    list.forEach((u) => {
      const row = document.createElement("div");
      row.className = "user-row";
      row.dataset.uid = u.id;
      row.dataset.username = u.username;
      row.dataset.email = u.email;
      row.dataset.role = u.role;
      row.dataset.dept = u.department || "";
      const isSelf = u.id === me.id;
      const isLocked = !!u.locked_until;
      const isPending = !u.is_active && !u.last_login;  // 從未登入過 + is_active=0 → 待開通
      const isDisabled = !u.is_active && !!u.last_login; // 曾啟用後被停用
      // 狀態顯示與 HTML 一致（用原 CSS class，不用 inline）
      let statusHtml;
      if (isPending) {
        statusHtml = '<span class="status-dot status-pending">⏳ 待開通</span>';
      } else if (isDisabled) {
        statusHtml = '<span class="status-dot status-disabled">⊘ 停用</span>';
      } else if (isLocked) {
        statusHtml = '<span class="status-dot status-locked">🔒 已鎖定</span>';
      } else if (u.totp_enabled) {
        statusHtml = '<span class="status-dot status-active">已開通 · 2FA</span>';
      } else {
        statusHtml = '<span class="status-dot status-active">已開通</span>';
      }
      const initial = (u.username || "?").slice(0, 1).toUpperCase();
      // 動作按鈕（依狀態給不同組合）
      const actions = [];
      if (isPending) {
        // 待開通：✓ 開通 / ✕ 拒絕（softdelete）
        actions.push('<button title="開通" data-act="approve" style="color:var(--ok);">✓</button>');
      } else if (isDisabled) {
        actions.push('<button title="重新啟用" data-act="reactivate" style="color:var(--ok);">↻</button>');
      } else {
        actions.push('<button title="編輯" data-act="edit">✎</button>');
      }
      if (isLocked) actions.push('<button title="解鎖" data-act="unlock">🔓</button>');
      if (u.is_active) actions.push('<button title="重設密碼" data-act="reset-pwd">⟳</button>');
      if (!isSelf) actions.push('<button title="刪除" class="danger" data-act="delete">🗑</button>');
      // row-check 由 ensureStatusChipStyle 注入 CSS 控制：非批次 visibility:hidden 佔位、批次顯示
      const displayName = u.display_name || u.username;
      const avatarChar = (u.display_name || u.username || "?").slice(0, 1).toUpperCase();
      row.innerHTML = `
        <div class="row-check" data-uid="${u.id}"></div>
        <div class="user-cell--name" data-open-userdetail="${u.id}" style="cursor:pointer;">
          <div class="avatar">${escapeHtml(avatarChar)}</div>
          <div>
            <div class="user-cell__name">${escapeHtml(displayName)}${isSelf ? "(你)" : ""}</div>
            <div class="user-cell__id">@${escapeHtml(u.username)}</div>
          </div>
        </div>
        <div class="user-cell--email">${escapeHtml(u.email)}</div>
        <div class="user-cell--dept">${escapeHtml(u.department || "—")}</div>
        <div class="user-cell--role"><span class="role-badge ${ROLE_BADGE[u.role] || ""}">${ROLE_LABEL[u.role] || u.role}</span></div>
        <div class="user-cell--status">${statusHtml}</div>
        <div class="row-actions">${actions.join("")}</div>`;
      frag.appendChild(row);
    });
    table.appendChild(frag);

    if (table.dataset.kbv5Wired !== "1") {
      table.dataset.kbv5Wired = "1";
      table.addEventListener("click", onUserRowAction);
      // 點 user-cell--name → 開使用者詳情頁
      table.addEventListener("click", (e) => {
        if (table.classList.contains("is-batch")) return;
        const cell = e.target.closest("[data-open-userdetail]");
        if (!cell || e.target.closest("button")) return;
        const uid = parseInt(cell.dataset.openUserdetail, 10);
        if (uid && typeof NS.openUserDetail === "function") NS.openUserDetail(uid);
      });
      // 批次模式選取：點列（非動作鈕）→ toggle is-selected
      table.addEventListener("click", (e) => {
        if (!table.classList.contains("is-batch")) return;
        if (e.target.closest("button")) return;       // 動作鈕不觸發選取
        const row = e.target.closest(".user-row");
        if (!row) return;
        row.classList.toggle("is-selected");
        updateBatchCount();
      });
    }
  }

  function updateBatchCount() {
    const table = document.getElementById("user-table");
    const bar = document.getElementById("admin-batch-bar");
    if (!table || !bar) return;
    const n = table.querySelectorAll(".user-row.is-selected").length;
    const countEl = bar.querySelector(".batch-bar__count");
    if (countEl) countEl.textContent = `已選 ${n} 位`;
  }

  function selectedUserIds() {
    const table = document.getElementById("user-table");
    if (!table) return [];
    return Array.from(table.querySelectorAll(".user-row.is-selected"))
      .map((r) => parseInt(r.dataset.uid, 10))
      .filter((x) => !isNaN(x));
  }

  function wireBatchBar() {
    const bar = document.getElementById("admin-batch-bar");
    const table = document.getElementById("user-table");
    if (!bar || !table || bar.dataset.kbv5 === "1") return;
    bar.dataset.kbv5 = "1";
    const btns = bar.querySelectorAll("button");
    // 順序：全選 / 清除選取 / 批次啟用 / 批次停用 / 批次修改部門 / 退出批次
    const [selectAllBtn, clearBtn, actBtn, deactBtn, deptBtn] = btns;

    if (selectAllBtn) {
      selectAllBtn.addEventListener("click", (e) => {
        e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
        table.querySelectorAll(".user-row").forEach((r) => r.classList.add("is-selected"));
        updateBatchCount();
      }, true);
    }
    if (clearBtn) {
      clearBtn.addEventListener("click", (e) => {
        e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
        table.querySelectorAll(".user-row.is-selected").forEach((r) => r.classList.remove("is-selected"));
        updateBatchCount();
      }, true);
    }
    if (actBtn) {
      actBtn.addEventListener("click", (e) => {
        e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
        runBatch("activate");
      }, true);
    }
    if (deactBtn) {
      deactBtn.addEventListener("click", (e) => {
        e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
        runBatch("deactivate");
      }, true);
    }
    if (deptBtn) {
      deptBtn.addEventListener("click", (e) => {
        e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
        runBatch("set_department");
      }, true);
    }
  }

  async function runBatch(action) {
    const ids = selectedUserIds();
    if (ids.length === 0) { toast("請先勾選使用者", "error"); return; }
    const body = { action, user_ids: ids };

    if (action === "set_department") {
      // 取部門清單供下拉選擇
      let deptList = [];
      try {
        const r = await fetch("/api/departments",
          { headers: { "Authorization": "Bearer " + (Auth.access || "") } });
        if (r.ok) deptList = (await r.json()).filter((d) => d.is_active).map((d) => d.name);
      } catch (e) {}
      if (!deptList.length) { toast("無可用部門", "error"); return; }
      const v = await securePrompt({
        title: `批次修改部門（已選 ${ids.length} 位）`,
        fields: [{ name: "department", label: "目標部門", type: "select",
                   options: deptList, value: deptList[0] }],
      });
      if (!v || !v.department) return;
      body.department = v.department;
    } else {
      // activate / deactivate → step-up 密碼（失敗不關 dialog，可重試）
      const label = action === "activate" ? "批次啟用" : "批次停用";
      await stepUpPrompt({
        title: `${label}（已選 ${ids.length} 位）`,
        desc: "此動作需密碼確認，將寫入稽核日誌。",
      }, async (password) => {
        const r = await api("/api/users/batch", {
          method: "POST", body: JSON.stringify({ ...body, step_up_password: password }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) return errMsg(j, "批次操作失敗");
        _batchToast(j);
        loadAdminUsers();
      });
      return;
    }

    const r = await api("/api/users/batch", {
      method: "POST", body: JSON.stringify(body),
    });
    const j = await r.json().catch(() => ({}));
    if (!r.ok) { toast(errMsg(j, "批次操作失敗"), "error"); return; }
    _batchToast(j);
    loadAdminUsers();
  }

  function _batchToast(j) {
    const okN = (j.ok || []).length;
    const skipN = (j.skipped || []).length;
    const failN = (j.failed || []).length;
    toast(`完成 ${okN} 位` + (skipN ? `，略過 ${skipN}` : "") + (failN ? `，失敗 ${failN}` : ""), "ok");
  }

  function escapeHtml(s) { return Pure.escapeHtml(s); }   // XSS 跳脫抽到 pure.js（已測）

  // UTC ISO 時間戳 → 使用者「本地時區」的日期/時間（稽核等精確時刻顯示用；
  // 注意：純日曆日期如 due_at 不可用此轉換，會因時區位移日期）。
  function _localDate(iso) {
    const d = new Date(iso);
    if (isNaN(d.getTime())) return (iso || "").slice(0, 10);
    const p = (n) => String(n).padStart(2, "0");
    return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
  }
  function _localTime(iso) {
    const d = new Date(iso);
    if (isNaN(d.getTime())) return (iso || "").slice(11, 19);
    const p = (n) => String(n).padStart(2, "0");
    return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
  }

  // 複製文字：優先 navigator.clipboard（需 HTTPS/localhost），失敗退回 legacy execCommand（HTTP 也可）。
  // 回傳 Promise<boolean>。避免非安全環境(HTTP 部署)時複製鈕靜默無作用。
  async function _copyText(text) {
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(text);
        return true;
      }
    } catch (_e) { /* 落到 fallback */ }
    try {
      const ta = document.createElement("textarea");
      ta.value = text;
      ta.setAttribute("readonly", "");
      ta.style.cssText = "position:fixed;top:-1000px;opacity:0;";
      document.body.appendChild(ta);
      ta.select();
      const ok = document.execCommand("copy");
      document.body.removeChild(ta);
      return ok;
    } catch (_e) { return false; }
  }

  async function onUserRowAction(e) {
    const btn = e.target.closest("button[data-act]");
    if (!btn) return;
    e.preventDefault();
    e.stopPropagation();
    const row = btn.closest(".user-row");
    if (!row) return;
    const uid = parseInt(row.dataset.uid, 10);
    const username = row.dataset.username;
    const email = row.dataset.email;
    const dept = row.dataset.dept;
    const role = row.dataset.role;
    const act = btn.dataset.act;

    if (act === "edit") {
      return openUserEditDialog(uid, username, email, dept, role);
    }
    if (act === "approve" || act === "reactivate") {
      const label = act === "approve" ? "開通" : "重新啟用";
      await stepUpPrompt({
        title: `${label} ${username}`,
        desc: "此動作需密碼確認，將寫入稽核日誌。",
      }, async (password) => {
        const r = await api(`/api/users/${uid}`, {
          method: "PATCH",
          body: JSON.stringify({ is_active: true, step_up_password: password }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) return errMsg(j, label + "失敗");  // 保留 dialog
        toast(`已${label} ${username}`, "ok");
        loadAdminUsers();
      });
      return;
    }
    if (act === "unlock") {
      const r = await api(`/api/users/${uid}/unlock`, { method: "POST" });
      if (!r.ok) {
        const j = await r.json().catch(() => ({}));
        toast(errMsg(j, "解鎖失敗"), "error");
        return;
      }
      toast("已解鎖", "ok");
      loadAdminUsers();
      return;
    }
    if (act === "reset-pwd") {
      return openUserResetModalLive(uid, username, email);
    }
    if (act === "delete") {
      return openUserDeleteModalLive(uid, username, email);
    }
  }

  // ============================================================
  // 重設密碼 modal（連線原 HTML #user-reset-modal）
  // ============================================================
  function openUserResetModalLive(uid, username, email) {
    const modal = document.getElementById("user-reset-modal");
    if (!modal) return;
    const av = modal.querySelector("#user-reset-avatar");
    const nm = modal.querySelector("#user-reset-name");
    const em = modal.querySelector("#user-reset-email");
    if (av) av.textContent = (username || "?").slice(0, 1).toUpperCase();
    if (nm) nm.textContent = username || "";
    if (em) em.textContent = email || "";
    const pwdInput = modal.querySelector('input[type="password"]');
    if (pwdInput) pwdInput.value = "";
    // 隱藏「寄送 email」相關描述（功能未實裝），但保留 step-up 流程
    const submitBtn = modal.querySelector(".modal__footer .btn--primary");
    if (submitBtn) {
      submitBtn.textContent = "確認重設並產生臨時密碼";
      submitBtn.onclick = async () => {
        const password = pwdInput ? pwdInput.value : "";
        if (!password) { toast("請輸入您的密碼確認", "error"); pwdInput && pwdInput.focus(); return; }
        const r = await api(`/api/users/${uid}/force-password-reset`, {
          method: "POST", body: JSON.stringify({ password }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) { toast(errMsg(j, "重設密碼失敗"), "error"); return; }
        modal.classList.remove("is-open");
        showTempPasswordDialog(username, j.temporary_password);
        loadAdminUsers();
      };
    }
    modal.classList.add("is-open");
  }

  // ============================================================
  // 刪除帳號 modal（連線原 HTML #user-delete-modal）
  // ============================================================
  function openUserDeleteModalLive(uid, username, email) {
    const modal = document.getElementById("user-delete-modal");
    if (!modal) return;
    const av = modal.querySelector("#user-delete-avatar");
    const nm = modal.querySelector("#user-delete-name");
    const em = modal.querySelector("#user-delete-email");
    const previewName = modal.querySelector("#user-delete-preview-name");
    if (av) av.textContent = (username || "?").slice(0, 1).toUpperCase();
    if (nm) nm.textContent = username || "";
    if (em) em.textContent = email || "";
    if (previewName) previewName.textContent = username || "";
    const confirmInput = modal.querySelector("#user-delete-confirm-input");
    const inputs = modal.querySelectorAll('.modal__body input');
    const pwdInput = inputs[inputs.length - 1];  // 最後一個是 step-up 密碼
    if (confirmInput) { confirmInput.value = ""; confirmInput.placeholder = `輸入 ${username} 以確認`; }
    if (pwdInput) pwdInput.value = "";

    const submitBtn = modal.querySelector(".modal__footer .btn--danger");
    if (submitBtn) {
      submitBtn.textContent = "確認刪除";
      submitBtn.onclick = async () => {
        if (!confirmInput || confirmInput.value.trim() !== username) {
          toast("帳號名稱不符，無法刪除", "error");
          confirmInput && confirmInput.focus();
          return;
        }
        const password = pwdInput ? pwdInput.value : "";
        if (!password) { toast("請輸入您的密碼確認", "error"); pwdInput && pwdInput.focus(); return; }
        const r = await api(`/api/users/${uid}`, {
          method: "DELETE",
          body: JSON.stringify({ password }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) { toast(errMsg(j, "刪除失敗"), "error"); return; }
        modal.classList.remove("is-open");
        toast(`已軟刪除 ${username}`, "ok");
        loadAdminUsers();
      };
    }
    modal.classList.add("is-open");
  }

  // ============================================================
  // 編輯使用者（使用 HTML 原 #user-edit-sheet 側邊面板）
  // ============================================================
  const ROLE_LABEL_TO_ROLE = {
    "一般使用者": "user", "主管": "manager",
    "高階主管": "senior_manager", "管理者": "admin",
  };

  async function openUserEditDialog(uid, username, email, dept, role) {
    const sheet = document.getElementById("user-edit-sheet");
    if (!sheet) return;

    // 從後端拉最新的 user 細節（確保 2FA 狀態正確）
    let detail = { totp_enabled: false, is_active: true };
    try {
      const rr = await api(`/api/users/${uid}`);
      if (rr.ok) detail = await rr.json();
    } catch (_) {}

    const displayName = detail.display_name || username;
    // Header
    const av = sheet.querySelector("#user-edit-avatar");
    if (av) av.textContent = (displayName || "?").slice(0, 1).toUpperCase();
    const title = sheet.querySelector("#user-edit-title");
    const sub = sheet.querySelector("#user-edit-subtitle");
    if (title) title.textContent = `編輯使用者：${displayName}`;
    if (sub) sub.textContent = `@${username} · ${email}`;

    // Basic info：姓名(display_name 可編) / 使用者帳號(disabled) / Email / 分機(可編) / 行動電話(未實裝)
    const inputs = sheet.querySelectorAll(".form-fieldset .form-input");
    if (inputs[0]) { inputs[0].value = detail.display_name || ""; inputs[0].disabled = false; inputs[0].placeholder = "完整姓名"; }
    if (inputs[1]) { inputs[1].value = username || ""; inputs[1].disabled = true; }
    if (inputs[2]) { inputs[2].value = email || ""; }
    if (inputs[3]) { inputs[3].value = detail.extension || ""; inputs[3].disabled = false; inputs[3].placeholder = "例: 2483"; }
    if (inputs[4]) { inputs[4].value = ""; inputs[4].disabled = true; inputs[4].placeholder = "行動電話（未實裝）"; }

    // 主要部門 select — 動態填入
    const deptSelect = sheet.querySelector("select.form-input");
    if (deptSelect) {
      try {
        const r = await fetch("/api/departments",
          { headers: { "Authorization": "Bearer " + (Auth.access || "") } });
        if (r.ok) {
          const list = await r.json();
          deptSelect.innerHTML = list
            .filter(d => d.is_active)
            .map(d => `<option value="${escapeHtml(d.name)}">${escapeHtml(d.name)}</option>`)
            .join("");
          deptSelect.value = dept || "";
        }
      } catch (_) {}
    }

    // 系統角色 role-card：highlight 對應目前 role
    const labelByRole = Object.fromEntries(
      Object.entries(ROLE_LABEL_TO_ROLE).map(([k, v]) => [v, k])
    );
    const cards = sheet.querySelectorAll(".role-card");
    cards.forEach(card => {
      const name = card.querySelector(".role-card__name");
      const myLabel = name ? name.firstChild.textContent.trim() : "";
      const myRole = ROLE_LABEL_TO_ROLE[myLabel] || "";
      card.classList.toggle("is-active", myRole === role);
      card.dataset.role = myRole;
      card.onclick = () => {
        cards.forEach(c => c.classList.remove("is-active"));
        card.classList.add("is-active");
      };
    });

    // 兼任部門 chip — 動態填入部門 + 依 detail.secondary_departments 勾選
    const chipGroup = sheet.querySelector(".chip-group");
    if (chipGroup) {
      let allDepts = [];
      try {
        const r = await fetch("/api/departments",
          { headers: { "Authorization": "Bearer " + (Auth.access || "") } });
        if (r.ok) allDepts = (await r.json()).filter(d => d.is_active).map(d => d.name);
      } catch (_) {}
      const current = Array.isArray(detail.secondary_departments) ? detail.secondary_departments : [];
      // 兼任部門排除主要部門（避免重複）
      chipGroup.innerHTML = allDepts
        .filter(name => name !== (detail.department || dept))
        .map(name => {
          const on = current.includes(name) ? " is-active" : "";
          return `<span class="chip${on}" data-dept="${escapeHtml(name)}">${escapeHtml(name)}</span>`;
        }).join("");
      chipGroup.querySelectorAll(".chip").forEach(chip => {
        chip.style.cursor = "pointer";
        chip.onclick = () => chip.classList.toggle("is-active");
      });
    }

    // 動態更新「安全性 / 兩階段驗證(2FA)」區塊（HTML 預設寫死「已啟用」）
    // 結構：<div>...<div>兩階段驗證(2FA)</div><div>狀態文字</div>...<span switch>...
    const securityFieldset = Array.from(sheet.querySelectorAll(".form-fieldset"))
      .find(f => (f.textContent || "").includes("兩階段驗證"));
    let twoFaSwitchEl = null;
    if (securityFieldset) {
      const statusRow = securityFieldset.querySelector(":scope > div");
      if (statusRow) {
        const textDivs = statusRow.querySelectorAll("div > div");
        // textDivs[1] 是「已啟用 · TOTP App · 啟用於 …」那行
        if (textDivs[1]) {
          textDivs[1].textContent = detail.totp_enabled
            ? "已啟用 · TOTP App"
            : "未啟用 · 使用者尚未綁定";
        }
      }
      // switch span（背景色 + 圓點位置）
      const sw = securityFieldset.querySelector("span > span")
        ? securityFieldset.querySelector("span > span").parentNode
        : null;
      twoFaSwitchEl = sw;
      if (twoFaSwitchEl) {
        twoFaSwitchEl.style.background = detail.totp_enabled ? "var(--ok,#16a34a)" : "#cbd5e1";
        const knob = twoFaSwitchEl.querySelector("span");
        if (knob) {
          knob.style.left = detail.totp_enabled ? "18px" : "2px";
          knob.style.right = "auto";
          knob.style.transition = "left .15s";
        }
        // 只有「已啟用 → 想重置（管理員 override）」才有意義；無功能時禁用點擊
        twoFaSwitchEl.onclick = async () => {
          if (!detail.totp_enabled) {
            toast("使用者尚未啟用 2FA，無需重置", "info");
            return;
          }
          await stepUpPrompt({
            title: `重置 ${username} 的 2FA`,
            desc: "此為 admin override：清除使用者目前的 2FA secret，使其下次登入須重新綁定 Authenticator。需輸入您的密碼確認。",
          }, async (password) => {
            const rr = await api(`/api/users/${uid}/reset-2fa`, {
              method: "POST", body: JSON.stringify({ password }),
            });
            const jj = await rr.json().catch(() => ({}));
            if (!rr.ok) return errMsg(jj, "重置 2FA 失敗");
            detail.totp_enabled = false;
            twoFaSwitchEl.style.background = "#cbd5e1";
            const knob2 = twoFaSwitchEl.querySelector("span");
            if (knob2) knob2.style.left = "2px";
            if (textDivs[1]) textDivs[1].textContent = "未啟用 · 使用者尚未綁定（已重置）";
            toast("已重置 2FA", "ok");
            loadAdminUsers();
          });
        };
      }
    }

    // 「重設密碼·寄送邀請信」按鈕 → 我們的 reset 流程
    const resetBtnInSheet = Array.from(sheet.querySelectorAll("button"))
      .find(b => (b.textContent || "").includes("重設密碼"));
    if (resetBtnInSheet) {
      resetBtnInSheet.onclick = (e) => {
        e.preventDefault();
        sheet.classList.remove("is-open");
        openUserResetModalLive(uid, username, email);
      };
    }

    // 危險區「停用」「刪除」
    const dangerBtns = sheet.querySelectorAll(".danger-zone .btn");
    if (dangerBtns[0]) {  // 停用（需 step-up 密碼）
      dangerBtns[0].onclick = async (e) => {
        e.preventDefault();
        await stepUpPrompt({
          title: `停用 ${username}`,
          desc: "停用後該使用者無法登入。此動作需密碼確認，將寫入稽核日誌。",
        }, async (password) => {
          const r = await api(`/api/users/${uid}`, {
            method: "PATCH",
            body: JSON.stringify({ is_active: false, step_up_password: password }),
          });
          const j = await r.json().catch(() => ({}));
          if (!r.ok) return errMsg(j, "停用失敗");
          toast("已停用", "ok");
          sheet.classList.remove("is-open");
          loadAdminUsers();
        });
      };
    }
    if (dangerBtns[1]) {  // 刪除
      dangerBtns[1].onclick = (e) => {
        e.preventDefault();
        sheet.classList.remove("is-open");
        openUserDeleteModalLive(uid, username, email);
      };
    }

    // 「儲存變更」按鈕
    const saveBtn = sheet.querySelector(".sheet-panel__footer .btn--primary");
    if (saveBtn) {
      saveBtn.onclick = async (e) => {
        e.preventDefault();
        const newEmail = (inputs[2] && inputs[2].value || "").trim();
        const newName = (inputs[0] && inputs[0].value || "").trim();
        const newExt = (inputs[3] && inputs[3].value || "").trim();
        const newDept = deptSelect ? deptSelect.value : "";
        const selected = sheet.querySelector(".role-card.is-active");
        const newRole = selected ? (selected.dataset.role || "") : "";
        // 兼任部門：收集所有 is-active chip
        const secondary = Array.from(sheet.querySelectorAll(".chip-group .chip.is-active"))
          .map(c => c.dataset.dept).filter(Boolean);
        const body = {};
        if (newEmail && newEmail !== email) body.email = newEmail;
        if (newName !== (detail.display_name || "")) body.display_name = newName;
        if (newExt !== (detail.extension || "")) body.extension = newExt;
        if (newDept && newDept !== dept) body.department = newDept;
        if (newRole && newRole !== role) body.role = newRole;
        // 兼任部門變更偵測
        const curSecondary = Array.isArray(detail.secondary_departments) ? detail.secondary_departments : [];
        if (JSON.stringify([...secondary].sort()) !== JSON.stringify([...curSecondary].sort())) {
          body.secondary_departments = secondary;
        }
        if (Object.keys(body).length === 0) {
          toast("沒有變更", "info");
          return;
        }
        // 需 step-up 的情況：升角色 admin/senior/manager、或變更兼任部門（影響跨部門存取）
        const roleNeedsStepUp = body.role && ["admin", "senior_manager", "manager"].includes(body.role);
        const secNeedsStepUp = "secondary_departments" in body;
        const doSave = async (password) => {
          if (password) body.step_up_password = password;
          const r = await api(`/api/users/${uid}`, {
            method: "PATCH", body: JSON.stringify(body),
          });
          const j = await r.json().catch(() => ({}));
          if (!r.ok) return errMsg(j, "更新失敗");
          toast("已儲存變更", "ok");
          closeEditSheet();
          loadAdminUsers();
          return null;
        };
        if (roleNeedsStepUp || secNeedsStepUp) {
          const labelOf = { admin: "管理者", senior_manager: "高階主管", manager: "主管" };
          const reason = roleNeedsStepUp
            ? `升級為「${labelOf[body.role]}」`
            : "變更兼任部門";
          // 密碼錯不關閉，可重試
          await stepUpPrompt({
            title: `${reason}需密碼確認`,
            desc: "這是高風險動作（影響權限/跨部門存取），將寫入稽核日誌。請輸入您的登入密碼以繼續。",
          }, doSave);
        } else {
          const err = await doSave();
          if (err) toast(err, "error");
        }
      };
    }

    // 點 sheet 以外區域 → 自動關閉
    enableSheetBackdropClose(sheet);

    sheet.classList.add("is-open");
  }

  // 編輯 sheet 統一關閉（清掉背景監聽，避免事件殘留）
  function closeEditSheet() {
    const sheet = document.getElementById("user-edit-sheet");
    if (!sheet) return;
    sheet.classList.remove("is-open");
    if (sheet._kbv5BackdropOff) {
      sheet._kbv5BackdropOff();
      sheet._kbv5BackdropOff = null;
    }
  }

  // 點 sheet 之外 → 關閉（mousedown 階段判斷，避免拖選文字誤觸）
  function enableSheetBackdropClose(sheet) {
    if (sheet._kbv5BackdropOff) return;
    let downInsideSheet = false;
    const onDown = (e) => {
      downInsideSheet = !!e.target.closest("#user-edit-sheet");
      // 任何由我們開的 modal / dialog 也視為「裡面」（不要因為點 securePrompt 而關掉 sheet）
      if (!downInsideSheet && (
        e.target.closest(".modal-overlay.is-open") ||
        e.target.closest("#kbv5-secure-dialog") ||
        e.target.closest("#kbv5-toast")
      )) downInsideSheet = true;
    };
    const onUp = (e) => {
      if (downInsideSheet) return;
      const upInside = !!e.target.closest("#user-edit-sheet");
      if (upInside) return;
      // 確認最終結束在 sheet 之外才關
      if (sheet.classList.contains("is-open")) closeEditSheet();
    };
    document.addEventListener("mousedown", onDown, true);
    document.addEventListener("mouseup", onUp, true);
    sheet._kbv5BackdropOff = () => {
      document.removeEventListener("mousedown", onDown, true);
      document.removeEventListener("mouseup", onUp, true);
    };
  }

  // ============================================================
  // 臨時密碼顯示對話框（可複製，取代 alert）
  // ============================================================
  function showTempPasswordDialog(username, password) {
    const overlay = document.createElement("div");
    overlay.style.cssText =
      "position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100000;" +
      "display:flex;align-items:center;justify-content:center;padding:20px;";
    const card = document.createElement("div");
    card.style.cssText =
      "background:#fff;border-radius:12px;padding:22px 24px;max-width:460px;width:100%;" +
      "box-shadow:0 20px 60px rgba(0,0,0,.3);font-family:inherit;";
    card.innerHTML = `
      <div style="font-size:15px;font-weight:600;color:#0b1f33;margin-bottom:6px;">
        臨時密碼已產生
      </div>
      <div style="font-size:12px;color:#64748b;margin-bottom:14px;line-height:1.5;">
        使用者 <b style="color:#0b1f33;">${escapeHtml(username)}</b> 的臨時密碼僅顯示一次。
        請複製後告知使用者，首次登入時會被強制改密。
      </div>
      <div style="display:flex;gap:8px;align-items:stretch;">
        <input id="kbv5-temp-pwd" readonly value="${escapeHtml(password)}"
          style="flex:1;padding:10px 12px;border:1px solid #cbd5e1;border-radius:6px;
                 font-family:var(--font-mono,Consolas,Monaco,monospace);font-size:14px;
                 background:#f8fafc;color:#0b1f33;box-sizing:border-box;" />
        <button id="kbv5-temp-pwd-copy"
          style="padding:0 16px;border:none;background:#009BCB;color:#fff;
                 border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;
                 font-family:inherit;white-space:nowrap;">⎘ 複製</button>
      </div>
      <div id="kbv5-temp-pwd-status"
        style="font-size:11px;color:#94a3b8;margin-top:8px;min-height:14px;"></div>
      <div style="display:flex;justify-content:flex-end;margin-top:18px;">
        <button id="kbv5-temp-pwd-close"
          style="padding:8px 16px;border:none;background:#0b1f33;color:#fff;
                 border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;
                 font-family:inherit;">已記下，關閉</button>
      </div>`;
    overlay.appendChild(card);
    document.body.appendChild(overlay);
    const input = card.querySelector("#kbv5-temp-pwd");
    const copyBtn = card.querySelector("#kbv5-temp-pwd-copy");
    const status = card.querySelector("#kbv5-temp-pwd-status");
    const closeBtn = card.querySelector("#kbv5-temp-pwd-close");
    input.focus(); input.select();
    copyBtn.addEventListener("click", async () => {
      try {
        await navigator.clipboard.writeText(password);
        status.textContent = "✓ 已複製到剪貼簿";
        status.style.color = "var(--ok,#16a34a)";
      } catch (_) {
        // fallback：用 execCommand
        input.select();
        document.execCommand("copy");
        status.textContent = "✓ 已複製（fallback）";
        status.style.color = "var(--ok,#16a34a)";
      }
    });
    closeBtn.addEventListener("click", () => overlay.remove());
    overlay.addEventListener("click", (e) => { if (e.target === overlay) overlay.remove(); });
    document.addEventListener("keydown", function once(e) {
      if (e.key === "Escape") { overlay.remove(); document.removeEventListener("keydown", once); }
    });
  }
  NS.showTempPasswordDialog = showTempPasswordDialog;

  function wireUserCreateModal() {
    const modal = document.getElementById("user-create-modal");
    if (!modal || modal.dataset.kbv5 === "1") return;
    modal.dataset.kbv5 = "1";

    populateDeptSelect(modal);

    const inputs = modal.querySelectorAll(".modal__body input");
    const selects = modal.querySelectorAll(".modal__body select");
    const nameInput = inputs[0];
    const userInput = inputs[1];
    const emailInput = inputs[2];

    // Phase5-H §51：每次開啟 modal 時依當前 flags 決定是否移除「高階主管」option
    // flags 由 hideLoginPage → loadFeatureFlags 非同步填，wire 時可能尚未到位
    function _applySeniorMgrGate() {
      if (!selects[1]) return;
      const remove = NS.flags && NS.flags.FEATURE_SENIOR_MANAGER === false;
      Array.from(selects[1].options).forEach((opt) => {
        if ((opt.textContent || "").trim() !== "高階主管") return;
        if (remove) opt.remove();
      });
    }

    // 取得允許網域並顯示 hint
    let allowedDomains = ["demo.local"];
    fetch("/api/users/email-policy", {
      headers: { "Authorization": "Bearer " + (Auth.access || "") },
    }).then(r => r.ok && r.json()).then(d => {
      if (d && d.allowed_domains && d.allowed_domains.length) {
        allowedDomains = d.allowed_domains;
      }
      if (emailInput) emailInput.placeholder = "name@" + allowedDomains[0];
      // 在 email input 下方加上 hint（如已有就更新文字）
      addOrUpdateHint(emailInput, `允許網域：${allowedDomains.map(d => "@" + d).join(" / ")}`, "kbv5-email-hint");
    }).catch(() => {});

    // 即時 availability + domain check（停止輸入 1 秒後觸發）
    setupAvailabilityProbe(userInput, "username");
    setupAvailabilityProbe(emailInput, "email");

    // 重新開啟時清空欄位（避免上次取消後殘留）
    function clearCreateModal() {
      [nameInput, userInput, emailInput].forEach((inp) => {
        if (inp) { inp.value = ""; clearFieldError(inp); }
      });
      if (selects[0]) selects[0].selectedIndex = 0;
      if (selects[1]) selects[1].selectedIndex = 0;
      _applySeniorMgrGate();   // Phase5-H：依當前 flags 過濾「高階主管」
    }
    const _origOpen = window.openUserCreateModal;
    window.openUserCreateModal = function () {
      clearCreateModal();
      if (typeof _origOpen === "function") return _origOpen.apply(this, arguments);
      modal.classList.add("is-open");
    };

    const submitBtn = modal.querySelector(".modal__footer .btn--primary");
    if (!submitBtn) return;
    submitBtn.textContent = "建立";
    submitBtn.addEventListener("click", async (e) => {
      e.preventDefault();
      const username = (userInput && userInput.value || "").trim();
      const displayName = (nameInput && nameInput.value || "").trim();
      const email = (emailInput && emailInput.value || "").trim();
      const dept = selects[0] && selects[0].value;
      const roleLabel = selects[1] && selects[1].value;
      const roleMap = { "管理者": "admin", "高階主管": "senior_manager", "主管": "manager", "一般使用者": "user" };
      const role = roleMap[roleLabel] || "user";
      if (!username) { toast("請輸入使用者帳號", "error"); userInput && userInput.focus(); return; }
      if (!email) { toast("請輸入 Email", "error"); emailInput && emailInput.focus(); return; }
      if (!dept || dept === "" || dept.startsWith("請選")) {
        toast("請選擇主要部門", "error"); return;
      }
      // 前端先校驗 email 網域
      const m = email.match(/@([A-Za-z0-9.\-]+)$/);
      if (!m || !allowedDomains.includes(m[1].toLowerCase())) {
        toast(`Email 網域必須為：${allowedDomains.map(d => "@" + d).join(" / ")}`, "error");
        emailInput && emailInput.focus();
        return;
      }
      const tempPwd = generateTempPassword();
      submitBtn.disabled = true;
      try {
        const r = await api("/api/users", {
          method: "POST",
          body: JSON.stringify({ username, email, password: tempPwd, role, department: dept,
                                 display_name: displayName }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) {
          // 把錯誤對應到欄位上做紅框
          const code = pickErrCode(j);
          if (code === "username_taken") { markFieldError(userInput, "此帳號已被使用"); }
          else if (code === "email_taken" || code === "email_invalid_format" || code === "email_domain_not_allowed") {
            markFieldError(emailInput, ERR_MAP[code] || "Email 不可用");
          }
          toast(errMsg(j, "建立失敗"), "error");
          return;
        }
        if (nameInput) nameInput.value = "";
        if (userInput) { userInput.value = ""; clearFieldError(userInput); }
        if (emailInput) { emailInput.value = ""; clearFieldError(emailInput); }
        if (selects[0]) selects[0].selectedIndex = 0;
        if (selects[1]) selects[1].selectedIndex = 0;
        if (typeof window.closeUserCreateModal === "function") window.closeUserCreateModal();
        loadAdminUsers();
        showTempPasswordDialog(username, tempPwd);
      } finally {
        submitBtn.disabled = false;
      }
    });
  }

  // 用於即時檢查 username / email 可用性
  function setupAvailabilityProbe(input, field) {
    if (!input) return;
    let timer = null;
    function check() {
      const val = (input.value || "").trim();
      if (!val) { clearFieldError(input); return; }
      clearTimeout(timer);
      timer = setTimeout(async () => {
        const url = `/api/users/check-availability?${field}=${encodeURIComponent(val)}`;
        const r = await api(url);
        if (!r.ok) return;
        const j = await r.json();
        if (j.available === false) {
          let msg = "已被使用";
          if (j.reason === "invalid_format") msg = "格式不正確";
          else if (j.reason === "email_invalid_format") msg = "Email 格式不正確";
          else if (j.reason === "email_domain_not_allowed")
            msg = "網域不允許（限：" + (j.allowed_domains || []).map(d => "@" + d).join(" / ") + "）";
          else if (j.reason === "taken") msg = "已被使用";
          markFieldError(input, msg);
        } else {
          markFieldOk(input);
        }
      }, 1000);
    }
    // 停止輸入 1 秒後自動檢查（debounce），不再等 blur
    input.addEventListener("input", () => { clearFieldError(input); check(); });
  }

  function markFieldError(input, msg) {
    if (!input) return;
    input.style.borderColor = "var(--danger,#dc2626)";
    addOrUpdateHint(input, "⚠ " + msg, "kbv5-field-err", "var(--danger,#dc2626)");
  }
  function markFieldOk(input) {
    if (!input) return;
    input.style.borderColor = "var(--ok,#16a34a)";
    addOrUpdateHint(input, "✓ 可使用", "kbv5-field-err", "var(--ok,#16a34a)");
  }
  function clearFieldError(input) {
    if (!input) return;
    input.style.borderColor = "";
    const sib = input.parentNode && input.parentNode.querySelector(".kbv5-field-err");
    if (sib) sib.remove();
  }
  function addOrUpdateHint(input, text, className, color) {
    if (!input || !input.parentNode) return;
    let el = input.parentNode.querySelector("." + className);
    if (!el) {
      el = document.createElement("div");
      el.className = className;
      el.style.cssText = "font-size:11px;margin-top:4px;";
      input.parentNode.appendChild(el);
    }
    el.textContent = text;
    el.style.color = color || "var(--text-3,#94a3b8)";
  }

  function generateTempPassword() {
    const upper = "ABCDEFGHJKLMNPQRSTUVWXYZ";
    const lower = "abcdefghijkmnpqrstuvwxyz";
    const dig = "23456789";
    const sym = "!@#$%^&*";
    const all = upper + lower + dig + sym;
    let p = upper[Math.floor(Math.random() * upper.length)]
          + lower[Math.floor(Math.random() * lower.length)]
          + dig[Math.floor(Math.random() * dig.length)]
          + sym[Math.floor(Math.random() * sym.length)];
    for (let i = 0; i < 12; i++) p += all[Math.floor(Math.random() * all.length)];
    return p;
  }

  async function populateDeptSelect(modal) {
    const r = await fetch("/api/departments", {
      headers: Auth.access ? { "Authorization": "Bearer " + Auth.access } : {},
    });
    if (!r.ok) return;
    const list = await r.json();
    const select = modal.querySelector(".modal__body select");
    if (!select) return;
    select.innerHTML = '<option value="">請選擇…</option>' +
      list.filter((d) => d.is_active)
          .map((d) => `<option value="${escapeHtml(d.name)}">${escapeHtml(d.name)}</option>`)
          .join("");
  }

  // ============================================================
  // SUBMIT 頁綁線（L4，PRD §7.1 / §7.2）
  // ============================================================
  // L4 前端基礎 PII 掃描（同步後端 services/pii_basic.py 5 條）
  // 命中即時提示；後端會二次驗證
  const FRONT_PII_RULES = [
    { name: "台灣身分證", re: /\b[A-Z][12]\d{8}\b/g },
    { name: "手機號碼", re: /\b09\d{2}[-\s]?\d{3}[-\s]?\d{3}\b/g },
    { name: "信用卡號", re: /\b(?:\d[ -]*?){13,19}\b/g },
    { name: "Email 地址", re: /\b[A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}\b/g },
    { name: "出生日期", re: /\b(?:19|20)\d{2}[-/](?:0[1-9]|1[0-2])[-/](?:0[1-9]|[12]\d|3[01])\b/g },
  ];

  function scanPii(text) {
    return Pure.matchRegexRules(text, FRONT_PII_RULES);   // 純正則比對抽到 pure.js（已測）
  }

  // PII 被擋時的提示 + 申訴（PRD §49.9）
  function openPiiBlockedModal(content, detail) {
    const layer = detail.layer;
    const reason = detail.describe || `層 ${layer} 命中`;
    const m = _kbModal(
      `<div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:10px;">` +
      `<span style="font-size:22px;">⚠️</span><div style="font-size:15px;font-weight:600;color:#0b1f33;">內容無法提交</div></div>` +
      `<div style="padding:18px 22px;font-size:13px;color:#334155;">` +
      `<div>偵測到疑似機密內容：<b>${escapeHtml(reason)}</b></div>` +
      `<div style="margin-top:6px;color:#64748b;">內容不會傳給 AI。請修改後重送；若你認為這是誤判，可送出申訴由管理員審核。</div>` +
      `<div id="pb-appeal" style="display:none;margin-top:14px;">` +
      `<label style="font-size:12px;color:#475569;">申訴理由</label>` +
      `<textarea id="pb-reason" style="width:100%;min-height:90px;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;box-sizing:border-box;margin-top:4px;" placeholder="說明為何這是誤判…"></textarea></div>` +
      `</div>` +
      `<div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;">` +
      `<button id="pb-close" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">修改內容</button>` +
      `<button id="pb-appeal-btn" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">我認為是誤判 → 申訴</button>` +
      `</div>`, 480);
    m.card.querySelector("#pb-close").onclick = m.close;
    const appealBtn = m.card.querySelector("#pb-appeal-btn");
    appealBtn.addEventListener("click", async () => {
      const box = m.card.querySelector("#pb-appeal");
      if (box.style.display === "none") { box.style.display = ""; appealBtn.textContent = "送出申訴"; return; }
      const reasonTxt = m.card.querySelector("#pb-reason").value.trim();
      appealBtn.disabled = true;
      const r = await api("/api/appeal-false-positive", {
        method: "POST", body: JSON.stringify({
          text_snippet: content, layer: layer, matched_rule: detail.rule,
          similarity: detail.similarity, user_reason: reasonTxt,
        }),
      });
      const j = await r.json().catch(() => ({}));
      appealBtn.disabled = false;
      if (!r.ok) { toast(errMsg(j, "申訴送出失敗"), "error"); return; }
      m.close(); toast("申訴已送出，待管理員審核", "ok");
    });
  }

  // Phase5-A：提交頁附件 — 上傳/刪除/列表
  const _ATTACH_ERR_MAP = {
    empty_file: "檔案為空",
    file_too_large: "檔案過大（單檔上限 25MB）",
    quota_exceeded: "本提交附件總量超過 200MB 上限",
    unsupported_mime: "不支援的檔案類型（僅 PDF / Office / 圖片 / zip / 文字）",
    pii_detected: "檔名含敏感資訊（PII）",
    forbidden: "無權限",
    not_found: "提交不存在",
    write_failed: "儲存失敗",
    invalid_state: "此提交已送審或核准，不能再加附件",
  };

  async function _ensureDraftForAttach(_editor) {
    const state = NS._submitAttachState;
    if (state && state.pendingId) return state.pendingId;
    // 第一次上傳 → 建一筆「空白 draft」(不跑 AI，避免堆積 ai_ready 殭屍)
    const r = await api("/api/pending/draft-empty", { method: "POST" });
    const j = await r.json().catch(() => ({}));
    if (!r.ok) { toast(errMsg(j, "建立草稿失敗"), "error"); return null; }
    state.pendingId = j.id;
    return j.id;
  }

  async function handleSubmitAttachPick(page, state, editor, tplState) {
    const fileInput = page.querySelector("#submit-file-input");
    if (!fileInput || !fileInput.files || fileInput.files.length === 0) return;
    const pid = await _ensureDraftForAttach(editor);
    if (!pid) { fileInput.value = ""; return; }
    for (const f of Array.from(fileInput.files)) {
      const url = `/api/pending/${pid}/attachments?filename=${encodeURIComponent(f.name)}`;
      const r = await fetch(url, {
        method: "POST",
        headers: { "Content-Type": f.type || "application/octet-stream",
                   "Authorization": "Bearer " + (Auth.access || "") },
        body: f,
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) {
        const d = j.detail || {};
        toast(_ATTACH_ERR_MAP[d.error] || d.describe || `上傳「${f.name}」失敗`, "error");
      } else {
        toast(`已上傳 ${f.name}`, "ok");
      }
    }
    fileInput.value = "";
    // 強制刷新（不依賴前面 await 順序，確保 UI 數字準）
    await renderSubmitAttachList(page, state);
    // 延遲一輪再 render 一次防 race（DB commit 與 select 之間）
    setTimeout(() => renderSubmitAttachList(page, state), 200);
  }

  // Phase5-B：給 contenteditable 編輯區設文字並保留換行
  function _setEditorText(editor, text) {
    if (!editor) return;
    editor.innerHTML = "";
    const lines = (text || "").split(/\r?\n/);
    lines.forEach((line, i) => {
      const div = document.createElement("div");
      if (line === "") {
        div.appendChild(document.createElement("br"));
      } else {
        div.textContent = line;
      }
      editor.appendChild(div);
    });
    editor.dispatchEvent(new Event("input", { bubbles: true }));
    editor.focus();
    // 游標移到末尾
    try {
      const range = document.createRange();
      range.selectNodeContents(editor);
      range.collapse(false);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    } catch (_e) {}
  }

  // Phase5-A/B：每次進入提交頁的處理
  function _resetSubmitOnEntry(page) {
    // A15 §48 fix：wireSubmit 在 init() 跑、injectTemplateSelector fetch 時可能未登入 →
    // items=[] 只剩「無格式」。每次入頁時若僅 1 option（未載過），重拉模板。
    const tplSel = page.querySelector("#kbv5-tpl-select");
    if (tplSel && tplSel.options.length <= 1 && NS._submitTplState) {
      injectTemplateSelector(page, NS._submitTplState);
    }
    // 情境 1：「繼續編輯草稿」進入 → 載入該 pending 的附件
    if (NS._pendingResumeId) {
      if (NS._submitAttachState) NS._submitAttachState.pendingId = NS._pendingResumeId;
      NS._pendingResumeId = null;
      renderSubmitAttachList(page, NS._submitAttachState);
      return;
    }
    // 情境 2（5B 修正）：使用者從 topbar 點「新增提交」→ 一律視為全新一次
    // 清掉 editor 文字 + state.pendingId（之前未送的 draft 仍在 backend，
    // 可從「我的草稿」找回，避免遺失）
    if (NS._submitAttachState) {
      NS._submitAttachState.pendingId = null;
      NS._submitAttachState.files = [];
    }
    const editor = page.querySelector(".submit-editor__textarea");
    if (editor) editor.textContent = "";
    page.querySelectorAll(".submit-attachments .submit-attachment, .submit-attachments [data-kbv5-attach-empty]")
      .forEach((n) => n.remove());
    _updateSubmitAttachUI(page, 0, 0);
  }

  function _updateSubmitAttachUI(page, count, totalBytes) {
    const usedMB = Pure.fmtMB(totalBytes);
    // 標頭右側 meta（保留作主要顯示）
    const meta = page.querySelector("[data-kbv5-attach-meta]");
    if (meta) meta.textContent = `${count} 個檔案 · ${usedMB} MB / 上限 200 MB（影片單檔 100MB）`;
    // 底部 summary span 重複資訊 → 改顯示 PII 提示一行就好
    const summary = page.querySelector(".submit-attachments-summary");
    if (summary) {
      const pii = summary.querySelector("span:last-child");
      summary.innerHTML = "";
      if (pii) summary.appendChild(pii);
    }
  }

  async function renderSubmitAttachList(page, state) {
    const list = page.querySelector(".submit-attachments");
    if (!list) return;
    list.querySelectorAll(".submit-attachment, [data-kbv5-attach-empty]").forEach((n) => n.remove());
    if (!state.pendingId) {
      _updateSubmitAttachUI(page, 0, 0);
      return;
    }
    const r = await api(`/api/pending/${state.pendingId}/attachments`);
    if (!r.ok) { _updateSubmitAttachUI(page, 0, 0); return; }
    const j = await r.json();
    state.files = j.items;
    _updateSubmitAttachUI(page, j.count, j.total_bytes);
    if (j.count === 0) {
      const empty = document.createElement("div");
      empty.dataset.kbv5AttachEmpty = "1";
      empty.style.cssText = "padding:14px;text-align:center;color:#94a3b8;font-size:12px;";
      empty.textContent = "尚無附件";
      list.appendChild(empty);
      return;
    }
    j.items.forEach((it) => {
      const sizeKB = Pure.fmtKB(it.size_bytes);
      const ext = (it.filename.split(".").pop() || "?").toUpperCase().slice(0, 4);
      const row = document.createElement("div");
      row.className = "submit-attachment";
      row.innerHTML = `<div class="submit-attachment__icon submit-attachment__icon--other">${escapeHtml(ext)}</div>
        <div class="submit-attachment__info">
          <div class="submit-attachment__name">${escapeHtml(it.filename)}</div>
          <div class="submit-attachment__meta">${sizeKB} KB · ✓ 已上傳</div>
        </div>
        <button class="submit-attachment__action" title="移除" data-aid="${it.id}">✕</button>`;
      row.querySelector("[data-aid]").addEventListener("click", async () => {
        if (!confirm(`刪除附件「${it.filename}」？`)) return;
        const r = await api(`/api/pending/${state.pendingId}/attachments/${it.id}`, { method: "DELETE" });
        if (r.ok) { toast("已刪除", "ok"); renderSubmitAttachList(page, state); }
      });
      list.appendChild(row);
    });
  }

  function wireSubmit() {
    const page = document.querySelector('main.page[data-page="submit"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";

    // Phase5-A：頁面從 inactive → active 才觸發 entry handler（避免 attribute 亂跳重複觸發）
    let _wasActive = page.classList.contains("is-active");
    const obs = new MutationObserver(() => {
      const nowActive = page.classList.contains("is-active");
      if (nowActive && !_wasActive) _resetSubmitOnEntry(page);
      _wasActive = nowActive;
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });

    const editor = page.querySelector(".submit-editor__textarea");
    const toolbar = page.querySelector(".submit-editor__toolbar");
    const submitBtn = page.querySelector('.page__actions .btn--primary');
    const draftBtn = page.querySelector('.submit-editor__footer .btn--quiet');
    const piiAlert = page.querySelector(".pii-alert");
    const piiSide = page.querySelector(".submit-side__block");  // 第一個 block 是 PII 掃描狀態
    const visibilitySel = page.querySelector("#submit-visibility-select");
    if (!editor || !submitBtn) return;

    // 清空 HTML 內 mockup 內容
    editor.textContent = "";
    // §48 使用格式下拉（注入式 side block；mockup 無此區）
    const tplState = { id: null };
    NS._submitTplState = tplState;   // _resetSubmitOnEntry 需重拉時複用 state ref
    injectTemplateSelector(page, tplState);
    // 預設隱藏 PII alert
    if (piiAlert) piiAlert.style.display = "none";
    // 清掉附件 mock 假檔（HTML 寫了 3 個假上傳，視為示意，這裡清空）
    page.querySelectorAll(".submit-attachments .submit-attachment").forEach((el) => el.remove());
    // Phase5-A：提交頁附件（綁 pending_id；approval 時 backend 自動搬到 doc）
    const titles = Array.from(page.querySelectorAll(".submit-side__title"));
    const attachHeader = titles.find((t) => (t.textContent || "").includes("附件"));
    if (attachHeader) {
      const meta = attachHeader.querySelector("span");
      if (meta) meta.dataset.kbv5AttachMeta = "1";   // 標記 → 上傳後即時更新
    }
    // 清掉 mock 假檔
    page.querySelectorAll(".submit-attachments .submit-attachment").forEach((el) => el.remove());
    // 附件 state：第一個檔案觸發時 auto-create draft pending；後續沿用
    const attachState = { pendingId: null, files: [] };
    NS._submitAttachState = attachState;
    const uploadZone = page.querySelector(".submit-upload-zone");
    let fileInput = page.querySelector("#submit-file-input");
    if (uploadZone && fileInput) {
      // 🚨 ROOT CAUSE: mockup HTML inline JS（line 14232）也綁了 change listener，
      // 會先跑 mock addFile + 把 input.value='' 清空 → 我的 listener 拿不到 files。
      // 修法：clone+replace 整個 input → 所有 listener 一併刪除，只留我的。
      const clone = fileInput.cloneNode(true);
      fileInput.parentNode.replaceChild(clone, fileInput);
      fileInput = clone;
      uploadZone.onclick = (e) => {
        if (e.target.tagName === "INPUT") return;
        fileInput.click();
      };
      fileInput.addEventListener("change", () => handleSubmitAttachPick(page, attachState, editor, tplState));
    }

    // ----- 可見度設定（套用文件可見度 modal；進階層級開 picker 收集部門/人員 + 密碼）-----
    // 一般使用者只能「部門內部」；admin/senior/manager 可設進階層級（需密碼）。
    const canSetVisibility = ["admin", "senior_manager", "manager"].includes(
      (Auth.user && Auth.user.role) || "user");
    const visCfg = { visibility: "department", allowed_departments: [], access_list: [], step_up_password: null };
    function visLabelFor(cfg) {
      const base = (VIS_BADGE[cfg.visibility] || VIS_BADGE.department).label;
      return Pure.visibilityLabel(cfg, base);   // 純邏輯抽到 pure.js（已單元測試）
    }
    function syncVisSelectLabel() {
      if (!visibilitySel) return;
      visibilitySel.value = visCfg.visibility;
      const opt = visibilitySel.options[visibilitySel.selectedIndex];
      if (opt) opt.text = visLabelFor(visCfg);
    }
    if (visibilitySel) {
      // 一般使用者：鎖定為部門內部，其餘選項禁用
      if (!canSetVisibility) {
        Array.from(visibilitySel.options).forEach((o) => {
          if (o.value !== "department") o.disabled = true;
        });
        visibilitySel.value = "department";
        visCfg.visibility = "department";
      }
      let prevVis = visibilitySel.value || "department";
      visCfg.visibility = prevVis;
      window.onVisibilityChange = function (sel) {
        const v = sel.value;
        if (!canSetVisibility) { sel.value = "department"; return; }
        if (["selected_departments", "restricted", "confidential", "public"].includes(v)) {
          openVisibilityDialog(
            { visibility: v, allowed_departments: visCfg.allowed_departments,
              access_list: visCfg.access_list, department: (Auth.user && Auth.user.department) || "" },
            { pickMode: true, collectPassword: true, onPick: (cfg) => {
              visCfg.visibility = cfg.visibility;
              visCfg.allowed_departments = cfg.allowed_departments || [];
              visCfg.access_list = cfg.access_list || [];
              visCfg.step_up_password = cfg.step_up_password || null;
              visCfg.confirm_confidential = !!cfg.confirm_confidential;
              prevVis = visCfg.visibility;
              syncVisSelectLabel();
            } }
          ).then(() => {
            if (visCfg.visibility !== v) { visibilitySel.value = prevVis; }
          });
        } else {
          // 部門內部：免密碼、清掉進階設定
          visCfg.visibility = v;
          visCfg.allowed_departments = [];
          visCfg.access_list = [];
          visCfg.step_up_password = null;
          prevVis = v;
        }
      };
    }

    // ----- 字數即時更新 -----
    const wcSpan = toolbar ? toolbar.querySelector("span") : null;
    const MAX = 50_000;
    let lastPiiHits = [];

    // 載入後端 keyword/phrase 規則（層1/2）供即時掃描（不下放 regex，PRD §877）
    let _kwRules = [];
    api("/api/pii/keywords").then((r) => r.ok && r.json()).then((d) => {
      if (Array.isArray(d)) { _kwRules = d; refreshAll(); }
    }).catch(() => {});
    function scanKeywords(text) {
      return Pure.scanKeywords(text, _kwRules);   // 純比對邏輯抽到 pure.js（已單元測試）
    }

    function refreshAll() {
      // 用 innerText 取「可見換行」版本，避免 contenteditable 把跨 block 文字黏成一行
      const text = (editor.innerText || editor.textContent || "").trim();
      const len = text.length;
      if (wcSpan) {
        wcSpan.textContent = `${len.toLocaleString()} 字 / 上限 ${MAX.toLocaleString()} 字`;
        wcSpan.style.color = len > MAX ? "var(--danger,#dc2626)" : "";
      }
      lastPiiHits = scanPii(text).concat(scanKeywords(text));
      refreshPiiUI(lastPiiHits);
      // 送出/草稿閘門邏輯抽到 pure.js（已單元測試）— PII 命中→鎖送出是 §9.1 前端把關
      const gate = Pure.submitGate({ len, max: MAX, piiHitCount: lastPiiHits.length });
      submitBtn.disabled = !gate.canSubmit;
      submitBtn.style.opacity = gate.canSubmit ? "" : "0.6";
      submitBtn.style.cursor = gate.canSubmit ? "" : "not-allowed";
      if (draftBtn) {
        draftBtn.disabled = !gate.canDraft;
        draftBtn.style.opacity = gate.canDraft ? "" : "0.6";
      }
    }

    function refreshPiiUI(hits) {
      // alert 區
      if (piiAlert) {
        if (hits.length === 0) {
          piiAlert.style.display = "none";
        } else {
          piiAlert.style.display = "";
          const div = piiAlert.querySelector("div");
          if (div) {
            const ul = hits.slice(0, 5).map((h) => {
              const lineNum = countLineUpTo(editor.textContent || "", h.index);
              return `<li>第 ${lineNum} 行：${escapeHtml(h.name)}（命中：${escapeHtml(h.match.slice(0, 32))}）</li>`;
            }).join("");
            div.innerHTML =
              `<b>偵測到 ${hits.length} 處可能含個資的內容，送出已暫時停用：</b><ul>${ul}</ul>` +
              `<div style="margin-top:6px;color:#7f1d1d;">請改寫為通則（如「業務窗口手機」）後再送出。內容不會傳給 AI 直到 PII 清除為止。</div>`;
          }
        }
      }
      // 側欄 PII 掃描狀態
      if (piiSide) {
        const stateRow = piiSide.querySelector("div > svg") ?
          piiSide.querySelector("div > svg").parentNode : null;
        if (stateRow) {
          if (hits.length === 0) {
            stateRow.style.color = "var(--ok,#16a34a)";
            stateRow.innerHTML =
              '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>' +
              '<span>未命中規則</span>';
          } else {
            stateRow.style.color = "var(--danger,#dc2626)";
            stateRow.innerHTML =
              '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>' +
              `<span>命中 ${hits.length} 條規則</span>`;
          }
        }
        // 規則列表（顯示真實內建規則名）
        const ruleList = piiSide.querySelectorAll("div")[2];
        if (ruleList && !ruleList.dataset.kbv5) {
          ruleList.dataset.kbv5 = "1";
          ruleList.innerHTML =
            '內建規則（5）：台灣身分證 / 手機號碼 / 信用卡 / Email / 出生日期<br>' +
            '<span style="color:var(--text-3);">自訂規則：L8 開放管理</span>';
        }
      }
    }

    function countLineUpTo(text, idx) {
      if (!text) return 1;
      return (text.slice(0, idx).match(/\n/g) || []).length + 1;
    }

    editor.addEventListener("input", refreshAll);
    refreshAll();

    // 復原 send button 文字（HTML 寫死了 PII 警告版）
    submitBtn.innerHTML =
      '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">' +
      '<path d="M22 2 11 13"/><path d="M22 2 15 22 11 13 2 9z"/></svg>送 AI 整理';
    submitBtn.style.opacity = "0.6";
    submitBtn.style.cursor = "not-allowed";

    submitBtn.addEventListener("click", async (e) => {
      e.preventDefault();
      const content = (editor.innerText || editor.textContent || "").trim();
      if (!content) { toast("請輸入內容", "error"); return; }
      if (lastPiiHits.length > 0) {
        toast("內容含 PII，請先處理", "error"); return;
      }
      const visibility = visCfg.visibility;
      submitBtn.disabled = true;
      const origText = submitBtn.innerHTML;
      submitBtn.textContent = "送出中…";
      try {
        // Phase5-A：若已 auto-create draft 給附件用 → reprocess 該 pending（保留附件）
        let pid;
        const existingPid = (NS._submitAttachState && NS._submitAttachState.pendingId) || null;
        if (existingPid) {
          const r = await api(`/api/pending/${existingPid}/reprocess`, {
            method: "POST", body: JSON.stringify({ content }),
          });
          const j = await r.json().catch(() => ({}));
          if (!r.ok) {
            if (j.detail && j.detail.error === "pii_detected") {
              openPiiBlockedModal(content, j.detail);
            } else {
              toast(errMsg(j, "提交失敗"), "error");
            }
            return;
          }
          pid = existingPid;
          // Phase5-B 方案 C：後端可能判定「小改」→ 立即回 ai_ready 不重跑 AI
          if (j.ai_rerun === false && j.status === "ai_ready") {
            toast(`小修微調（相似度 ${Math.round((j.jaccard || 0) * 100)}%）— 跳過 AI 重整`, "ok");
            // 直接抓現有 ai_result（pollPendingReady 也會立即回，但這裡可省一輪 polling）
            const r2 = await api(`/api/pending/${pid}`);
            if (r2.ok) {
              const detail = await r2.json();
              openSubmitPreviewModal(pid, detail, editor, { visibility });
            }
            return;
          }
        } else {
          const r = await api("/api/pending", {
            method: "POST", body: JSON.stringify({
              content, visibility,
              allowed_departments: visCfg.allowed_departments,
              access_list: visCfg.access_list,
              step_up_password: visCfg.step_up_password || undefined,
              confirm_confidential: !!visCfg.confirm_confidential,
              template_id: tplState.id || undefined,            // §48
            }),
          });
          const j = await r.json().catch(() => ({}));
          if (!r.ok) {
            if (j.detail && j.detail.error === "pii_detected") {
              openPiiBlockedModal(content, j.detail);
            } else {
              toast(errMsg(j, "提交失敗"), "error");
            }
            return;
          }
          pid = j.id;
        }
        toast("AI 整理中…", "info");
        const ai = await pollPendingReady(pid);
        if (ai === "timeout") {
          toast("AI 仍在整理中，完成後會以鈴鐺通知您；可至儀表板「我的草稿」開啟預覽", "info");
          return;
        }
        if (!ai) { promptAiFailRecovery(pid, content, (rdy) => openSubmitPreviewModal(pid, rdy, editor, { visibility })); return; }
        // 不要在這裡 reset pendingId — 必須留到 self-approve 成功才清，
        // 否則使用者若關 modal 再回提交頁會看不到 attachment
        openSubmitPreviewModal(pid, ai, editor, { visibility });
      } finally {
        submitBtn.disabled = false;
        submitBtn.innerHTML = origText;
        refreshAll();
      }
    });

    // ----- 儲存草稿按鈕 -----
    if (draftBtn) {
      draftBtn.addEventListener("click", async (e) => {
        e.preventDefault();
        const content = (editor.innerText || editor.textContent || "").trim();
        if (!content) { toast("請輸入內容才能存草稿", "error"); return; }
        if (lastPiiHits.length > 0) { toast("內容含 PII，無法存草稿", "error"); return; }
        draftBtn.disabled = true;
        const orig = draftBtn.textContent;
        draftBtn.textContent = "儲存中…";
        try {
          const r = await api("/api/pending", {
            method: "POST", body: JSON.stringify({
              content, template_id: tplState.id || undefined,
            }),
          });
          const j = await r.json().catch(() => ({}));
          if (!r.ok) { toast(errMsg(j, "存草稿失敗"), "error"); return; }
          // 等 AI ready 後直接 discard 變 draft
          const ready = await pollPendingReady(j.id);
          if (ready && ready !== "timeout") {
            await api(`/api/pending/${j.id}/discard`, { method: "POST" });
          }
          toast(`已存為草稿（#${j.id}）`, "ok");
          editor.textContent = "";
          refreshAll();
        } finally {
          draftBtn.disabled = false;
          draftBtn.textContent = orig;
        }
      });
    }
  }

  // §48 文檔模板：提交頁「使用格式」下拉（注入式；mockup 無此區）
  // 預設選擇：本部門 default → global default → 「無格式」（PRD §48.7）
  async function injectTemplateSelector(page, tplState) {
    const side = page.querySelector(".submit-side");
    if (!side) return;
    side.querySelectorAll("#kbv5-tpl-block").forEach((n) => n.remove());
    const blk = document.createElement("div");
    blk.className = "submit-side__block";
    blk.id = "kbv5-tpl-block";
    blk.innerHTML =
      '<div class="submit-side__title">使用格式 <span style="font-size:11px;color:#94a3b8;font-weight:400;">（AI 依此格式產出）</span></div>' +
      '<select id="kbv5-tpl-select" style="width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;box-sizing:border-box;">' +
      '<option value="">無格式（AI 自動分類）</option></select>' +
      '<div id="kbv5-tpl-info" style="margin-top:10px;font-size:12px;color:#475569;"></div>';
    side.insertBefore(blk, side.firstChild);
    const sel = blk.querySelector("#kbv5-tpl-select");
    const info = blk.querySelector("#kbv5-tpl-info");
    let items = [];
    try {
      const r = await api("/api/templates");
      if (r.ok) items = await r.json();
    } catch (_e) { items = []; }
    items = items.filter((t) => t.is_active !== false);
    const myDept = (Auth.user && Auth.user.department) || "";
    const myDepts = new Set([myDept, ...(Auth.user && Auth.user.secondary_departments || [])].filter(Boolean));
    // PRD §48.7 + 使用者調整：本部門預設 → 本部門任何模板 → 全域預設 → 無格式
    const deptDefault = items.find((t) =>
      t.scope === "department" && t.is_default && myDepts.has(t.department_name));
    const anyDeptTpl = items.find((t) =>
      t.scope === "department" && myDepts.has(t.department_name));
    const globalDefault = items.find((t) => t.scope === "global" && t.is_default);
    const defaultPick = deptDefault || anyDeptTpl || globalDefault || null;
    items.forEach((t) => {
      const opt = document.createElement("option");
      opt.value = String(t.id);
      const tag = t.scope === "global" ? "[全域]" : `[${t.department_name || "部門"}]`;
      opt.textContent = `${tag} ${t.name}` + (t.is_default ? " ★" : "");
      if (defaultPick && t.id === defaultPick.id) opt.selected = true;
      sel.appendChild(opt);
    });
    tplState.id = defaultPick ? defaultPick.id : null;
    function renderInfo() {
      const t = items.find((x) => x.id === tplState.id);
      if (!t) { info.innerHTML = '<span style="color:#94a3b8;">未套用模板，AI 自動分類產出。</span>'; return; }
      info.innerHTML =
        `<div style="font-weight:600;color:#0b1f33;margin-bottom:4px;">${escapeHtml(t.name)}</div>` +
        (t.description ? `<div style="margin-bottom:6px;">${escapeHtml(t.description)}</div>` : "") +
        `<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:8px;white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:11px;color:#475569;max-height:160px;overflow:auto;">` +
        escapeHtml(t.structure_md || "") + "</div>";
    }
    renderInfo();
    sel.addEventListener("change", () => {
      tplState.id = sel.value ? parseInt(sel.value, 10) : null;
      renderInfo();
    });
  }

  // 輪詢 AI 處理結果。預算需涵蓋真實 pipeline：一筆提交會串多次雲端呼叫
  // （整理＋去重變體＋合併判斷＋合併改寫…），常需 20–40s、尖峰更久 → 給 ~90s。
  // 回傳：ai_ready 物件 / null(失敗) / "timeout"(仍在處理，背景會 SSE 通知「AI 整理完成」)。
  async function pollPendingReady(pid, maxTries = 120, intervalMs = 750) {
    for (let i = 0; i < maxTries; i++) {
      const r = await api(`/api/pending/${pid}`);
      if (r.ok) {
        const j = await r.json();
        if (j.status === "ai_ready") return j;
        if (j.status === "failed") return null;
      }
      await new Promise((res) => setTimeout(res, intervalMs));
    }
    return "timeout";
  }

  // 字詞級 token：CJK 逐字、英數逐詞、空白/換行/標點各自成 token
  // 字詞級 diff（LCS）整組抽到 pure.js（已測）；此處薄包裝供合併預覽/版本比對呼叫
  function _diffSides(base, merged) { return Pure.diffSides(base, merged); }

  // 合併建議 + 左右 diff 區塊（PRD §7.1 情境B）。verb：發布/核准。
  function _mergeBlockHtml(ai, verb) {
    const ms = ai && ai.merge_suggestion;
    if (!ms || ms.action !== "merge") return "";
    const mp = ai.merge_preview || {};
    const pct = Math.round((ms.score || 0) * 100);
    let diff = "";
    if (mp.merged_body) {
      const sides = _diffSides(mp.base_body, mp.merged_body);
      const paneCss = "max-height:300px;overflow:auto;border:1px solid #e2e8f0;border-radius:6px;" +
        "padding:8px;font-size:12px;font-family:var(--font-mono,Consolas,monospace);white-space:pre-wrap;word-break:break-word;";
      diff = `<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;">
        <div><div style="font-size:11px;color:#64748b;margin-bottom:4px;">既有文件（紅＝將被刪除/取代）</div>
          <div style="${paneCss}">${sides.left}</div></div>
        <div><div style="font-size:11px;color:#64748b;margin-bottom:4px;">合併後（綠＝新增/變更）</div>
          <div style="${paneCss}">${sides.right}</div></div>
      </div>`;
    }
    const degraded = (mp.ai_integrated === false)
      ? `<div style="margin-top:8px;padding:8px 10px;border:1px solid #fca5a5;background:#fef2f2;border-radius:6px;font-size:11px;color:#b91c1c;">
          ⚠ 此次 <b>AI 整合未成功</b>（多為 AI 配額或連線問題），下方為<b>確定式追加</b>版本（新內容附在既有文件後面，未經 AI 重新組織）。
          可關閉後至儀表板「我的草稿」<b>重跑 AI</b> 取得整合版，或直接手動編輯下方內容。
        </div>`
      : "";
    return `<div data-kbv5-merge-block="1" style="margin-top:14px;padding:12px;border:1px solid #fde68a;background:#fffbeb;border-radius:8px;">
      <div style="font-size:13px;color:#92400e;font-weight:600;">🔀 AI 建議合併至既有文件「${escapeHtml(ms.title || ("#" + ms.document_id))}」（相似度 ${pct}%）</div>
      <div style="font-size:11px;color:#a16207;margin-top:2px;">${verb}後將更新該既有文件為新版本（非新增）；既有重要內容會保留。</div>
      ${degraded}${diff}</div>`;
  }

  // L4 自製 submit-preview-modal（PRD §7.1 step 6；HTML mockup 未提供）
  // AI 整理失敗時的救援對話框：重試 / 存成草稿 / 取消（避免內容卡在 failed 而遺失）。
  function promptAiFailRecovery(pid, content, onReady) {
    const m = _kbModal(
      '<div style="padding:22px;">' +
      '<div style="font-size:15px;font-weight:600;color:#0b1f33;margin-bottom:8px;">⚠ AI 整理失敗</div>' +
      '<div style="font-size:13px;color:#64748b;margin-bottom:16px;line-height:1.6;">可能是 AI 配額或連線問題。你可以<b>重試</b>一次，或先<b>存成草稿</b>，稍後到儀表板「我的草稿」繼續編輯／重跑。</div>' +
      '<div id="aifr-err" style="display:none;font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:8px 10px;margin-bottom:12px;"></div>' +
      '<div style="display:flex;gap:8px;justify-content:flex-end;">' +
      '<button id="aifr-cancel" style="padding:8px 14px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">取消</button>' +
      '<button id="aifr-draft" style="padding:8px 14px;border:1px solid #cbd5e1;background:#fff;color:#0b1f33;border-radius:6px;cursor:pointer;font-size:13px;">存成草稿</button>' +
      '<button id="aifr-retry" style="padding:8px 16px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">重試</button>' +
      '</div></div>', 440);
    const err = m.card.querySelector("#aifr-err");
    const busy = (b) => m.card.querySelectorAll("button").forEach((x) => { x.disabled = b; });
    m.card.querySelector("#aifr-cancel").onclick = m.close;
    m.card.querySelector("#aifr-retry").addEventListener("click", async () => {
      err.style.display = "none"; busy(true);
      try {
        const r = await api(`/api/pending/${pid}/reprocess`, {
          method: "POST", body: JSON.stringify({ content }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) { err.textContent = errMsg(j, "重試失敗"); err.style.display = ""; return; }
        const ai = await pollPendingReady(pid);
        if (ai === "timeout") {
          m.close(); toast("AI 仍在整理中，完成後會以鈴鐺通知您；可至「我的草稿」開啟", "info"); return;
        }
        if (!ai) { err.textContent = "仍然失敗，可改「存成草稿」稍後再試。"; err.style.display = ""; return; }
        m.close(); onReady(ai);
      } finally { busy(false); }
    });
    m.card.querySelector("#aifr-draft").addEventListener("click", async () => {
      err.style.display = "none"; busy(true);
      try {
        const r = await api(`/api/pending/${pid}/discard`, { method: "POST" });
        if (!r.ok) {
          const j = await r.json().catch(() => ({}));
          err.textContent = errMsg(j, "存草稿失敗"); err.style.display = ""; return;
        }
        m.close();
        toast(`已存為草稿（#${pid}），可至儀表板「我的草稿」繼續`, "ok");
        if (typeof refreshAll === "function") refreshAll();
      } finally { busy(false); }
    });
  }

  function openSubmitPreviewModal(pid, detail, editorEl, opts) {
    const ai = detail.ai_result || {};
    const me = Auth.user || {};
    const canSelfApprove = ["admin", "senior_manager", "manager"].includes(me.role);
    // 合併情境：重點是合併後內容，不另顯示「AI 整理後內文」；編輯＝編輯合併後內容
    const isMerge = !!(ai.merge_suggestion && ai.merge_suggestion.action === "merge"
      && ai.merge_preview && ai.merge_preview.merged_body);
    const editInit = isMerge ? ai.merge_preview.merged_body : (ai.body || "");
    // B 方案：合併後標題（AI 為整體取的；使用者可在預覽編輯）
    const mergedTitle = isMerge ? (ai.merge_preview.merged_title || ai.title || "") : "";
    // 合併後標籤/摘要（對合併後整體重生；可在預覽編輯）。無重生值（local/429）→ 退回新提交值。
    const mergedTags = isMerge
      ? ((ai.merge_preview.merged_tags && ai.merge_preview.merged_tags.length)
          ? ai.merge_preview.merged_tags : (ai.tags || []))
      : [];
    const mergedSummary = isMerge ? (ai.merge_preview.merged_summary || ai.summary || "") : "";
    const _inpCss = "width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:6px 8px;font-size:13px;box-sizing:border-box;";
    const visKey = (opts && opts.visibility) || detail.visibility || "department";
    const visLabel = (VIS_BADGE[visKey] || VIS_BADGE.department).label;

    const overlay = document.createElement("div");
    overlay.id = "kbv5-submit-preview";
    overlay.style.cssText =
      "position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100000;" +
      "display:flex;align-items:center;justify-content:center;padding:20px;";
    const card = document.createElement("div");
    card.style.cssText =
      "background:#fff;border-radius:12px;max-width:760px;width:100%;max-height:88vh;" +
      "overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.3);font-family:inherit;";
    card.innerHTML = `
      <div style="padding:18px 24px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">
        <div>
          <div style="font-size:16px;font-weight:600;color:#0b1f33;">${canSelfApprove ? "自審發布預覽" : "提交預覽"}</div>
          <div style="font-size:11px;color:#64748b;margin-top:2px;">AI 已整理為下列結構，請確認後${canSelfApprove ? "直接發布" : "送審"}。</div>
        </div>
        <button id="kbv5-prev-close" style="border:0;background:transparent;color:#94a3b8;font-size:20px;cursor:pointer;">✕</button>
      </div>
      <div style="padding:20px 24px;">
        <div style="display:grid;grid-template-columns:80px 1fr;gap:8px 12px;font-size:13px;color:#475569;">
          <div>${isMerge ? "合併後標題" : "標題"}</div><div style="color:#0b1f33;font-weight:600;" id="kbv5-prev-title">${isMerge ? `<input id="kbv5-prev-merged-title" value="${escapeHtml(mergedTitle)}" maxlength="60" style="width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:6px 8px;font-size:13px;font-weight:600;color:#0b1f33;box-sizing:border-box;" />` : escapeHtml(ai.title || "")}</div>
          <div>分類</div><div style="color:#0b1f33;" id="kbv5-prev-cat">${escapeHtml(ai.category || "")}</div>
          <div>標籤</div><div id="kbv5-prev-tags">${isMerge
            ? `<input id="kbv5-prev-merged-tags" value="${escapeHtml(mergedTags.join("、"))}" placeholder="用、或逗號分隔" style="${_inpCss}" />`
            : (ai.tags || []).map(t => `<span style="display:inline-block;font-size:11px;background:#eff6ff;color:#1d4ed8;padding:2px 8px;border-radius:999px;margin-right:4px;">${escapeHtml(t)}</span>`).join("")}</div>
          <div>摘要</div><div id="kbv5-prev-sum">${isMerge
            ? `<textarea id="kbv5-prev-merged-summary" rows="2" placeholder="合併後整體摘要" style="${_inpCss};resize:vertical;color:#475569;">${escapeHtml(mergedSummary)}</textarea>`
            : `<span style="color:#475569;">${escapeHtml(ai.summary || "")}</span>`}</div>
          <div>可見度</div><div style="color:#0b1f33;">${escapeHtml(visLabel)}</div>
        </div>
        ${isMerge ? "" : `<div style="margin-top:16px;font-size:12px;color:#64748b;">內文（AI 整理後）</div>
        <pre id="kbv5-prev-body" style="margin-top:6px;padding:14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;white-space:pre-wrap;font-family:var(--font-mono,Consolas,monospace);max-height:280px;overflow:auto;">${escapeHtml(ai.body || "")}</pre>`}
        ${_mergeBlockHtml(ai, canSelfApprove ? "發布" : "核准")}
        <div data-kbv5-prev-attach style="margin-top:14px;"></div>
        <details style="margin-top:14px;">
          <summary style="cursor:pointer;color:#64748b;font-size:12px;">查看原始輸入</summary>
          <pre style="margin-top:8px;padding:12px;background:#f1f5f9;border-radius:8px;font-size:12px;white-space:pre-wrap;color:#475569;">${escapeHtml(detail.original_content || "")}</pre>
        </details>
        <div id="kbv5-prev-edit-area" style="display:none;margin-top:14px;">
          <div style="font-size:12px;color:#64748b;margin-bottom:6px;">${isMerge ? "編輯合併後內容（送出後不再跑 AI，但會再做 PII 掃描）" : "編輯 AI 版本（送出後不會再跑 AI，但會再做 PII 掃描）"}</div>
          <textarea id="kbv5-prev-edit-ta" style="width:100%;min-height:240px;padding:12px;border:1px solid #cbd5e1;border-radius:8px;font-family:var(--font-mono,Consolas,monospace);font-size:13px;box-sizing:border-box;">${escapeHtml(editInit)}</textarea>
        </div>
      </div>
      <div style="padding:14px 24px;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">
        <div style="font-size:11px;color:#94a3b8;">關閉視窗 = 暫存草稿</div>
        <div style="display:flex;gap:8px;">
          <button id="kbv5-prev-edit" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">編輯</button>
          ${isMerge ? '<button id="kbv5-prev-standalone" style="padding:8px 16px;border:1px solid #fbbf24;background:#fffbeb;color:#92400e;border-radius:6px;cursor:pointer;font-size:13px;" title="不合併、另開新文件">另存獨立</button>' : ""}
          <button id="kbv5-prev-submit" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">${canSelfApprove ? "確認發布" : "確認送審"}</button>
        </div>
      </div>
    `;
    overlay.appendChild(card);
    document.body.appendChild(overlay);

    let editing = false;
    const editArea = card.querySelector("#kbv5-prev-edit-area");
    const editBtn = card.querySelector("#kbv5-prev-edit");
    const submitBtn2 = card.querySelector("#kbv5-prev-submit");
    const ta = card.querySelector("#kbv5-prev-edit-ta");

    // Phase5-A：載入該 pending 的附件清單到預覽 modal
    (async () => {
      const slot = card.querySelector("[data-kbv5-prev-attach]");
      if (!slot) return;
      const ar = await api(`/api/pending/${pid}/attachments`);
      if (!ar.ok) return;
      const aj = await ar.json();
      if (aj.count === 0) return;   // 無附件不顯示，避免雜訊
      const usedMB = Pure.fmtMB(aj.total_bytes);
      slot.innerHTML = `<div style="padding:10px 12px;border:1px solid #e0f2fe;background:#f0f9ff;border-radius:6px;">
        <div style="font-size:12px;font-weight:600;color:#0369a1;margin-bottom:6px;">📎 將隨此提交發布的附件 ${aj.count} 個 · ${usedMB} MB</div>
        ${aj.items.map((it) => {
          const kb = Pure.fmtKB(it.size_bytes);
          return `<div style="font-size:12px;color:#075985;padding:2px 0;">• ${escapeHtml(it.filename)} <span style="color:#0891b2;">(${kb} KB)</span></div>`;
        }).join("")}</div>`;
    })();

    async function closeWithDraft() {
      overlay.remove();
      // 關閉 = 草稿（PRD §7.1 step 8）
      await api(`/api/pending/${pid}/discard`, { method: "POST" });
      toast("已存為草稿", "info");
    }

    card.querySelector("#kbv5-prev-close").addEventListener("click", closeWithDraft);
    overlay.addEventListener("click", (e) => { if (e.target === overlay) closeWithDraft(); });
    document.addEventListener("keydown", function onKey(e) {
      if (e.key === "Escape" && overlay.parentNode) {
        document.removeEventListener("keydown", onKey);
        closeWithDraft();
      }
    });

    // 編輯時隱藏上方唯讀「AI 整理後內文」（與下方可編輯框重複，多餘）
    const bodyPre = card.querySelector("#kbv5-prev-body");
    const bodyLabel = bodyPre ? bodyPre.previousElementSibling : null;
    const toggleReadonlyBody = (hide) => {
      if (bodyPre) bodyPre.style.display = hide ? "none" : "";
      if (bodyLabel) bodyLabel.style.display = hide ? "none" : "";
    };
    editBtn.addEventListener("click", () => {
      if (!editing) {
        editing = true;
        editArea.style.display = "";
        toggleReadonlyBody(true);
        editBtn.textContent = "取消編輯";
        submitBtn2.textContent = canSelfApprove ? "儲存並發布" : "儲存並送審";
      } else {
        editing = false;
        editArea.style.display = "none";
        toggleReadonlyBody(false);
        editBtn.textContent = "編輯";
        submitBtn2.textContent = canSelfApprove ? "確認發布" : "確認送審";
      }
    });

    let forceStandalone = false;
    const standaloneBtn = card.querySelector("#kbv5-prev-standalone");
    if (standaloneBtn) {
      standaloneBtn.addEventListener("click", () => {
        forceStandalone = !forceStandalone;
        standaloneBtn.style.background = forceStandalone ? "#fbbf24" : "#fffbeb";
        standaloneBtn.style.color = forceStandalone ? "#7c2d12" : "#92400e";
        standaloneBtn.textContent = forceStandalone ? "✓ 將另存獨立" : "另存獨立";
        // 切換後同步隱藏/顯示合併預覽塊
        const mergeBlock = card.querySelector('[data-kbv5-merge-block]');
        if (mergeBlock) mergeBlock.style.opacity = forceStandalone ? "0.45" : "1";
      });
    }

    submitBtn2.addEventListener("click", async () => {
      submitBtn2.disabled = true;
      try {
        // 收集要 PATCH 的內容（重新 PII scan）：編輯的內文 + 合併後標題（B 方案）。
        const useMergedKey = isMerge && !forceStandalone;
        const titleInput = card.querySelector("#kbv5-prev-merged-title");
        const patchBody = {};
        if (editing) {
          const newBody = ta.value || "";
          // 另存獨立時，編輯的內容是新文件的 content，不是 merged_body
          if (useMergedKey) patchBody.merged_body = newBody;
          else patchBody.content = newBody;
        }
        if (useMergedKey && titleInput && titleInput.value.trim()) {
          patchBody.merged_title = titleInput.value.trim();  // 合併情境一律帶上（可能被使用者改過）
        }
        if (useMergedKey) {
          // 合併後標籤/摘要（可能被使用者改過）一律帶上 → 發布用之
          const tagsInput = card.querySelector("#kbv5-prev-merged-tags");
          const sumInput = card.querySelector("#kbv5-prev-merged-summary");
          if (tagsInput) patchBody.merged_tags = tagsInput.value.split(/[、,，\n]/).map(s => s.trim()).filter(Boolean);
          if (sumInput) patchBody.merged_summary = sumInput.value.trim();
        }
        if (Object.keys(patchBody).length) {
          const rp = await api(`/api/pending/${pid}`, {
            method: "PATCH", body: JSON.stringify(patchBody),
          });
          const jp = await rp.json().catch(() => ({}));
          if (!rp.ok) {
            if (jp.detail && jp.detail.error === "pii_detected") {
              toast(`PII 命中（${jp.detail.rule}）：「${jp.detail.match}」`, "error");
            } else {
              toast(errMsg(jp, "編輯儲存失敗"), "error");
            }
            return;
          }
        }
        const endpoint = canSelfApprove
          ? `/api/pending/${pid}/self-approve`
          : `/api/pending/${pid}/confirm`;
        const r = await api(endpoint, {
          method: "POST",
          body: JSON.stringify({ force_standalone: forceStandalone }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) { toast(errMsg(j, "送出失敗"), "error"); return; }
        toast(canSelfApprove ? "已直接發布" : "已送審，等待主管核准", "ok");
        overlay.remove();
        if (editorEl) editorEl.textContent = "";  // 清空編輯區
        // Phase5-A：發布/送審成功才清 attach state（附件已搬到 doc）
        if (NS._submitAttachState) {
          NS._submitAttachState.pendingId = null;
          NS._submitAttachState.files = [];
        }
        // 重設提交頁 DOM
        const submitPg = document.querySelector('main.page[data-page="submit"]');
        if (submitPg) {
          submitPg.querySelectorAll(".submit-attachments .submit-attachment, .submit-attachments [data-kbv5-attach-empty]")
            .forEach((n) => n.remove());
          _updateSubmitAttachUI(submitPg, 0, 0);
        }
      } finally {
        submitBtn2.disabled = false;
      }
    });
  }
  NS.openSubmitPreviewModal = openSubmitPreviewModal;

  // 提交者檢視自己的提交：rejected → 顯示退回原因 + 編輯重送；其餘 → 檢視狀態
  async function openMySubmissionModal(pid) {
    const r = await api(`/api/pending/${pid}`);
    if (!r.ok) { toast(errMsg(await r.json().catch(() => ({})), "讀取失敗"), "error"); return; }
    const d = await r.json();
    const ai = d.ai_result || {};
    const statusMap = {
      processing: "AI 處理中", ai_ready: "AI 已整理", pending: "待審核中",
      approved: "已核准收錄", rejected: "已被退回", draft: "草稿", failed: "處理失敗",
      withdrawn: "已撤回",
    };
    const isRejected = d.status === "rejected";
    const isApproved = d.status === "approved";
    const isDraft = d.status === "draft" || d.status === "ai_ready";
    const isPending = d.status === "pending";   // Phase5-B：可撤回
    const isWithdrawn = d.status === "withdrawn";   // Phase5-B：可重新編輯
    const seed = (ai.body || d.original_content || "");

    // Phase5-B §46.6：rejection_history 時序顯示（若有多次退回）
    let historyHtml = "";
    try {
      const hist = JSON.parse(d.rejection_history || "[]");
      if (hist.length > 1) {
        historyHtml = `<div style="background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:12px 14px;margin-bottom:14px;">
          <div style="font-size:12px;font-weight:600;color:#92400e;margin-bottom:6px;">退回歷史（${hist.length} 次）</div>
          ${hist.map((h) => `<div style="font-size:12px;color:#78350f;padding:4px 0;border-bottom:1px solid #fef3c7;">
            <b>v${h.revision}</b> · ${(h.at || "").slice(0, 16).replace("T", " ")}<br>${escapeHtml(h.reason || "")}</div>`).join("")}
        </div>`;
      }
    } catch (_e) {}

    const rejectBanner = isRejected
      ? `<div style="background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 14px;margin-bottom:14px;">
           <div style="font-size:13px;font-weight:600;color:#991b1b;">退回原因</div>
           <div style="font-size:13px;color:#7f1d1d;margin-top:4px;white-space:pre-wrap;">${escapeHtml(d.reject_reason || "（未填寫）")}</div>
         </div>`
      : "";
    const editArea = isRejected
      ? `<div style="font-size:12px;color:#64748b;margin-bottom:6px;">修改內容後重新送出（會重跑 AI 整理與 PII 掃描）</div>
         <textarea id="kms-ta" style="width:100%;min-height:200px;padding:12px;border:1px solid #cbd5e1;border-radius:8px;font-family:var(--font-mono,Consolas,monospace);font-size:13px;box-sizing:border-box;">${escapeHtml(seed)}</textarea>`
      : `<pre style="margin:0;padding:14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;white-space:pre-wrap;font-family:var(--font-mono,Consolas,monospace);max-height:300px;overflow:auto;">${escapeHtml(seed)}</pre>`;

    const footerBtns = isRejected
      ? `<button id="kms-resubmit" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">修改後重送</button>`
      : isApproved
        ? `<button id="kms-open" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">檢視收錄文件</button>`
        : isPending
          ? `<button id="kms-withdraw" style="padding:8px 16px;border:1px solid #fecaca;background:#fff;color:#ef4444;border-radius:6px;cursor:pointer;font-size:13px;">撤回</button>`
          : isWithdrawn
            ? `<button id="kms-restore-draft" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">重新編輯</button>`
            : isDraft
              ? (d.status === "draft"
                  ? `<button id="kms-del" style="padding:8px 16px;border:1px solid #fecaca;background:#fff;color:#ef4444;border-radius:6px;cursor:pointer;font-size:13px;">刪除草稿</button>`
                  : `<button id="kms-del" style="padding:8px 16px;border:1px solid #fecaca;background:#fff;color:#ef4444;border-radius:6px;cursor:pointer;font-size:13px;">刪除</button>`) +
                `<button id="kms-resume" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">繼續編輯送審</button>`
              : "";

    const m = _kbModal(`
      <div style="padding:18px 24px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">
        <div>
          <div style="font-size:16px;font-weight:600;color:#0b1f33;">${escapeHtml(ai.title || "我的提交")}</div>
          <div style="font-size:12px;color:#64748b;margin-top:2px;">狀態：${statusMap[d.status] || d.status}</div>
        </div>
        <button id="kms-close" style="border:0;background:transparent;color:#94a3b8;font-size:20px;cursor:pointer;">✕</button>
      </div>
      <div style="padding:20px 24px;">
        ${historyHtml}
        ${rejectBanner}
        ${editArea}
        <div data-kms-attach style="margin-top:12px;"></div>
      </div>
      <div style="padding:14px 24px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;">
        <button id="kms-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">關閉</button>
        ${footerBtns}
      </div>`, 720);

    m.card.querySelector("#kms-close").addEventListener("click", m.close);
    m.card.querySelector("#kms-cancel").addEventListener("click", m.close);

    // Phase5-A：載入該 pending 的附件清單
    (async () => {
      const slot = m.card.querySelector("[data-kms-attach]");
      if (!slot) return;
      const ar = await api(`/api/pending/${pid}/attachments`);
      if (!ar.ok) return;
      const aj = await ar.json();
      if (aj.count === 0) {
        slot.innerHTML = '<div style="font-size:12px;color:#94a3b8;">📎 此提交無附件</div>';
        return;
      }
      const usedMB = Pure.fmtMB(aj.total_bytes);
      slot.innerHTML = `<div style="font-size:12px;color:#475569;margin-bottom:6px;">📎 附件 ${aj.count} 個 · ${usedMB} MB</div>`
        + aj.items.map((it) => {
          const sizeKB = Pure.fmtKB(it.size_bytes);
          return `<div style="display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:4px;font-size:12px;">
            <span style="flex:1;color:#0b1f33;">${escapeHtml(it.filename)}</span>
            <span style="color:#94a3b8;">${sizeKB} KB</span></div>`;
        }).join("");
    })();

    if (isApproved) {
      const openBtn = m.card.querySelector("#kms-open");
      if (openBtn) openBtn.addEventListener("click", () => {
        m.close();
        if (d.target_document_id) openDocView(d.target_document_id);
        else toast("找不到對應文件", "error");
      });
    }

    // Phase5-B §46.1：withdrawn → draft 重新編輯（一律跳 submit 頁可編輯，不開預覽 modal）
    if (isWithdrawn) {
      const rBtn = m.card.querySelector("#kms-restore-draft");
      if (rBtn) rBtn.addEventListener("click", async () => {
        const rr = await api(`/api/pending/${pid}/resume`, { method: "POST" });
        if (!rr.ok) {
          toast(errMsg(await rr.json().catch(() => ({})), "無法重新編輯"), "error");
          return;
        }
        const detail = await rr.json();
        m.close();
        toast("已轉回草稿，可重新編輯", "ok");
        // 統一走 submit 頁編輯（不開預覽 modal，那個是 read-only）
        NS._pendingResumeId = pid;
        if (typeof window.switchPage === "function") window.switchPage("submit");
        // 載原始輸入或 AI body 到編輯區
        const editor = document.querySelector('main.page[data-page="submit"] .submit-editor__textarea');
        if (editor) {
          const seed = (detail.ai_result && detail.ai_result.body) || detail.original_content || d.original_content || "";
          _setEditorText(editor, seed);   // 保留換行
        }
      });
    }

    // Phase5-B §46.1：pending 撤回按鈕
    if (isPending) {
      const wBtn = m.card.querySelector("#kms-withdraw");
      if (wBtn) wBtn.addEventListener("click", async () => {
        if (!window.confirm("確定撤回此提交？已通知的審核者會收到撤回通知。")) return;
        const r = await api(`/api/pending/${pid}`, { method: "DELETE" });
        const j = await r.json().catch(() => ({}));
        if (r.ok) {
          toast(j.action === "withdrawn" ? "已撤回" : "已刪除", "ok");
          m.close();
          if (typeof loadDashboard === "function") loadDashboard();
        } else toast(errMsg(j, "撤回失敗"), "error");
      });
    }

    if (isDraft) {
      const delBtn = m.card.querySelector("#kms-del");
      if (delBtn) delBtn.addEventListener("click", async () => {
        if (!window.confirm("確定刪除？此動作無法復原。")) return;
        const r = await api(`/api/pending/${pid}`, { method: "DELETE" });
        if (r.ok) { toast("已刪除", "ok"); m.close(); if (typeof loadDashboard === "function") loadDashboard(); }
        else toast(errMsg(await r.json().catch(() => ({})), "刪除失敗"), "error");
      });
      const resumeBtn = m.card.querySelector("#kms-resume");
      if (resumeBtn) resumeBtn.addEventListener("click", async () => {
        m.close();
        // 統一邏輯（使用者裁決 A）：草稿一律跳 submit 頁編輯
        NS._pendingResumeId = pid;
        if (typeof window.switchPage === "function") window.switchPage("submit");
        const editor = document.querySelector('main.page[data-page="submit"] .submit-editor__textarea');
        if (editor) {
          const seedText = (ai && ai.body) || d.original_content || seed || "";
          _setEditorText(editor, seedText);   // 保留換行
        }
        toast("已載入內容，編輯後送出會重跑 AI", "info");
      });
    }

    if (isRejected) {
      const ta = m.card.querySelector("#kms-ta");
      const btn = m.card.querySelector("#kms-resubmit");
      btn.addEventListener("click", async () => {
        const content = (ta.value || "").trim();
        if (!content) { toast("請輸入內容", "error"); return; }
        btn.disabled = true;
        const orig = btn.textContent;
        btn.textContent = "重送中…";
        try {
          const rr = await api(`/api/reviews/${pid}/resubmit`, {
            method: "POST", body: JSON.stringify({ content }),
          });
          const jj = await rr.json().catch(() => ({}));
          if (!rr.ok) {
            if (jj.detail && jj.detail.error === "pii_detected") {
              toast(`PII 命中（${jj.detail.rule}）：「${jj.detail.match}」`, "error");
            } else { toast(errMsg(jj, "重送失敗"), "error"); }
            return;
          }
          m.close();
          toast("已重新送出，AI 整理中…", "info");
          const ready = await pollPendingReady(pid);
          if (ready === "timeout") {
            toast("AI 仍在整理中，完成後會以鈴鐺通知您；可至儀表板「我的草稿」開啟預覽", "info");
            return;
          }
          if (!ready) { promptAiFailRecovery(pid, content, (rdy) => openSubmitPreviewModal(pid, rdy, null, { visibility: d.visibility })); return; }
          openSubmitPreviewModal(pid, ready, null, { visibility: d.visibility });
          if (typeof loadDashboard === "function") loadDashboard();
        } finally {
          btn.disabled = false;
          btn.textContent = orig;
        }
      });
    }
  }
  NS.openMySubmissionModal = openMySubmissionModal;

  // 我的草稿清單（dashboard「我的草稿」KPI 點開）
  function openMyDraftsModal(drafts) {
    const rows = (drafts || []).map((d) => {
      const meta = d.ai_meta || {};
      const title = meta.title || "（未命名草稿）";
      const when = reviewTimeLabel(d.updated_at || d.created_at);
      const statusTxt = d.status === "ai_ready" ? "AI 已整理（未送審）" : "草稿";
      return `<div class="kbv5-draft-row" data-pid="${d.id}" style="display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #f1f5f9;">
        <div class="kbv5-draft-open" data-pid="${d.id}" style="min-width:0;flex:1;cursor:pointer;">
          <div style="font-size:14px;color:#0b1f33;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${escapeHtml(title)}</div>
          <div style="font-size:12px;color:#94a3b8;">${escapeHtml(statusTxt)} · ${escapeHtml(when)}</div>
        </div>
        <div style="display:flex;align-items:center;gap:12px;white-space:nowrap;">
          <span class="kbv5-draft-open" data-pid="${d.id}" style="font-size:12px;color:#009BCB;cursor:pointer;">繼續編輯 →</span>
          <button class="kbv5-draft-del" data-pid="${d.id}" data-title="${escapeHtml(title)}" title="刪除草稿" style="border:0;background:transparent;color:#ef4444;cursor:pointer;font-size:15px;">🗑</button>
        </div>
      </div>`;
    }).join("") || '<div style="padding:20px;text-align:center;color:#94a3b8;font-size:13px;">目前沒有草稿</div>';

    const m = _kbModal(`
      <div style="padding:18px 24px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">
        <div style="font-size:16px;font-weight:600;color:#0b1f33;">我的草稿（${(drafts || []).length}）</div>
        <button id="kmd-close" style="border:0;background:transparent;color:#94a3b8;font-size:20px;cursor:pointer;">✕</button>
      </div>
      <div style="max-height:60vh;overflow:auto;">${rows}</div>`, 560);
    m.card.querySelector("#kmd-close").addEventListener("click", m.close);
    m.card.querySelectorAll(".kbv5-draft-open").forEach((el) => {
      el.addEventListener("click", () => {
        m.close();
        openMySubmissionModal(parseInt(el.dataset.pid, 10));
      });
    });
    m.card.querySelectorAll(".kbv5-draft-del").forEach((btn) => {
      btn.addEventListener("click", async (e) => {
        e.stopPropagation();
        if (!window.confirm(`確定刪除草稿「${btn.dataset.title}」？此動作無法復原。`)) return;
        const r = await api(`/api/pending/${btn.dataset.pid}`, { method: "DELETE" });
        if (r.ok) {
          toast("草稿已刪除", "ok");
          const rowEl = btn.closest(".kbv5-draft-row");
          if (rowEl) rowEl.remove();
        } else {
          toast(errMsg(await r.json().catch(() => ({})), "刪除失敗"), "error");
        }
      });
    });
  }
  NS.openMyDraftsModal = openMyDraftsModal;

  // ============================================================
  // REVIEW 頁綁線（L5，PRD §7.3 / §7.4）
  // ============================================================
  function wireReview() {
    const page = document.querySelector('main.page[data-page="review"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";

    // 監聽進入 review 頁
    const obs = new MutationObserver(() => {
      if (page.classList.contains("is-active")) loadReviewBoard();
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active")) loadReviewBoard();

    // 「歷史紀錄」按鈕（原本死的）→ 開 modal 列出我審過的（approved/rejected）
    const histBtn = Array.from(page.querySelectorAll(".page__header button, .page__actions button, .review-filters button"))
      .find((b) => (b.textContent || "").includes("歷史紀錄"));
    if (histBtn && !histBtn.dataset.kbv5) {
      histBtn.dataset.kbv5 = "1";
      histBtn.addEventListener("click", _openReviewHistory);
    }

    wireReviewModal();
  }

  // 我的審核歷史 modal（GET /api/reviews/me/submitted）
  async function _openReviewHistory() {
    const r = await api("/api/reviews/me/submitted").catch(() => null);
    if (!r || !r.ok) { toast(r && r.status === 403 ? "您沒有審核權限" : "讀取歷史失敗", "error"); return; }
    const items = await r.json().catch(() => []);
    document.querySelectorAll("[data-kbv5-revhist]").forEach((n) => n.remove());
    const ov = document.createElement("div");
    ov.dataset.kbv5Revhist = "1";
    ov.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;";
    const rows = (items || []).map((it) => {
      const ok = it.status === "approved";
      const pill = ok ? '<span style="color:#16a34a;">✔ 核准</span>' : '<span style="color:#dc2626;">✘ 退回</span>';
      const when = it.reviewed_at ? reviewTimeLabel(it.reviewed_at) : "";
      const reason = it.reject_reason ? `<div style="font-size:11px;color:var(--text-3);margin-top:2px;">退回原因：${escapeHtml(it.reject_reason)}</div>` : "";
      return `<tr><td style="padding:6px 4px;">${escapeHtml(it.title || "(未命名)")}${reason}</td><td style="text-align:center;white-space:nowrap;">${pill}</td><td style="text-align:right;color:var(--text-3);white-space:nowrap;">${when}</td></tr>`;
    }).join("");
    const card = document.createElement("div");
    card.style.cssText = "background:var(--surface);border-radius:12px;padding:22px 26px;max-width:620px;width:92%;max-height:80vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3);";
    card.innerHTML =
      `<div style="font-size:16px;font-weight:700;margin-bottom:4px;">📋 我的審核歷史</div>` +
      `<div style="font-size:12px;color:var(--text-3);margin-bottom:14px;">最近 ${(items || []).length} 筆已核准 / 已退回</div>` +
      `<table style="width:100%;font-size:13px;border-collapse:collapse;"><tbody>${rows || '<tr><td style="color:var(--text-3);padding:12px;">（尚無審核紀錄）</td></tr>'}</tbody></table>` +
      `<div style="display:flex;justify-content:flex-end;margin-top:16px;"><button class="btn btn--quiet btn--sm" data-revhist-close>關閉</button></div>`;
    ov.appendChild(card);
    document.body.appendChild(ov);
    ov.addEventListener("click", (e) => { if (e.target === ov) ov.remove(); });
    card.querySelector("[data-revhist-close]").addEventListener("click", () => ov.remove());
  }

  function reviewTimeLabel(iso) {
    return Pure.relativeTime(iso, Date.now());   // 純邏輯抽到 pure.js（已測），時間由此注入
  }

  async function loadReviewBoard() {
    const page = document.querySelector('main.page[data-page="review"]');
    if (!page) return;

    // flash 修復：先同步移除 mockup 寫死的假審核卡，再去抓資料。
    // 否則切到審核頁的瞬間頁面已可見，但清卡片要等下方 await 回來 → 假卡會閃出來。
    page.querySelectorAll(".review-card").forEach((c) => c.remove());

    // 並行抓 pending + my-history（已 review 過的）
    const [rp, rh] = await Promise.all([
      api("/api/reviews/pending").catch(() => null),
      api("/api/reviews/me/submitted").catch(() => null),
    ]);

    let pending = [];
    let history = [];
    if (rp && rp.ok) pending = await rp.json();
    if (rh && rh.ok) history = await rh.json();
    if (!rp || !rp.ok) {
      // 403 → 沒權限。清空欄位、提示
      if (rp && rp.status === 403) {
        page.querySelectorAll(".review-board").forEach((b) => {
          b.innerHTML = '<div style="padding:32px;color:var(--text-3);font-size:13px;">您沒有審核權限。</div>';
        });
      }
      return;
    }

    const approved = history.filter((h) => h.status === "approved");
    const rejected = history.filter((h) => h.status === "rejected");

    const cols = page.querySelectorAll(".review-col");
    if (!cols.length) return;
    const colPending = cols[0];
    const colApproved = cols[1];
    const colRejected = cols[2];

    renderReviewCards(colPending, pending, "pending");
    renderReviewCards(colApproved, approved.slice(0, 20), "approved");
    renderReviewCards(colRejected, rejected.slice(0, 20), "rejected");

    // 更新 header 統計
    const headerP = page.querySelector(".page__title-group p");
    if (headerP) {
      headerP.textContent = `待審核 ${pending.length} 件 · 本週已核准 ${approved.length} 件 · 本週退回 ${rejected.length} 件`;
    }
    cols.forEach((c, i) => {
      const cnt = c.querySelector(".review-col__count");
      if (cnt) cnt.textContent = [pending.length, approved.length, rejected.length][i];
    });
    _setReviewBadge(pending.length);  // 導覽列徽章同步真實待審數
  }

  function renderReviewCards(col, items, kind) {
    if (!col) return;
    // 留下 header 移除舊卡片
    col.querySelectorAll(".review-card").forEach((c) => c.remove());
    const frag = document.createDocumentFragment();
    items.forEach((it) => {
      const meta = it.ai_meta || {};
      const title = meta.title || (it.original_content || "").slice(0, 30) || "（未命名）";
      const preview = meta.summary || (it.original_content || "").slice(0, 80);
      const submitterDept = it.submitter_department || "";
      const initial = (submitterDept || "?").slice(0, 1);
      const tags = (meta.tags || []).slice(0, 2);
      const tagsHtml = tags.map((t) => `<span class="tag-pill">${escapeHtml(t)}</span>`).join("");
      const card = document.createElement("div");
      card.className = "review-card" + (kind === "rejected" ? " review-card--rejected" : "");
      card.dataset.pid = it.id;
      card.dataset.kind = kind;
      const timeIso = kind === "pending" ? it.created_at : it.reviewed_at;
      const rejectBlock = kind === "rejected"
        ? `<div class="reject-reason"><b>退回原因：</b>${escapeHtml(it.reject_reason || "")}</div>`
        : "";
      const footBlock = kind === "approved"
        ? `<div class="review-card__foot"><span style="color:var(--ok);font-weight:600;">✓ 已收錄</span>${tagsHtml}</div>`
        : kind === "rejected"
          ? `<div class="review-card__foot"><span style="color:var(--text-3);">已通知提交者</span></div>`
          : `<div class="review-card__foot"><span class="ai-flag">AI 已整理</span>${tagsHtml}</div>`;
      const previewBlock = kind === "rejected" ? rejectBlock : `<div class="review-card__preview">${escapeHtml(preview)}</div>`;
      card.innerHTML = `
        <div class="review-card__head">
          <div class="avatar" style="width:20px;height:20px;font-size:10px;">${escapeHtml(initial)}</div>
          <span>${escapeHtml(submitterDept)}</span>
          <span style="margin-left:auto;">${reviewTimeLabel(timeIso)}</span>
        </div>
        <div class="review-card__title">${escapeHtml(title)}</div>
        ${previewBlock}
        ${footBlock}
      `;
      if (kind === "pending") {
        card.style.cursor = "pointer";
        card.addEventListener("click", () => openReviewModalForPid(it.id));
      }
      frag.appendChild(card);
    });
    col.appendChild(frag);
  }

  // ===== Review modal wiring =====
  let _currentReviewPid = null;

  // Phase5-B §46.5：轉派審核 modal
  async function openReassignModal(pid) {
    const r = await api("/api/users?role=manager&limit=200");
    let candidates = [];
    if (r.ok) {
      const j = await r.json();
      candidates = (j.items || j || []).filter((u) =>
        ["admin", "senior_manager", "manager"].includes(u.role) &&
        u.id !== (Auth.user && Auth.user.id));
    }
    if (candidates.length === 0) {
      toast("沒有可轉派的審核者", "info");
      return;
    }
    const opts = candidates.map((u) => `<option value="${u.id}">${escapeHtml(u.display_name || u.username)} (${escapeHtml(u.role)} · ${escapeHtml(u.department || "")})</option>`).join("");
    const m = _kbModal(`
      <div style="padding:18px 24px;border-bottom:1px solid #e2e8f0;">
        <div style="font-size:16px;font-weight:600;">轉派審核 #${pid}</div>
        <div style="font-size:12px;color:#64748b;margin-top:4px;">轉派後對方會收到通知，原審核者仍可審。</div>
      </div>
      <div style="padding:20px 24px;">
        <div style="font-size:12px;color:#64748b;margin-bottom:6px;">指派給</div>
        <select id="ra-assignee" style="width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;">${opts}</select>
        <div style="font-size:12px;color:#64748b;margin:14px 0 6px;">備註（選填）</div>
        <textarea id="ra-note" rows="3" maxlength="500" style="width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box;" placeholder="說明轉派原因..."></textarea>
      </div>
      <div style="padding:14px 24px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;">
        <button id="ra-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;border-radius:6px;cursor:pointer;">取消</button>
        <button id="ra-submit" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-weight:600;">送出轉派</button>
      </div>`, 520);
    m.card.querySelector("#ra-cancel").addEventListener("click", m.close);
    m.card.querySelector("#ra-submit").addEventListener("click", async () => {
      const assignee_id = parseInt(m.card.querySelector("#ra-assignee").value, 10);
      const note = m.card.querySelector("#ra-note").value.trim();
      const r = await api(`/api/reviews/${pid}/reassign`, {
        method: "POST", body: JSON.stringify({ assignee_id, note: note || undefined }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { toast(errMsg(j, "轉派失敗"), "error"); return; }
      toast(`已轉派給 ${j.assignee?.display_name || "對方"}`, "ok");
      m.close();
    });
  }

  // Phase5-B §46.4：移交文件 modal（admin only）
  async function openTransferDocsModal(fromUid, fromName) {
    const r = await api("/api/users?limit=500");
    let candidates = [];
    if (r.ok) {
      const j = await r.json();
      candidates = (j.items || j || []).filter((u) => u.id !== fromUid && u.is_active);
    }
    const opts = candidates.map((u) => `<option value="${u.id}">${escapeHtml(u.display_name || u.username)} (${escapeHtml(u.department || "")})</option>`).join("");
    const m = _kbModal(`
      <div style="padding:18px 24px;border-bottom:1px solid #e2e8f0;">
        <div style="font-size:16px;font-weight:600;">移交 ${escapeHtml(fromName)} 的文件</div>
        <div style="font-size:12px;color:#dc2626;margin-top:4px;">⚠️ 此操作需 admin + step-up 密碼。文件作者與所屬部門會一併改寫。</div>
      </div>
      <div style="padding:20px 24px;">
        <div style="font-size:12px;color:#64748b;margin-bottom:6px;">接班人</div>
        <select id="td-new-owner" style="width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;">${opts}</select>
        <label style="display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;">
          <input type="checkbox" id="td-include-pending" /> 同時移交未終局的 pending（草稿/AI 整理中/送審中）
        </label>
        <div style="font-size:12px;color:#64748b;margin:14px 0 6px;">您的密碼（step-up）</div>
        <input type="password" id="td-pwd" autocomplete="off" style="width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box;" />
      </div>
      <div style="padding:14px 24px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;">
        <button id="td-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;border-radius:6px;cursor:pointer;">取消</button>
        <button id="td-submit" style="padding:8px 18px;border:0;background:#dc2626;color:#fff;border-radius:6px;cursor:pointer;font-weight:600;">確認移交</button>
      </div>`, 560);
    m.card.querySelector("#td-cancel").addEventListener("click", m.close);
    m.card.querySelector("#td-submit").addEventListener("click", async () => {
      const new_owner_id = parseInt(m.card.querySelector("#td-new-owner").value, 10);
      const include_pending = m.card.querySelector("#td-include-pending").checked;
      const step_up_password = m.card.querySelector("#td-pwd").value;
      if (!step_up_password) { toast("請輸入密碼", "error"); return; }
      const r = await api(`/api/users/${fromUid}/transfer-documents`, {
        method: "PATCH",
        body: JSON.stringify({ new_owner_id, include_pending, step_up_password }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { toast(errMsg(j, "移交失敗"), "error"); return; }
      toast(`已移交 ${j.doc_count} 篇文件${include_pending ? ` + ${j.pend_count} 個 pending` : ""}`, "ok");
      m.close();
    });
  }
  NS.openTransferDocsModal = openTransferDocsModal;

  function wireReviewModal() {
    const modal = document.getElementById("review-modal");
    if (!modal || modal.dataset.kbv5 === "1") return;
    modal.dataset.kbv5 = "1";

    // 三個 tab 切換（HTML 原本就有 toolbar）
    modal.querySelectorAll(".review-modal-toolbar button").forEach((btn) => {
      btn.addEventListener("click", () => {
        modal.querySelectorAll(".review-modal-toolbar button").forEach((b) => b.classList.remove("is-active"));
        btn.classList.add("is-active");
        const tab = btn.dataset.tab;
        const aiEl = modal.querySelector("#ai-tab");
        const rawEl = modal.querySelector("#raw-tab");
        const diffEl = modal.querySelector("#diff-tab");
        if (aiEl) aiEl.style.display = tab === "ai" ? "" : "none";
        if (rawEl) rawEl.style.display = tab === "raw" ? "" : "none";
        if (diffEl) diffEl.style.display = tab === "diff" ? "" : "none";
      });
    });

    // 攔截原 HTML 的「核准並收錄」按鈕（原本 onclick=closeReviewModal）
    const footer = modal.querySelector(".modal__footer");
    if (footer) {
      const buttons = footer.querySelectorAll("button");
      // 順序：退回 / 標為待議 / 先放著 / 核准並收錄
      const rejectBtn = buttons[0];
      const deferBtn = buttons[1];
      const approveBtn = buttons[buttons.length - 1];
      // mockup 中間按鈕 text 可能是「先放著」或「待議」(PRD 無對應 status)
      // → 一律改為「轉派審核」（§46.5）
      const deferText = (deferBtn && deferBtn.textContent || "").trim();
      if (deferBtn && (deferText.includes("待議") || deferText.includes("先放著"))) {
        deferBtn.textContent = "轉派審核";
        deferBtn.addEventListener("click", async (e) => {
          e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
          if (!_currentReviewPid) return;
          await openReassignModal(_currentReviewPid);
        }, true);
      }
      if (rejectBtn) {
        rejectBtn.addEventListener("click", async (e) => {
          e.preventDefault();
          if (!_currentReviewPid) return;
          const v = await securePrompt({
            title: "退回原因",
            desc: "請填寫退回原因，提交者會看到此訊息。",
            fields: [{ name: "reason", label: "退回原因（必填）", type: "text",
                       placeholder: "請補充背景並重送", maxlength: 2000 }],
          });
          if (!v || !v.reason.trim()) return;
          const r = await api(`/api/reviews/${_currentReviewPid}/reject`, {
            method: "POST", body: JSON.stringify({ reason: v.reason.trim() }),
          });
          const j = await r.json().catch(() => ({}));
          if (!r.ok) { toast(errMsg(j, "退回失敗"), "error"); return; }
          toast("已退回", "ok");
          modal.classList.remove("is-open");
          loadReviewBoard();
        }, true);  // capture 階段以攔截原 onclick
      }
      if (approveBtn) {
        approveBtn.addEventListener("click", async (e) => {
          e.preventDefault();
          e.stopPropagation();
          e.stopImmediatePropagation();
          if (!_currentReviewPid) return;
          const r = await api(`/api/reviews/${_currentReviewPid}/approve`, {
            method: "POST",
          });
          const j = await r.json().catch(() => ({}));
          if (!r.ok) { toast(errMsg(j, "核准失敗"), "error"); return; }
          toast(`已核准並收錄 (#${j.document_id})`, "ok");
          modal.classList.remove("is-open");
          loadReviewBoard();
        }, true);
      }
    }
  }

  async function openReviewModalForPid(pid) {
    _currentReviewPid = pid;
    const modal = document.getElementById("review-modal");
    if (!modal) return;
    const r = await api(`/api/reviews/${pid}`);
    if (_currentReviewPid !== pid) return;  // 競態防護：已點開別筆 → 放棄舊回應渲染（避免審錯對象）
    if (!r.ok) { toast(errMsg(await r.json().catch(() => ({})), "載入失敗"), "error"); return; }
    const data = await r.json();
    if (_currentReviewPid !== pid) return;
    const ai = data.ai_result || {};
    const meta = data.ai_meta || {};
    // 標題
    const titleEl = modal.querySelector(".modal__title");
    if (titleEl) {
      const svg = titleEl.querySelector("svg");
      titleEl.innerHTML = "";
      if (svg) titleEl.appendChild(svg);
      titleEl.appendChild(document.createTextNode(" 審核：" + (ai.title || meta.title || "未命名")));
    }
    // Meta bar
    const metaBar = modal.querySelector(".modal-meta-bar");
    if (metaBar) {
      const submitter = await fetchSubmitterLabel(data.submitter_id);
      metaBar.innerHTML =
        `<div>提交者：<b>${escapeHtml(submitter || ("#" + data.submitter_id))}</b></div>` +
        `<div>部門：<b>${escapeHtml(data.submitter_department || "")}</b></div>` +
        `<div>提交時間：<b>${reviewTimeLabel(data.created_at)}</b></div>` +
        `<div>建議可見度：<b>部門內部</b></div>` +
        `<div>AI 判定：<b style="color:${ai.merge_suggestion ? "var(--warn)" : "var(--text-3)"};">${_mergeVerdict(ai.merge_suggestion)}</b></div>`;
    }
    // 三個 tab 內容
    const aiTab = modal.querySelector("#ai-tab");
    const rawTab = modal.querySelector("#raw-tab");
    const diffTab = modal.querySelector("#diff-tab");
    if (aiTab) {
      aiTab.innerHTML =
        `<h3>${escapeHtml(ai.title || "")}</h3>` +
        `<div style="margin:8px 0;color:var(--text-3);font-size:12px;">分類：${escapeHtml(ai.category || "")}　|　摘要：${escapeHtml(ai.summary || "")}</div>` +
        `<pre style="white-space:pre-wrap;font-family:var(--font-mono);background:var(--surface-2);padding:12px;border-radius:8px;font-size:13px;">${escapeHtml(ai.body || "")}</pre>` +
        `<div style="margin-top:8px;">${(ai.tags || []).map((t) => `<span class="tag-pill">${escapeHtml(t)}</span>`).join(" ")}</div>`;
    }
    if (rawTab) {
      rawTab.textContent = data.original_content || "";
    }
    if (diffTab) {
      const ms = ai.merge_suggestion;
      if (ms && ms.action === "merge") {
        diffTab.innerHTML = '<div style="padding:16px;">' + _mergeBlockHtml(ai, "核准") + "</div>";
      } else if (ms) {
        diffTab.innerHTML = `<div style="padding:20px;font-size:13px;line-height:1.7;">` +
          `<div style="font-weight:600;margin-bottom:6px;">重疊偵測：建議關聯</div>` +
          `<div>與既有文件 <b>「${escapeHtml(ms.title || ("#" + ms.document_id))}」</b>（#${ms.document_id}）相似度 <b>${Math.round((ms.score || 0) * 100)}%</b>，未達合併門檻。</div></div>`;
      } else {
        diffTab.innerHTML = '<div style="padding:24px;color:var(--text-3);font-size:13px;">本次提交為獨立新增，無重疊偵測建議。</div>';
      }
    }
    // 預設 AI tab
    modal.querySelectorAll(".review-modal-toolbar button").forEach((b) => b.classList.remove("is-active"));
    const aiTabBtn = modal.querySelector('.review-modal-toolbar button[data-tab="ai"]');
    if (aiTabBtn) aiTabBtn.classList.add("is-active");
    if (aiTab) aiTab.style.display = "";
    if (rawTab) rawTab.style.display = "none";
    if (diffTab) diffTab.style.display = "none";

    modal.classList.add("is-open");
  }

  // 簡單快取：submitter id → username
  const _submitterCache = new Map();
  async function fetchSubmitterLabel(uid) {
    if (_submitterCache.has(uid)) return _submitterCache.get(uid);
    try {
      const r = await api(`/api/users/${uid}`);
      if (r.ok) {
        const j = await r.json();
        _submitterCache.set(uid, j.username);
        return j.username;
      }
    } catch (e) {}
    return null;
  }

  // ============================================================
  // LIBRARY 知識庫列表 + VIEW 檢視（L6，PRD §11/§12.3/§12.5）
  // ============================================================
  const VIS_BADGE = {
    public: { cls: "vis-public", label: "🌐 公開" },
    department: { cls: "vis-dept", label: "部門內部" },
    selected_departments: { cls: "vis-selected", label: "🏢 自選部門" },
    restricted: { cls: "vis-restricted", label: "🔒 限定" },
    confidential: { cls: "vis-confidential", label: "🔴 高度機密" },
  };

  function wireLibrary() {
    const page = document.querySelector('main.page[data-page="library"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";

    // Pattern 01 強化：init 時立刻清 mockup 的假 doc-card，避免每次切到
    // library 都先閃一下 mockup 假資料（user 看到的「mock 跳一下」）
    const grid0 = page.querySelector("#lib-grid, .lib-grid");
    if (grid0) grid0.querySelectorAll(".doc-card").forEach((c) => c.remove());

    // Phase5-C #3：重新進入 library 時歸 0（除非 topbar search 帶 q 進來）
    let _libWasActive = page.classList.contains("is-active");
    const obs = new MutationObserver(() => {
      const nowActive = page.classList.contains("is-active");
      if (nowActive && !_libWasActive) {
        const q = NS._topbarSearchQ;
        NS._topbarSearchQ = null;
        if (q) {
          // 帶 q 進來：保留搜尋框值
          loadLibrary(q);
        } else {
          // 真正換頁進入（非 topbar 搜尋）→ 清空狀態
          _libActiveTags.clear();
          _libTagSearchQ = "";
          const searchInput0 = page.querySelector(".lib-toolbar .search-box input");
          if (searchInput0) searchInput0.value = "";
          const tagSearch0 = page.querySelector("[data-tag-search]");
          if (tagSearch0) tagSearch0.value = "";
          loadLibrary();
        }
      }
      _libWasActive = nowActive;
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active")) loadLibrary();

    // 批次操作入口 + batch-bar 動作鈕（§10.4 + D52 §10.4.1）
    _wireLibBatch(page);

    // 搜尋框
    const searchInput = page.querySelector(".lib-toolbar .search-box input");
    if (searchInput) {
      let t = null;
      searchInput.addEventListener("input", () => {
        clearTimeout(t);
        t = setTimeout(() => loadLibrary(searchInput.value.trim()), 300);
      });
    }
    // 可見度 select（第 1 個）+ 排序 select（第 2 個）
    const selects = page.querySelectorAll(".lib-toolbar select");
    if (selects[0]) selects[0].addEventListener("change", () => applyLibFilters());
    if (selects[1]) selects[1].addEventListener("change", () => loadLibrary());
    // §45.1 注入「狀態」下拉（mockup 沒有，這裡 runtime 補上）
    if (selects[0] && !page.querySelector("[data-kbv5-status]")) {
      const statusSel = document.createElement("select");
      statusSel.dataset.kbv5Status = "1";
      statusSel.className = selects[0].className;
      statusSel.style.width = "110px";
      statusSel.style.flexShrink = "0";
      statusSel.innerHTML = '<option value="active">使用中</option>'
        + '<option value="archived">已封存</option>'
        + '<option value="all">全部</option>';
      selects[0].parentNode.insertBefore(statusSel, selects[0].nextSibling);
      statusSel.addEventListener("change", () => loadLibrary());
    }
    // grid/list 切換沿用原 HTML view-toggle（不干涉）

    // 標籤篩選：事件委派（chips 由 loadLibrary 動態重建）
    const tagWrap = page.querySelector(".tag-chips");
    if (tagWrap && !tagWrap.dataset.kbv5) {
      tagWrap.dataset.kbv5 = "1";
      // Phase5-C #1：標籤搜尋輸入框（debounce 0.7s）
      // Phase5-C #4：清除全部標籤按鈕
      const ctrlBar = document.createElement("div");
      ctrlBar.dataset.kbv5TagCtrl = "1";
      ctrlBar.style.cssText = "display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-basis:100%;";
      ctrlBar.innerHTML = `
        <input type="text" data-tag-search placeholder="🔍 搜尋標籤..."
          style="flex:1;padding:6px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:12px;outline:none;" />
        <button data-tag-clear-all
          style="display:none;border:1px solid #fecaca;background:#fff;color:#ef4444;padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12px;">
          ✕ 清除全部
        </button>`;
      tagWrap.insertBefore(ctrlBar, tagWrap.firstChild);

      // 標籤搜尋 debounce
      const tagSearch = ctrlBar.querySelector("[data-tag-search]");
      let _tagSearchTimer = null;
      tagSearch.addEventListener("input", () => {
        clearTimeout(_tagSearchTimer);
        _tagSearchTimer = setTimeout(() => {
          _libTagSearchQ = tagSearch.value.trim().toLowerCase();
          rebuildTagChips();
        }, 700);
      });

      // 清除全部按鈕
      const clearBtn = ctrlBar.querySelector("[data-tag-clear-all]");
      clearBtn.addEventListener("click", () => {
        _libActiveTags.clear();
        rebuildTagChips();
        applyLibFilters();
      });

      tagWrap.addEventListener("click", (e) => {
        const chip = e.target.closest(".chip");
        if (!chip) return;
        if (chip.dataset.more === "1") { _libTagsExpanded = !_libTagsExpanded; rebuildTagChips(); return; }
        const tag = chip.dataset.tag;
        if (!tag) return;
        if (_libActiveTags.has(tag)) _libActiveTags.delete(tag);
        else _libActiveTags.add(tag);
        // 點選後清空搜尋輸入，回到完整流程
        if (tagSearch.value) { tagSearch.value = ""; _libTagSearchQ = ""; }
        rebuildTagChips();
        applyLibFilters();
      });
    }
  }

  let _libDocs = [];
  const _libActiveTags = new Set();
  let _libTagsExpanded = false;
  let _libTagSearchQ = "";   // Phase5-C #1：tag 搜尋過濾關鍵字
  // 批次操作（§10.4 + D52 §10.4.1）：模式旗標 + 已選文件 id
  let _libBatchMode = false;
  const _libSelected = new Set();
  // 邊界補：library 套篩選後 header 顯示「篩選後 X 篇」用的基準
  let _libBaseTotal = 0, _libBaseQuery = "";

  // 可見度標籤 → key 反查（lib-toolbar 第 1 個 select 用文字）
  const VIS_LABEL_TO_KEY = {
    "所有可見度": "", "🌐 公開": "public", "部門內部": "department",
    "🏢 自選部門": "selected_departments", "🔒 限定": "restricted", "🔴 高度機密": "confidential",
  };

  function rebuildTagChips() {
    const page = document.querySelector('main.page[data-page="library"]');
    const wrap = page && page.querySelector(".tag-chips");
    if (!wrap) return;
    // Phase5-C：以「已套用 active tags 過濾後」的文件集合計算可用標籤
    // → 達成漸進收斂：選了甘油 → 只剩「跟甘油同時出現過」的標籤可選
    let source = _libDocs;
    if (_libActiveTags.size > 0) {
      source = _libDocs.filter((d) => {
        const docTags = new Set(d.tags || []);
        for (const t of _libActiveTags) { if (!docTags.has(t)) return false; }
        return true;
      });
    }
    const freq = new Map();
    source.forEach((d) => (d.tags || []).forEach((t) => freq.set(t, (freq.get(t) || 0) + 1)));
    // 確保已選中的標籤永遠出現（即使 0 docs，使用者才能取消選取）
    _libActiveTags.forEach((t) => { if (!freq.has(t)) freq.set(t, 0); });
    // Phase5-C #1：套用 tag 搜尋關鍵字過濾
    let candidates = [...freq.keys()];
    if (_libTagSearchQ) {
      candidates = candidates.filter((t) =>
        t.toLowerCase().includes(_libTagSearchQ) || _libActiveTags.has(t));
    }
    const sorted = candidates.sort((a, b) => (freq.get(b) - freq.get(a)) || a.localeCompare(b));
    const LIMIT = 15;
    const show = _libTagsExpanded ? sorted : sorted.slice(0, LIMIT);
    // 移除舊 chips（保留 label + 控制列）
    wrap.querySelectorAll(".chip").forEach((c) => c.remove());
    // Phase5-C #4：清除全部按鈕顯隱
    const clearAllBtn = wrap.querySelector("[data-tag-clear-all]");
    if (clearAllBtn) clearAllBtn.style.display = _libActiveTags.size > 0 ? "" : "none";
    const frag = document.createDocumentFragment();
    show.forEach((t) => {
      const chip = document.createElement("span");
      chip.className = "chip" + (_libActiveTags.has(t) ? " is-active" : "");
      chip.dataset.tag = t;
      chip.textContent = t;
      frag.appendChild(chip);
    });
    if (!_libTagsExpanded && sorted.length > LIMIT) {
      const more = document.createElement("span");
      more.className = "chip";
      more.dataset.more = "1";
      more.style.cssText = "color:var(--accent);font-weight:600;";
      more.textContent = `+ 更多 (${sorted.length - LIMIT})`;
      frag.appendChild(more);
    } else if (_libTagsExpanded && sorted.length > LIMIT) {
      const less = document.createElement("span");
      less.className = "chip";
      less.dataset.more = "1";
      less.style.cssText = "color:var(--accent);font-weight:600;";
      less.textContent = "− 收合";
      frag.appendChild(less);
    }
    if (sorted.length === 0) {
      const none = document.createElement("span");
      none.className = "chip";
      none.style.cssText = "color:var(--text-3);cursor:default;";
      none.textContent = "（尚無標籤）";
      frag.appendChild(none);
    }
    wrap.appendChild(frag);
  }

  function applyLibFilters() {
    const page = document.querySelector('main.page[data-page="library"]');
    if (!page) return;
    const grid = page.querySelector("#lib-grid, .lib-grid");
    if (!grid) return;
    const selects = page.querySelectorAll(".lib-toolbar select");
    const visKey = selects[0] ? (VIS_LABEL_TO_KEY[selects[0].value] || "") : "";
    let filtered = _libDocs;
    if (visKey) filtered = filtered.filter((d) => d.visibility === visKey);
    const statusSel2 = page.querySelector("[data-kbv5-status]");
    const statusVal2 = statusSel2 ? statusSel2.value : "active";
    if (statusVal2 === "archived") filtered = filtered.filter((d) => d.status === "archived");
    else if (statusVal2 === "active") filtered = filtered.filter((d) => d.status !== "archived");
    if (_libActiveTags.size > 0) {
      // AND 語意（使用者期望縮窄）：必須含所有選取的標籤
      filtered = filtered.filter((d) => {
        const docTags = new Set(d.tags || []);
        for (const t of _libActiveTags) { if (!docTags.has(t)) return false; }
        return true;
      });
    }
    grid.querySelectorAll(".doc-card").forEach((c) => c.remove());
    renderDocCards(grid, filtered);
    // 邊界補：套篩選後 header 顯示「篩選後 X 篇」（原本不更新，停在 loadLibrary 的總數）
    const hp = page.querySelector(".page__title-group p");
    if (hp) {
      hp.textContent = Pure.libFilterHeaderText({
        baseTotal: _libBaseTotal, baseQuery: _libBaseQuery,
        filteredLen: filtered.length, loadedLen: _libDocs.length,
      });
    }
  }

  function _libGridError(grid, msg) {
    if (!grid) return;
    const div = document.createElement("div");
    div.className = "doc-card";
    div.style.cssText = "grid-column:1/-1;text-align:center;color:#dc2626;padding:30px;font-size:13px;";
    div.textContent = "⚠ " + msg;
    grid.appendChild(div);
  }

  async function loadLibrary(query) {
    const page = document.querySelector('main.page[data-page="library"]');
    if (!page) return;
    const grid = page.querySelector("#lib-grid, .lib-grid");
    if (!grid) return;
    const selects = page.querySelectorAll(".lib-toolbar select");
    const sortLabel = selects[1] ? selects[1].value : "最新優先";
    const sortMap = {
      "最新優先": ["updated", "desc"], "最舊優先": ["created", "asc"],
      "標題 A→Z": ["title", "asc"], "更新最頻繁": ["views", "desc"],
    };
    const [sort, order] = sortMap[sortLabel] || ["updated", "desc"];

    const statusSel = page.querySelector("[data-kbv5-status]");
    const statusVal = statusSel ? statusSel.value : "active";
    const includeArchived = (statusVal !== "active");
    let url;
    if (query) {
      url = `/api/documents/search?q=${encodeURIComponent(query)}`
        + (includeArchived ? "&include_archived=true" : "");
    } else {
      url = `/api/documents?sort=${sort}&order=${order}&limit=100`
        + (includeArchived ? "&include_archived=true" : "");
    }
    let r;
    try {
      r = await api(url);   // 斷網時 api() 會 throw → 下面 catch 顯示錯誤而非靜默壞掉
    } catch (e) {
      grid.querySelectorAll(".doc-card").forEach((c) => c.remove());
      _libDocs = [];
      _libGridError(grid, "網路連線失敗，請檢查連線後重新整理");
      return;
    }
    grid.querySelectorAll(".doc-card").forEach((c) => c.remove());
    if (!r.ok) {
      _libDocs = [];
      _libGridError(grid, "載入文件失敗（" + r.status + "），請稍後再試");
      return;
    }
    const data = await r.json();
    _libDocs = data.items || [];
    rebuildTagChips();
    applyLibFilters();
    // header 統計
    const headerP = page.querySelector(".page__title-group p");
    if (headerP) {
      const total = data.total != null ? data.total : _libDocs.length;
      _libBaseTotal = total; _libBaseQuery = query || "";   // 給 applyLibFilters 用
      headerP.textContent = query
        ? `搜尋「${query}」· 找到 ${total} 篇`
        : `共 ${total} 篇文件`;
    }
  }

  function renderDocCards(grid, docs) {
    if (docs.length === 0) {
      const empty = document.createElement("div");
      empty.className = "doc-card";
      empty.style.cssText = "grid-column:1/-1;text-align:center;color:var(--text-3);padding:32px;cursor:default;";
      empty.textContent = "沒有符合的文件";
      grid.appendChild(empty);
      return;
    }
    const frag = document.createDocumentFragment();
    docs.forEach((d) => {
      const vis = VIS_BADGE[d.visibility] || VIS_BADGE.department;
      const tags = (d.tags || []).slice(0, 4)
        .map((t) => `<span class="tag-pill">${escapeHtml(t)}</span>`).join("");
      const card = document.createElement("div");
      card.className = "doc-card";
      card.dataset.docId = d.id;
      card.style.cursor = "pointer";
      card.innerHTML = `
        <div class="doc-card__checkbox"></div>
        <div class="doc-card__top">
          <span class="vis-badge ${vis.cls}">${vis.label}</span>
          ${d.status === "archived" ? '<span style="display:inline-block;padding:2px 8px;background:#e2e8f0;color:#475569;border-radius:10px;font-size:11px;font-weight:600;margin-left:6px;">📦 封存</span>' : ""}
        </div>
        <div class="doc-card__title">${escapeHtml(d.title)}</div>
        <div class="doc-card__excerpt">${escapeHtml(d.summary || "")}</div>
        <div class="doc-card__tags">${tags}</div>
        <div class="doc-card__footer">
          <div class="doc-card__author"><div class="avatar">${escapeHtml((d.owner_department || "?").slice(0,1))}</div> ${escapeHtml(d.owner_department || "")}</div>
          <span>${reviewTimeLabel(d.updated_at)}</span>
        </div>`;
      // 批次模式下已選 → 還原勾選狀態（re-render 後保持）
      if (_libBatchMode && _libSelected.has(d.id)) card.classList.add("is-selected");
      card.addEventListener("click", (e) => {
        if (_libBatchMode) {
          // 批次模式：點卡 = 切換選取，不開文件
          _toggleLibSelect(d.id, card);
          return;
        }
        if (e.target.closest(".doc-card__checkbox")) return;
        // Phase5-C：從 library 點進 doc → 記住搜尋狀態供「← 返回搜尋結果」用
        _recordSearchReturn("library");
        openDocView(d.id);
      });
      frag.appendChild(card);
    });
    grid.appendChild(frag);
  }

  // ===== 知識庫文件批次操作（§10.4 + 745 + D52 §10.4.1）=====
  function _libGrid() {
    const page = document.querySelector('main.page[data-page="library"]');
    return page ? page.querySelector("#lib-grid, .lib-grid") : null;
  }

  function _setLibBatchMode(on) {
    _libBatchMode = on;
    _libSelected.clear();
    const grid = _libGrid();
    if (grid) {
      grid.classList.toggle("is-batch", on);
      grid.querySelectorAll(".doc-card.is-selected").forEach((c) => c.classList.remove("is-selected"));
    }
    const bar = document.getElementById("batch-bar");
    if (bar) bar.classList.toggle("is-active", on);
    const trig = document.getElementById("btn-batch-toggle");
    if (trig) trig.classList.toggle("is-active", on);
    _updateLibBatchCount();
  }

  function _toggleLibSelect(id, card) {
    if (_libSelected.has(id)) { _libSelected.delete(id); card.classList.remove("is-selected"); }
    else { _libSelected.add(id); card.classList.add("is-selected"); }
    _updateLibBatchCount();
  }

  function _updateLibBatchCount() {
    const bar = document.getElementById("batch-bar");
    if (!bar) return;
    const cnt = bar.querySelector(".batch-bar__count");
    if (cnt) cnt.textContent = `已選 ${_libSelected.size} 篇`;
    // ⑩#8：「全選 24 篇」的 24 原本寫死 → 改成目前 grid 實際筆數
    const grid = _libGrid();
    const total = grid ? grid.querySelectorAll(".doc-card[data-doc-id]").length : 0;
    const allBtn = Array.from(bar.querySelectorAll("button")).find((b) => (b.textContent || "").includes("全選"));
    if (allBtn) allBtn.textContent = Pure.selectAllLabel(total);
  }

  function _selectedIds() { return Array.from(_libSelected); }

  // 批次改可見度（改為部門內部 / 改為公開）
  async function _libBulkVisibility(visibility) {
    const ids = _selectedIds();
    if (!ids.length) { toast("請先選取文件", "error"); return; }
    const isPublic = visibility === "public";
    const label = isPublic ? "改為公開" : "改為部門內部";
    const doReq = (pw) => api("/api/documents/bulk/visibility", {
      method: "POST",
      body: JSON.stringify({ ids, visibility, step_up_password: pw || undefined }),
    });
    if (isPublic) {
      // 改公開：一律 step-up 密碼（§10.4 裁決）
      await stepUpPrompt(
        { title: `批次${label}（${ids.length} 篇）`,
          desc: "改為公開＝擴大受眾，需密碼確認。", submitText: "確認改為公開" },
        async (pw) => {
          const r = await doReq(pw);
          const j = await r.json().catch(() => ({}));
          if (!r.ok) return errMsg(j, "批次操作失敗");
          _afterBulk(`已將 ${j.count} 篇改為公開`, j);
          return null;
        });
      return;
    }
    // 改為部門內部：先試免密；若後端要求 step-up（有文件屬擴大）→ 跳密碼框
    const r = await doReq();
    const j = await r.json().catch(() => ({}));
    if (r.ok) { _afterBulk(`已將 ${j.count} 篇改為部門內部`, j); return; }
    if (r.status === 403 && j.detail && j.detail.error === "step_up_required") {
      await stepUpPrompt(
        { title: `批次${label}（${ids.length} 篇）`,
          desc: "部分文件屬擴大受眾，需密碼確認。", submitText: "確認" },
        async (pw) => {
          const r2 = await doReq(pw);
          const j2 = await r2.json().catch(() => ({}));
          if (!r2.ok) return errMsg(j2, "批次操作失敗");
          _afterBulk(`已將 ${j2.count} 篇改為部門內部`, j2);
          return null;
        });
      return;
    }
    toast(errMsg(j, "批次操作失敗"), "error");
  }

  // 批次軟刪除（§10.4：一律 step-up）
  async function _libBulkDelete() {
    const ids = _selectedIds();
    if (!ids.length) { toast("請先選取文件", "error"); return; }
    await stepUpPrompt(
      { title: `批次軟刪除（${ids.length} 篇）`,
        desc: "刪除後文件移至垃圾桶，可還原。需密碼確認。", submitText: "確認刪除" },
      async (pw) => {
        const r = await api("/api/documents/bulk/delete", {
          method: "POST", body: JSON.stringify({ ids, step_up_password: pw }),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) return errMsg(j, "批次刪除失敗");
        _afterBulk(`已刪除 ${j.count} 篇`, j);
        return null;
      });
  }

  // 批次完成後：提示跳過項 + 退出批次模式 + 重載
  function _afterBulk(okMsg, j) {
    const skipped = (j && j.skipped) || [];
    if (skipped.length) toast(`${okMsg}（${skipped.length} 篇因權限/不存在略過）`, "ok");
    else toast(okMsg, "ok");
    _setLibBatchMode(false);
    if (typeof loadLibrary === "function") loadLibrary();
  }

  // 在 wireLibrary 內呼叫：綁批次入口 + batch-bar 動作鈕（事件委派，survive re-render）
  function _wireLibBatch(page) {
    // Pattern 01：mockup 的 toggleBatch() 會搶綁；clone+replace 入口鈕剝掉 mockup listener，
    // 並移除 batch-bar 內 inline onclick="toggleBatch()"，由本模組完全接管狀態。
    let trig = document.getElementById("btn-batch-toggle");
    if (trig && !trig.dataset.kbv5) {
      const clone = trig.cloneNode(true);
      trig.parentNode.replaceChild(clone, trig);
      trig = clone;
      trig.dataset.kbv5 = "1";
      trig.addEventListener("click", () => _setLibBatchMode(!_libBatchMode));
    }
    const bar = document.getElementById("batch-bar");
    if (bar && !bar.dataset.kbv5) {
      bar.dataset.kbv5 = "1";
      bar.querySelectorAll("button[onclick]").forEach((b) => b.removeAttribute("onclick"));
      bar.addEventListener("click", (e) => {
        const btn = e.target.closest("button");
        if (!btn) return;
        const txt = (btn.textContent || "").trim();
        if (txt.includes("全選")) {
          const grid = _libGrid();
          grid && grid.querySelectorAll(".doc-card[data-doc-id]").forEach((c) => {
            const id = parseInt(c.dataset.docId, 10);
            if (!_libSelected.has(id)) { _libSelected.add(id); c.classList.add("is-selected"); }
          });
          _updateLibBatchCount();
        } else if (txt.includes("清除選取")) {
          _libSelected.clear();
          const grid = _libGrid();
          grid && grid.querySelectorAll(".doc-card.is-selected").forEach((c) => c.classList.remove("is-selected"));
          _updateLibBatchCount();
        } else if (txt.includes("改為部門內部")) {
          _libBulkVisibility("department");
        } else if (txt.includes("改為公開")) {
          _libBulkVisibility("public");
        } else if (txt.includes("軟刪除")) {
          _libBulkDelete();
        } else if (txt.includes("退出批次")) {
          _setLibBatchMode(false);
        }
      });
    }
  }

  // Phase5-C：搜尋返回機制 — 記住來源頁 + 狀態
  function _recordSearchReturn(type) {
    if (type === "library") {
      const libPage = document.querySelector('main.page[data-page="library"]');
      const searchInput = libPage?.querySelector(".lib-toolbar .search-box input");
      const selects = libPage?.querySelectorAll(".lib-toolbar select");
      const statusSel = libPage?.querySelector("[data-kbv5-status]");
      NS._searchReturn = {
        type: "library",
        query: searchInput?.value || "",
        tags: Array.from(_libActiveTags),
        vis: selects && selects[0] ? selects[0].value : "",     // 可見度篩選
        sort: selects && selects[1] ? selects[1].value : "",    // 排序
        status: statusSel ? statusSel.value : "",               // 狀態
      };
    } else if (type === "advanced") {
      NS._searchReturn = {
        type: "advanced",
        body: NS._advLastQuery || null,
      };
    }
  }

  // Phase5-C：執行返回 — 切回原頁面 + 重新套用搜尋
  function _executeSearchReturn() {
    const ret = NS._searchReturn;
    if (!ret) return;
    NS._searchReturn = null;
    if (ret.type === "library") {
      // 用 _topbarSearchQ 機制讓 library 不被 reset
      NS._topbarSearchQ = ret.query || " ";   // 空 query 用空格佔位避免清狀態
      // 恢復 active tags
      _libActiveTags.clear();
      (ret.tags || []).forEach((t) => _libActiveTags.add(t));
      window.switchPage("library");
      // 還原搜尋框 + 可見度/排序/狀態篩選，再重新套用
      setTimeout(() => {
        const libPage = document.querySelector('main.page[data-page="library"]');
        const searchInput = libPage?.querySelector(".lib-toolbar .search-box input");
        if (searchInput) searchInput.value = ret.query || "";
        const selects = libPage?.querySelectorAll(".lib-toolbar select");
        if (selects && selects[0] && ret.vis) selects[0].value = ret.vis;
        if (selects && selects[1] && ret.sort) selects[1].value = ret.sort;
        const statusSel = libPage?.querySelector("[data-kbv5-status]");
        if (statusSel && ret.status) statusSel.value = ret.status;
        if (typeof loadLibrary === "function") loadLibrary(ret.query || "");
      }, 80);
    } else if (ret.type === "advanced") {
      window.switchPage("advanced-search");
      // 等 reset 跑完再套用上次查詢並執行
      setTimeout(() => {
        const page = document.querySelector('main.page[data-page="advanced-search"]');
        if (page && ret.body) {
          _advApplyQuery(page, ret.body);
          _advExecuteSearch(page);
          _advCollapseForm(page, true);
        }
      }, 150);
    }
  }
  NS._executeSearchReturn = _executeSearchReturn;

  // ===== View 檢視頁 =====
  async function openDocView(docId) {
    let r;
    try {
      r = await api(`/api/documents/${docId}`);
    } catch (e) {
      toast("網路連線失敗，無法開啟文件", "error");
      return;
    }
    if (!r.ok) {
      toast(errMsg(await r.json().catch(() => ({})), "無法開啟文件"), "error");
      return;
    }
    const doc = await r.json();
    const page = document.querySelector('main.page[data-page="view"]');
    if (!page) return;

    // Phase5-C：「← 返回搜尋結果」按鈕（從搜尋進來時顯示，否則隱藏）
    page.querySelectorAll("[data-kbv5-search-return]").forEach((n) => n.remove());
    if (NS._searchReturn) {
      const backBtn = document.createElement("button");
      backBtn.dataset.kbv5SearchReturn = "1";
      backBtn.style.cssText = "margin:0 0 12px;padding:6px 14px;border:1px solid #cbd5e1;background:#fff;color:#0b1f33;border-radius:6px;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:6px;";
      backBtn.innerHTML = "← 返回";   // 文字統一；返回邏輯依來源（library/搜尋）不同
      backBtn.addEventListener("click", () => _executeSearchReturn());
      const main = page.querySelector(".doc-main") || page.firstElementChild;
      if (main) main.insertBefore(backBtn, main.firstChild);
    }

    // 標題
    const h1 = page.querySelector(".doc-main__header h1");
    if (h1) h1.textContent = doc.title;
    // breadcrumb（知識庫 › 部門 › 分類）
    const bc = page.querySelector(".doc-main__breadcrumb");
    if (bc) {
      bc.innerHTML =
        `<a data-kbv5-lib>知識庫</a><span>›</span><a>${escapeHtml(doc.owner_department || "")}</a>` +
        `<span>›</span><a>${escapeHtml(doc.category || "")}</a>`;
      const libLink = bc.querySelector("[data-kbv5-lib]");
      if (libLink) { libLink.style.cursor = "pointer"; libLink.onclick = () => window.switchPage("library"); }
    }
    // meta
    const meta = page.querySelector(".doc-main__meta");
    if (meta) {
      const vis = VIS_BADGE[doc.visibility] || VIS_BADGE.department;
      meta.innerHTML =
        `<span class="vis-badge ${vis.cls}">${vis.label}</span>` +
        `<span>${escapeHtml(doc.owner_department || "")}</span><span>·</span>` +
        `<span>${reviewTimeLabel(doc.updated_at)}更新</span><span>·</span>` +
        `<span>共 ${doc.view_count || 0} 次瀏覽</span><span>·</span>` +
        `<button class="kbv5-fav-star" title="收藏" style="border:0;background:transparent;cursor:pointer;font-size:17px;line-height:1;color:#cbd5e1;padding:0 2px;">☆</button>`;
      const star = meta.querySelector(".kbv5-fav-star");
      if (star) {
        star.addEventListener("click", () => _toggleDocBookmark(doc.id, star));
        api("/api/bookmarks/ids").then((rr) => rr.ok && rr.json()).then((ids) => {
          if (Array.isArray(ids) && ids.includes(doc.id)) { star.textContent = "★"; star.style.color = "#f59e0b"; }
        }).catch(() => {});
      }
    }
    // 內文（minimal markdown 渲染）；MD 為事實來源，檔案遺失時明確提示（不顯示 DB 快取）
    const content = page.querySelector(".doc-content");
    if (content) {
      content.innerHTML = doc.vault_missing
        ? '<div style="padding:20px;border:1px solid #fecaca;background:#fef2f2;border-radius:8px;color:#991b1b;">' +
          "⚠ 此文件的內容檔（vault .md）遺失或被刪除。<br>內容以 vault Markdown 為事實來源；" +
          "可由管理者執行 <code>scripts/export_vault.py</code>（由 DB 重建）或 <code>reconcile.py</code> 後恢復。</div>"
        : renderMarkdown(doc.body || "");
    }

    // canEdit 提前計算（同時給 if(side) 內 button wire 與外面 injectFreshnessBanner 用）
    const _role = (Auth.user && Auth.user.role) || "user";
    const _myDepts = new Set([
      (Auth.user && Auth.user.department) || "",
      ...((Auth.user && Auth.user.secondary_departments) || []),
    ].filter(Boolean));
    const canEdit = _role === "admin" || _role === "senior_manager" ||
      (_role === "manager" && _myDepts.has(doc.owner_department));

    // 隱藏「分享」鈕：mockup onclick=openDocShareModal 開假 modal、app.js 未實作；
    // 修改分享權限不在系統範圍（禁止操作）→ 移除這個誤導的死按鈕。
    page.querySelectorAll('[onclick*="openDocShareModal"]').forEach((b) => { b.style.display = "none"; });

    // ===== 側欄：填真實元資料 / 標籤，隱藏未建置區塊 =====
    const side = page.querySelector(".doc-side");
    if (side) {
      const blocks = side.querySelectorAll(".doc-side__block");
      blocks.forEach((blk) => {
        const t = (blk.querySelector(".doc-side__title")?.textContent || "").trim();
        if (t === "元資料") {
          const wc = (doc.body || "").replace(/\s/g, "").length;
          blk.querySelectorAll(".doc-side__row").forEach((row) => {
            const k = (row.querySelector("span")?.textContent || "").trim();
            const valEl = row.querySelectorAll("span")[1];
            if (!valEl) return;
            if (k === "文件 ID") valEl.textContent = "DOC-" + String(doc.id).padStart(5, "0");
            else if (k === "建立") valEl.textContent = _localDate(doc.created_at);
            else if (k === "更新") valEl.textContent = reviewTimeLabel(doc.updated_at);
            else if (k === "版本") valEl.textContent = "v1";  // 版本系統 L11
            else if (k === "字數") valEl.textContent = wc.toLocaleString();
            else if (k === "瀏覽") valEl.textContent = (doc.view_count || 0) + " 次";
          });
        } else if (t === "標籤") {
          const wrap = blk.querySelector("div[style]");
          if (wrap) {
            wrap.innerHTML = (doc.tags || []).length
              ? doc.tags.map((tg) => `<span class="tag-pill">${escapeHtml(tg)}</span>`).join("")
              : '<span style="color:var(--text-3);font-size:12px;">無標籤</span>';
          }
        } else if (t === "版本歷史") {
          // 版本系統屬 L11 → 暫顯示僅當前版本，標註
          blk.querySelectorAll(".version-item").forEach((v, i) => {
            if (i === 0) {
              const title = v.querySelector(".version-item__title");
              const meta = v.querySelector(".version-item__meta");
              if (title) title.textContent = "v1 · 目前版本";
              if (meta) meta.textContent = reviewTimeLabel(doc.updated_at);
            } else {
              v.style.display = "none";  // 隱藏 mock 的 v2/v3
            }
          });
        }
      });
      // 操作鈕：攔截尚未實作的（avoid mock modal）— canEdit 在上方已宣告
      side.querySelectorAll(".doc-side__action").forEach((btn) => {
        const txt = (btn.textContent || "").trim();
        if (txt.includes("版本歷史")) {
          // 移除 data-page 屬性避免 mockup 全域 listener 攪局；後綴 (N) 用真實 history 計數
          btn.removeAttribute("data-page");
          btn.style.cursor = "pointer";
          // 更新顯示「版本歷史」（去掉 mockup 寫死的「(3)」），等 history API 回來再補 N
          const iconSvg = btn.querySelector("svg");
          btn.innerHTML = (iconSvg ? iconSvg.outerHTML : "") + " 版本歷史";
          api(`/api/documents/${doc.id}/history`).then((r) => r.ok && r.json()).then((j) => {
            if (j && Array.isArray(j.versions)) {
              btn.innerHTML = (iconSvg ? iconSvg.outerHTML : "") + ` 版本歷史（${j.versions.length}）`;
            }
          }).catch(() => {});
          btn.onclick = (e) => { e.preventDefault(); e.stopPropagation();
            console.info("[KBV5] openVersionsPage clicked", doc.id);
            openVersionsPage(doc); };
          return;
        }
        if (txt.includes("編輯")) {
          // §12.12：跳 mockup #edit 頁
          if (!canEdit) { btn.style.display = "none"; return; }
          // 移除 data-page 屬性，避免 mockup 全域 [data-page] listener 重複觸發 switchPage("edit")
          btn.removeAttribute("data-page");
          btn.style.cursor = "pointer";
          btn.onclick = (e) => { e.preventDefault(); e.stopPropagation();
            console.info("[KBV5] openEditPage clicked", doc.id, doc.title);
            openEditPage(doc); };
        } else if (txt.includes("分享")) {
          btn.onclick = (e) => { e.preventDefault(); e.stopPropagation();
            toast("分享連結功能於 L7 實作", "info"); };
        } else if (txt.includes("可見度")) {
          // 一般使用者不可改可見度（後端 _can_change_visibility 亦強制）→ 直接隱藏按鈕
          const canVis = ["admin", "senior_manager", "manager"].includes((Auth.user && Auth.user.role) || "user");
          if (!canVis) { btn.style.display = "none"; }
          else { btn.onclick = (e) => { e.preventDefault(); e.stopPropagation();
            openVisibilityDialog(doc); }; }
        } else if (txt.includes("刪除")) {
          // §7.7：軟刪除權限與編輯相同（admin/senior/manager 本部門）
          if (!canEdit) { btn.style.display = "none"; }
          else {
            btn.onclick = (e) => { e.preventDefault(); e.stopPropagation();
              openSoftDeleteDialog(doc); };
          }
        }
      });
      // 分享按鈕（覆寫成真功能）
      const shareBtn = Array.from(side.querySelectorAll(".doc-side__action"))
        .find((b) => (b.textContent || "").includes("分享"));
      if (shareBtn) {
        shareBtn.onclick = (e) => { e.preventDefault(); e.stopPropagation();
          openShareDialog(doc); };
      }
      renderRelatedBlock(side, doc);  // §41.3.1 相關文件 + 所屬 MOC（注入式，mockup 無此卡）
      // §45.4 引用計數區塊（注入；mockup 無）
      renderReferrersBlock(side, doc);
      renderAttachmentsBlock(side, doc, canEdit);   // §12.19 附件清單 + 上傳
      // §45.1 歸檔 / 取消歸檔按鈕（注入到操作區）
      injectArchiveButton(side, doc, canEdit);
      // §50.3.4 訂閱此文件 / 此 MOC（任何登入使用者皆可訂閱）
      injectSubscribeButton(side, doc);
      // §50.3.3 有用按鈕 + 瀏覽/有用計數
      injectHelpfulButton(side, doc);
      // §50.3.2 報告錯誤按鈕 + 待處理錯誤報告 badge
      injectReportErrorButton(side, doc);
    }
    // §45.1 archived 徽章 + §45.2 鮮度提示 banner
    injectArchivedBadge(page, doc);
    injectFreshnessBanner(page, doc, canEdit);

    // Phase5-D §19.8 評論系統綁線（取代原本隱藏 mock）
    const comments = page.querySelector("#doc-comments, .comments-block");
    if (comments) {
      comments.style.display = "";
      _wireCommentsSection(comments, doc);
    }

    window.switchPage("view");
  }

  // ============ Phase5-D §19.8 評論系統前端 ============
  let _commentSort = "newest";   // newest / oldest / hottest

  async function _wireCommentsSection(section, doc) {
    // 清掉 mockup 寫死的 thread mock + Pattern 01：clone-replace 排序按鈕清舊綁定
    section.querySelectorAll(".comment-thread").forEach((n) => n.remove());
    section.querySelectorAll(".comments-block__sort button").forEach((b) => {
      const c = b.cloneNode(true);
      b.parentNode.replaceChild(c, b);
      c.addEventListener("click", () => {
        section.querySelectorAll(".comments-block__sort button").forEach((x) => x.classList.remove("is-active"));
        c.classList.add("is-active");
        const txt = (c.textContent || "").trim();
        _commentSort = txt.includes("最早") ? "oldest"
          : txt.includes("最熱門") ? "hottest" : "newest";
        _renderComments(section, doc);
      });
    });

    // composer 綁線（取代寫死 mock 假姓名）
    const composer = section.querySelector(".comment-composer");
    if (composer) {
      // 設我的 avatar
      const avatar = composer.querySelector(".avatar");
      const me = Auth.user || {};
      if (avatar) {
        avatar.textContent = (me.display_name || me.username || "?").slice(0, 1);
      }
      // 找送出 / 取消按鈕
      const btns = composer.querySelectorAll(".comment-composer__toolbar button");
      const cancelBtn = Array.from(btns).find((b) => (b.textContent || "").includes("取消"));
      const sendBtn = Array.from(btns).find((b) => (b.textContent || "").includes("發表"));
      const ta = composer.querySelector(".comment-composer__textarea");
      if (cancelBtn && ta) {
        const c = cancelBtn.cloneNode(true);
        cancelBtn.parentNode.replaceChild(c, cancelBtn);
        c.addEventListener("click", () => { ta.value = ""; });
      }
      if (sendBtn && ta) {
        const c = sendBtn.cloneNode(true);
        sendBtn.parentNode.replaceChild(c, sendBtn);
        c.addEventListener("click", async () => {
          const body = (ta.value || "").trim();
          if (!body) { toast("請輸入留言", "error"); return; }
          c.disabled = true;
          try {
            const r = await api(`/api/comments/${doc.id}`, {
              method: "POST", body: JSON.stringify({ body }),
            });
            const j = await r.json().catch(() => ({}));
            if (!r.ok) {
              const d = j.detail || {};
              if (d.error === "pii_detected") toast(d.describe || "PII 命中", "error");
              else toast(errMsg(j, "發送失敗"), "error");
              return;
            }
            ta.value = "";
            toast("已發表評論", "ok");
            _renderComments(section, doc);
          } finally { c.disabled = false; }
        });
      }
    }

    await _renderComments(section, doc);
  }

  async function _renderComments(section, doc) {
    let r;
    try {
      r = await api(`/api/comments/${doc.id}`);
    } catch (e) {
      return;   // 評論載入失敗不阻斷文件閱讀（全域安全網會提示網路異常）
    }
    if (!r.ok) return;
    const j = await r.json();
    const items = j.items || [];

    // 排序（top-level 按 sort，回覆永遠按時間）
    const tops = items.filter((c) => !c.parent_id);
    const repliesBy = {};
    items.filter((c) => c.parent_id).forEach((c) => {
      (repliesBy[c.parent_id] = repliesBy[c.parent_id] || []).push(c);
    });
    Object.values(repliesBy).forEach((arr) => arr.sort((a, b) => a.id - b.id));
    if (_commentSort === "oldest") tops.sort((a, b) => a.id - b.id);
    else if (_commentSort === "hottest") tops.sort((a, b) => (b.like_count - a.like_count) || (b.id - a.id));
    else tops.sort((a, b) => b.id - a.id);   // newest

    // 更新標頭計數
    const countEl = section.querySelector(".comments-block__count");
    if (countEl) countEl.textContent = `${j.total} 則 · ${j.replies} 回覆`;

    // 移除舊渲染 thread
    section.querySelectorAll("[data-kbv5-comment-thread]").forEach((n) => n.remove());

    // 渲染 thread
    const composerEl = section.querySelector(".comment-composer");
    const frag = document.createDocumentFragment();
    tops.forEach((c) => {
      const thread = _renderCommentThread(c, repliesBy[c.id] || [], doc);
      frag.appendChild(thread);
    });
    // composer 之後接 threads
    if (composerEl && composerEl.parentNode) {
      composerEl.parentNode.insertBefore(frag, composerEl.nextSibling);
    } else {
      section.appendChild(frag);
    }
  }

  function _renderCommentThread(c, replies, doc) {
    const wrap = document.createElement("div");
    wrap.className = "comment-thread";
    wrap.dataset.kbv5CommentThread = "1";
    wrap.appendChild(_renderCommentNode(c, doc, false));
    if (replies.length) {
      const repliesWrap = document.createElement("div");
      repliesWrap.className = "comment-replies";
      replies.forEach((rc) => repliesWrap.appendChild(_renderCommentNode(rc, doc, true)));
      wrap.appendChild(repliesWrap);
    }
    return wrap;
  }

  function _renderCommentNode(c, doc, isReply) {
    const node = document.createElement("div");
    node.className = "comment" + (isReply ? " comment--reply" : "");
    node.dataset.commentId = c.id;
    const me = Auth.user || {};
    // 顯示名稱：後端 author_display_name → username → 退回 #id（原本一律顯示「#id」）
    const authorName = Pure.commentAuthorName(c);
    const initial = (c.author_id === me.id
      ? (me.display_name || me.username || authorName)
      : authorName).slice(0, 1);
    const avatarStyle = isReply ? "width:26px;height:26px;font-size:11px;" : "";
    const text = c.is_deleted
      ? `<div class="comment__text" style="color:#94a3b8;font-style:italic;">${escapeHtml(c.body)}</div>`
      : `<div class="comment__text">${_renderCommentBody(c.body, c.mentions || [])}</div>`;
    const actions = c.is_deleted ? "" : `
      <div class="comment__actions">
        <button data-act="like" class="${c.liked_by_me ? "is-liked" : ""}">👍 ${c.like_count || 0}</button>
        ${!isReply ? '<button data-act="reply">回覆</button>' : ''}
        ${c.can_edit ? '<button data-act="edit">編輯</button>' : ''}
        ${c.can_delete ? '<button data-act="del">刪除</button>' : ''}
      </div>`;

    node.innerHTML = `
      <div class="comment__avatar" style="${avatarStyle}background:linear-gradient(135deg,#0891b2,#0e7490);">${escapeHtml(initial)}</div>
      <div class="comment__body">
        <div class="comment__head">
          <span class="comment__name">${c.is_deleted ? "—" : escapeHtml(authorName)}</span>
          <span class="comment__time">${reviewTimeLabel(c.created_at)}</span>
          ${c.edited_at ? '<span class="comment__edit-mark">(已編輯)</span>' : ''}
        </div>
        ${text}
        ${actions}
      </div>`;

    // wire actions
    node.querySelectorAll(".comment__actions button").forEach((b) => {
      b.addEventListener("click", () => _handleCommentAction(b.dataset.act, c, doc, node));
    });
    return node;
  }

  function _renderCommentBody(body, mentions) {
    // 把 @username 高亮（不論是否在 mentions 表內都做樣式）
    let html = escapeHtml(body);
    html = html.replace(/@([a-zA-Z][a-zA-Z0-9._-]{1,29})/g,
      (_m, u) => `<span class="mention">@${u}</span>`);
    return html.replace(/\n/g, "<br>");
  }

  async function _handleCommentAction(act, c, doc, node) {
    const section = node.closest(".comments-block");
    if (act === "like") {
      const r = await api(`/api/comments/${doc.id}/${c.id}/like`, { method: "POST" });
      if (r.ok) {
        const j = await r.json();
        const btn = node.querySelector("[data-act='like']");
        if (btn) {
          btn.textContent = `👍 ${j.like_count}`;
          btn.classList.toggle("is-liked", j.liked_by_me);
        }
      }
      return;
    }
    if (act === "del") {
      if (!confirm("確定刪除此評論？刪除後會保留 placeholder。")) return;
      const r = await api(`/api/comments/${doc.id}/${c.id}`, { method: "DELETE" });
      if (r.ok) { toast("已刪除", "ok"); _renderComments(section, doc); }
      return;
    }
    if (act === "edit") {
      const newBody = prompt("編輯評論：", c.body);
      if (!newBody || newBody.trim() === c.body.trim()) return;
      const r = await api(`/api/comments/${doc.id}/${c.id}`, {
        method: "PUT", body: JSON.stringify({ body: newBody.trim() }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) {
        toast(errMsg(j, "編輯失敗"), "error");
        return;
      }
      toast("已更新", "ok"); _renderComments(section, doc);
      return;
    }
    if (act === "reply") {
      const body = prompt(`回覆 #${c.id}：`);
      if (!body || !body.trim()) return;
      const r = await api(`/api/comments/${doc.id}`, {
        method: "POST",
        body: JSON.stringify({ body: body.trim(), parent_id: c.id }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) {
        toast(errMsg(j, "回覆失敗"), "error");
        return;
      }
      toast("已回覆", "ok"); _renderComments(section, doc);
    }
  }

  // §50.3.4 注入「📌 訂閱此文件 / 取消訂閱」按鈕到 doc-side 操作區
  // 訂閱類型：若文件 up_moc_id == 自己 id（MOC 文件）→ target_type=moc 訂閱 MOC；
  // 否則 → target_type=tag 訂閱該文件的第一個標籤（簡化版；複雜訂閱去 /account）
  // §50.3.3 有用按鈕 + 統計（注入操作區）
  async function injectHelpfulButton(side, doc) {
    side.querySelectorAll("[data-kbv5-helpful]").forEach((n) => n.remove());
    const opBlock = Array.from(side.querySelectorAll(".doc-side__block"))
      .find((b) => (b.querySelector(".doc-side__title")?.textContent || "").trim() === "操作");
    if (!opBlock) return;
    let st = { helpful: false, count: 0, view_count: 0 };
    try {
      const r = await api(`/api/documents/${doc.id}/helpful`);
      if (r.ok) st = await r.json();
    } catch (_e) {}
    const wrap = document.createElement("div");
    wrap.dataset.kbv5Helpful = "1";
    wrap.style.cssText = "margin-top:8px;";
    const btn = document.createElement("button");
    btn.className = "doc-side__action";
    btn.style.cursor = "pointer";
    const render = () => {
      btn.innerHTML = (st.helpful ? "👍 已標示有用" : "👍 覺得有用") +
        (st.count ? ` (${st.count})` : "");
      btn.style.color = st.helpful ? "var(--accent)" : "";
    };
    render();
    btn.onclick = async (e) => {
      e.preventDefault(); e.stopPropagation();
      const r = await api(`/api/documents/${doc.id}/helpful`, { method: "POST" });
      if (r.ok) { const j = await r.json(); st.helpful = j.helpful; st.count = j.count; render(); }
    };
    wrap.appendChild(btn);
    const stat = document.createElement("div");
    stat.style.cssText = "font-size:11px;color:var(--text-3);margin-top:6px;text-align:center;";
    stat.textContent = `${st.view_count} 人看過 · ${st.count} 人覺得有用`;
    wrap.appendChild(stat);
    opBlock.appendChild(wrap);
  }

  // §50.3.2 報告錯誤按鈕（複用 feedback modal，category=document_error）+ 待處理 badge
  async function injectReportErrorButton(side, doc) {
    side.querySelectorAll("[data-kbv5-report-err]").forEach((n) => n.remove());
    const opBlock = Array.from(side.querySelectorAll(".doc-side__block"))
      .find((b) => (b.querySelector(".doc-side__title")?.textContent || "").trim() === "操作");
    if (!opBlock) return;
    const wrap = document.createElement("div");
    wrap.dataset.kbv5ReportErr = "1";
    wrap.style.cssText = "margin-top:8px;";
    const btn = document.createElement("button");
    btn.className = "doc-side__action";
    btn.style.cursor = "pointer";
    btn.innerHTML = "🚨 報告錯誤";
    btn.onclick = (e) => {
      e.preventDefault(); e.stopPropagation();
      openFeedbackModal({ category: "document_error", doc_id: doc.id });
    };
    wrap.appendChild(btn);
    opBlock.appendChild(wrap);
    // admin/owner 可見的待處理錯誤報告 badge
    try {
      const r = await api(`/api/feedback/document/${doc.id}/error-count`);
      if (r.ok) {
        const j = await r.json();
        if (j.visible && j.open_count > 0) {
          const badge = document.createElement("div");
          badge.style.cssText = "font-size:11px;color:var(--danger,#c0392b);margin-top:6px;text-align:center;";
          badge.textContent = `⚠️ 此文件有 ${j.open_count} 件待處理錯誤報告`;
          wrap.appendChild(badge);
        }
      }
    } catch (_e) {}
  }

  async function injectSubscribeButton(side, doc) {
    side.querySelectorAll("[data-kbv5-subscribe-btn]").forEach((n) => n.remove());
    const opBlock = Array.from(side.querySelectorAll(".doc-side__block"))
      .find((b) => (b.querySelector(".doc-side__title")?.textContent || "").trim() === "操作");
    if (!opBlock) return;

    // 決定訂閱 target
    let target_type, target_value, label_active, label_inactive;
    const isMoc = doc.id && doc.up_moc_id === doc.id;
    if (isMoc) {
      target_type = "moc";
      target_value = String(doc.id);
      label_active = "📌 已訂閱此 MOC";
      label_inactive = "📌 訂閱此 MOC";
    } else {
      // 訂閱該文件分類
      target_type = "category";
      target_value = doc.category || "";
      label_active = "📌 已訂閱此分類";
      label_inactive = "📌 訂閱此分類";
    }
    if (!target_value) return;   // 沒分類無法訂閱

    // 查當前是否已訂閱
    let existingId = null;
    try {
      const r = await api("/api/account/subscriptions");
      if (r.ok) {
        const j = await r.json();
        const hit = (j.items || []).find((s) =>
          s.target_type === target_type && s.target_value === target_value);
        if (hit) existingId = hit.id;
      }
    } catch (_e) {}

    const btn = document.createElement("button");
    btn.className = "doc-side__action";
    btn.dataset.kbv5SubscribeBtn = "1";
    btn.style.cursor = "pointer";
    btn.textContent = existingId ? label_active : label_inactive;
    btn.onclick = async (e) => {
      e.preventDefault(); e.stopPropagation();
      if (existingId) {
        const r = await api(`/api/account/subscriptions/${existingId}`, { method: "DELETE" });
        if (r.ok) { toast("已取消訂閱", "ok"); injectSubscribeButton(side, doc); }
        else toast("操作失敗", "error");
      } else {
        const r = await api("/api/account/subscriptions", {
          method: "POST",
          body: JSON.stringify({ target_type, target_value }),
        });
        if (r.ok) { toast("已訂閱，新核准文件會通知您", "ok"); injectSubscribeButton(side, doc); }
        else if (r.status === 409) toast("已訂閱此項目", "warn");
        else toast(errMsg(await r.json().catch(() => ({})), "操作失敗"), "error");
      }
    };
    opBlock.appendChild(btn);
  }

  // §45.1 注入「📦 歸檔」/「↶ 取消歸檔」按鈕到 doc-side 操作區
  function injectArchiveButton(side, doc, canEdit) {
    side.querySelectorAll("[data-kbv5-archive-btn]").forEach((n) => n.remove());
    if (!canEdit) return;
    // 找 .doc-side__block 含「操作」title 的那個
    const blocks = side.querySelectorAll(".doc-side__block");
    let opBlock = null;
    for (const b of blocks) {
      if ((b.querySelector(".doc-side__title")?.textContent || "").trim() === "操作") {
        opBlock = b; break;
      }
    }
    if (!opBlock) return;
    const btn = document.createElement("button");
    btn.className = "doc-side__action";
    btn.dataset.kbv5ArchiveBtn = "1";
    btn.style.cursor = "pointer";
    const isArchived = doc.status === "archived";
    btn.innerHTML =
      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">' +
      '<rect x="2" y="3" width="20" height="5" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><line x1="10" y1="12" x2="14" y2="12"/></svg>' +
      (isArchived ? " 取消封存" : " 封存");
    btn.onclick = (e) => { e.preventDefault(); e.stopPropagation();
      toggleArchive(doc, isArchived); };
    opBlock.appendChild(btn);
  }

  async function toggleArchive(doc, isCurrentlyArchived) {
    const path = isCurrentlyArchived ? "unarchive" : "archive";
    const r = await api(`/api/documents/${doc.id}/${path}`, { method: "POST" });
    if (!r.ok) {
      toast(errMsg(await r.json().catch(() => ({})), "操作失敗"), "error");
      return;
    }
    toast(isCurrentlyArchived ? "已取消封存" : "已封存（library 預設不顯示）", "ok");
    NS.openDocView(doc.id);
  }

  // §45.1 archived 灰底徽章
  function injectArchivedBadge(page, doc) {
    page.querySelectorAll("[data-kbv5-archived-badge]").forEach((n) => n.remove());
    if (doc.status !== "archived") return;
    const meta = page.querySelector(".doc-main__meta");
    if (!meta) return;
    const badge = document.createElement("span");
    badge.dataset.kbv5ArchivedBadge = "1";
    badge.style.cssText = "display:inline-block;padding:2px 10px;background:#e2e8f0;color:#475569;border-radius:10px;font-size:12px;font-weight:600;margin-left:8px;";
    badge.textContent = "📦 已封存";
    meta.insertBefore(badge, meta.firstChild);
  }

  // §45.2 鮮度 banner（僅有編輯權者看到）
  function injectFreshnessBanner(page, doc, canEdit) {
    page.querySelectorAll("[data-kbv5-freshness]").forEach((n) => n.remove());
    if (!canEdit || !doc.updated_at) return;
    const updated = new Date(doc.updated_at);
    if (isNaN(updated.getTime())) return;
    const monthsAgo = (Date.now() - updated.getTime()) / (1000 * 60 * 60 * 24 * 30);
    if (monthsAgo < 12) return;   // 12 個月內無提示
    const isRed = monthsAgo > 24;
    const banner = document.createElement("div");
    banner.dataset.kbv5Freshness = "1";
    banner.style.cssText = "padding:10px 14px;border-radius:6px;margin:12px 0;font-size:13px;display:flex;align-items:center;gap:8px;" +
      (isRed
        ? "background:#fef2f2;border:1px solid #fecaca;color:#991b1b;"
        : "background:#fef9c3;border:1px solid #fde68a;color:#854d0e;");
    const months = Math.round(monthsAgo);
    banner.innerHTML = isRed
      ? `<span>⛔</span><span>此文件最後更新於 ${months} 個月前，建議檢視或標記為已封存</span>`
      : `<span>⚠️</span><span>此文件最後更新於 ${months} 個月前，請評估是否仍有效</span>`;
    const content = page.querySelector(".doc-content");
    if (content && content.parentNode) content.parentNode.insertBefore(banner, content);
  }

  // §45.4 引用計數區塊（注入到 side 末端）
  async function renderReferrersBlock(side, doc) {
    side.querySelectorAll("[data-kbv5-refs-block]").forEach((n) => n.remove());
    try {
      const r = await api(`/api/documents/${doc.id}/referrers`);
      if (!r.ok) return;
      const j = await r.json();
      if (j.count === 0) return;   // 無引用則不顯示，避免雜訊
      const blk = document.createElement("div");
      blk.className = "doc-side__block";
      blk.dataset.kbv5RefsBlock = "1";
      const itemsHtml = j.items.map((it) => {
        if (it.can_access) {
          return `<div class="doc-side__row" style="display:block;"><a data-ref-doc="${it.id}" style="cursor:pointer;color:#2563eb;">${escapeHtml(it.title)}</a></div>`;
        }
        return `<div class="doc-side__row" style="display:block;"><span style="color:#94a3b8;cursor:not-allowed;">${escapeHtml(it.title)}（${escapeHtml(it.owner_department || "其他部門")}維護）</span></div>`;
      }).join("");
      blk.innerHTML = `<div class="doc-side__title">被引用 (${j.count})</div>${itemsHtml}`;
      side.appendChild(blk);
      blk.querySelectorAll("[data-ref-doc]").forEach((a) =>
        a.addEventListener("click", () => NS.openDocView(parseInt(a.dataset.refDoc, 10))));
    } catch (_e) { /* 安靜失敗 */ }
  }
  NS.openDocView = openDocView;

  // §12.19 文件附件區塊（注入到 side；mockup 無此 doc-side block，獨立 inject）
  async function renderAttachmentsBlock(side, doc, canEdit) {
    side.querySelectorAll("[data-kbv5-attach-block]").forEach((n) => n.remove());
    const blk = document.createElement("div");
    blk.className = "doc-side__block";
    blk.dataset.kbv5AttachBlock = "1";
    blk.innerHTML = '<div class="doc-side__title">📎 附件</div>'
      + '<div data-attach-list></div>'
      + (canEdit
        ? '<button data-attach-upload class="doc-side__action" style="cursor:pointer;margin-top:6px;">'
          + '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">'
          + '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> 上傳附件</button>'
          + '<input type="file" data-attach-input style="display:none;" />'
        : '');
    side.appendChild(blk);
    const listEl = blk.querySelector("[data-attach-list]");
    async function reload() {
      const r = await api(`/api/documents/${doc.id}/attachments`);
      if (!r.ok) { listEl.innerHTML = '<div style="color:#94a3b8;font-size:11px;">無法讀取附件</div>'; return; }
      const j = await r.json();
      if (j.count === 0) {
        listEl.innerHTML = '<div style="color:#94a3b8;font-size:11px;">尚無附件</div>';
        return;
      }
      const html = j.items.map((it) => {
        const sizeKB = Pure.fmtKB(it.size_bytes);
        const canDel = canEdit || it.uploaded_by === ((Auth.user && Auth.user.id) || -1);
        return `<div class="doc-side__row" data-attach-row="${it.id}" style="display:flex;align-items:center;gap:6px;">
          <a data-preview="${it.id}" data-mime="${escapeHtml(it.mime_type)}" data-name="${escapeHtml(it.filename)}" style="flex:1;cursor:pointer;color:#2563eb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escapeHtml(it.filename)}">${escapeHtml(it.filename)}</a>
          <span style="color:#94a3b8;font-size:10px;">${sizeKB}KB</span>
          ${canDel ? `<button data-del="${it.id}" style="border:0;background:transparent;color:#ef4444;cursor:pointer;font-size:14px;" title="刪除">×</button>` : ""}
        </div>`;
      }).join("");
      const usedKB = Pure.fmtKB(j.total_bytes);
      const quotaMB = Pure.fmtMB(j.quota_bytes, 0);
      listEl.innerHTML = html
        + `<div style="font-size:10px;color:#94a3b8;margin-top:6px;">${j.count} 個 · 已用 ${usedKB} KB / ${quotaMB} MB</div>`;
      listEl.querySelectorAll("[data-preview]").forEach((a) => {
        a.addEventListener("click", (e) => { e.preventDefault();
          openAttachmentPreview(doc.id, parseInt(a.dataset.preview, 10), a.dataset.mime, a.dataset.name); });
      });
      listEl.querySelectorAll("[data-del]").forEach((b) => {
        b.addEventListener("click", async () => {
          if (!confirm("確定刪除這個附件？")) return;
          const r = await api(`/api/documents/${doc.id}/attachments/${b.dataset.del}`, { method: "DELETE" });
          if (r.ok) { toast("已刪除", "ok"); reload(); }
          else toast(errMsg(await r.json().catch(() => ({})), "刪除失敗"), "error");
        });
      });
    }
    if (canEdit) {
      const upBtn = blk.querySelector("[data-attach-upload]");
      const fileInput = blk.querySelector("[data-attach-input]");
      upBtn.addEventListener("click", () => fileInput.click());
      fileInput.addEventListener("change", async () => {
        const f = fileInput.files && fileInput.files[0];
        if (!f) return;
        const url = `/api/documents/${doc.id}/attachments?filename=${encodeURIComponent(f.name)}`;
        const r = await fetch(url, {
          method: "POST",
          headers: { "Content-Type": f.type || "application/octet-stream",
                     "Authorization": "Bearer " + (Auth.access || "") },
          body: f,
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) {
          const d = j.detail || {};
          const errMap = {
            empty_file: "檔案為空",
            file_too_large: `檔案過大（上限 ${Math.round((d.limit_bytes || 0) / 1024 / 1024)}MB，實際 ${Math.round((d.actual_bytes || 0) / 1024 / 1024)}MB）`,
            quota_exceeded: `本文件附件總量超過 ${Math.round((d.limit_bytes || 0) / 1024 / 1024)}MB 上限`,
            unsupported_mime: `不支援的檔案類型：${d.mime || "未知"}（僅允許 PDF / Office / 圖片 / zip / 文字）`,
            pii_detected: d.describe || "檔名含敏感資訊（PII）",
            forbidden: "無權限上傳此文件的附件",
            not_found: "文件不存在或已被刪除",
            write_failed: "儲存失敗，請稍後再試",
          };
          toast(errMap[d.error] || d.describe || d.error || `上傳失敗（HTTP ${r.status}）`, "error");
        } else {
          toast("上傳成功", "ok"); reload();
        }
        fileInput.value = "";
      });
    }
    reload();
  }

  // §12.19 附件預覽 modal（D97：inline，不下載）
  function openAttachmentPreview(docId, attachId, mime, filename) {
    const overlay = document.createElement("div");
    overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;";
    overlay.addEventListener("click", (e) => { if (e.target === overlay) overlay.remove(); });
    const url = `/api/documents/${docId}/attachments/${attachId}`;
    const isImg = mime && mime.startsWith("image/");
    const isVid = mime && mime.startsWith("video/");
    const isPdf = mime === "application/pdf";

    // 容器（用 wrapper div 而非 innerHTML 字串拼接，避免 querySelector 找錯按鈕）
    const container = document.createElement("div");
    container.style.cssText = "position:relative;display:flex;align-items:center;justify-content:center;";
    let mediaEl = null;
    if (isImg) {
      mediaEl = document.createElement("img");
      mediaEl.style.cssText = "max-width:90vw;max-height:80vh;object-fit:contain;background:#fff;border-radius:6px;";
      container.appendChild(mediaEl);
    } else if (isVid) {
      mediaEl = document.createElement("video");
      mediaEl.controls = true;
      mediaEl.autoplay = false;
      mediaEl.style.cssText = "max-width:90vw;max-height:85vh;background:#000;border-radius:6px;";
      container.appendChild(mediaEl);
    } else if (isPdf) {
      // 先放個 loading 文字，blob 載完才換 iframe（避免 about:blank 一閃）
      const loading = document.createElement("div");
      loading.textContent = "載入 PDF…";
      loading.style.cssText = "color:#fff;font-size:14px;padding:40px;";
      container.appendChild(loading);
      mediaEl = document.createElement("iframe");
      mediaEl.style.cssText = "width:90vw;height:85vh;border:0;background:#fff;border-radius:6px;display:none;";
      mediaEl.dataset.placeholder = "1";
      container.appendChild(mediaEl);
    } else {
      const info = document.createElement("div");
      info.style.cssText = "background:#fff;padding:30px;border-radius:8px;text-align:center;max-width:400px;";
      info.innerHTML = `<div style="font-size:14px;color:#475569;margin-bottom:12px;">📄 ${escapeHtml(filename)}</div>
        <div style="font-size:12px;color:#94a3b8;">此類型檔案 (${escapeHtml(mime)}) 無內建預覽器。<br>依 D97 鐵則，不提供下載。</div>`;
      container.appendChild(info);
    }
    const closeBtn = document.createElement("button");
    closeBtn.textContent = "×";
    closeBtn.title = "關閉";
    closeBtn.style.cssText = "position:fixed;top:20px;right:20px;background:rgba(255,255,255,.95);border:0;border-radius:50%;width:36px;height:36px;font-size:20px;cursor:pointer;z-index:1;";
    closeBtn.addEventListener("click", () => overlay.remove());
    overlay.appendChild(container);
    overlay.appendChild(closeBtn);
    document.body.appendChild(overlay);

    // Authorization header 不能用 src — fetch 拿 blob 改 src
    if (mediaEl) {
      fetch(url, { headers: { "Authorization": "Bearer " + (Auth.access || "") } })
        .then((r) => {
          if (!r.ok) throw new Error(`HTTP ${r.status}`);
          return r.blob();
        })
        .then((blob) => {
          const blobUrl = URL.createObjectURL(blob);
          mediaEl.src = blobUrl;
          mediaEl.style.display = "";   // PDF iframe 載入後顯示
          // 移除 loading 文字
          const loading = container.querySelector("div:not([data-placeholder])");
          if (loading) loading.remove();
        })
        .catch((e) => {
          container.innerHTML = `<div style="background:#fff;padding:30px;border-radius:8px;text-align:center;max-width:400px;">
            <div style="color:#ef4444;font-weight:600;">預覽失敗</div>
            <div style="color:#64748b;font-size:12px;margin-top:6px;">${escapeHtml(e.message)}</div>
            <div style="color:#94a3b8;font-size:11px;margin-top:12px;">（檔名：${escapeHtml(filename)}）</div>
          </div>`;
        });
    }
  }
  NS.openAttachmentPreview = openAttachmentPreview;

  // §7.5 / §12.12 編輯：跳 mockup #edit 頁（保留 doc id 給 wireEditPage 載入）
  function openEditPage(doc) {
    NS._editDocId = doc.id;
    window.switchPage("edit");
  }

  // §12.13 版本歷史：跳 mockup #versions 頁
  function openVersionsPage(doc) {
    NS._versionsDocId = doc.id;
    window.switchPage("versions");
  }

  // §12.12 編輯頁 wire（mockup #edit），首次活躍時載入；切回觸發重載
  function wireEditPage() {
    const page = document.querySelector('main.page[data-page="edit"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";
    const onShow = () => {
      if (!page.classList.contains("is-active")) return;
      if (NS._editDocId) loadEditPage(NS._editDocId);
      else _clearEditMock(page);   // 無 doc context → 清掉 mockup 假版本側欄（避免顯示假人名）
    };
    const obs = new MutationObserver(onShow);
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    onShow();
  }

  function _clearEditMock(page) {
    void page;
    // 編輯頁無 doc context 等於無意義，且整頁是 mockup 假資料（diff 假作者/狀態列/版本側欄）。
    // 正常只能從文件頁「編輯」進入（必帶 docId）→ 無 docId 時導回文件庫，假頁完全不顯示。
    if (typeof window.switchPage === "function") window.switchPage("library");
  }

  async function loadEditPage(docId) {
    const page = document.querySelector('main.page[data-page="edit"]');
    if (!page) return;
    console.info("[KBV5] loadEditPage for doc", docId);

    // ===== 先把所有寫死 mockup 文字清掉（避免 API 失敗仍殘留）=====
    page.querySelectorAll(".diff-field__label").forEach((el) => { el.textContent = ""; });
    const diffBarInit = page.querySelector("#diff-bar");
    if (diffBarInit) {
      const info = diffBarInit.querySelector(".diff-bar__info");
      if (info) info.innerHTML = "";
      const stats = diffBarInit.querySelector(".diff-stats");
      if (stats) stats.innerHTML = "";
      diffBarInit.style.display = "none";
    }
    // 立刻清左版本側欄 7 筆 mock、右雙欄 mock 內容（API 還沒回也先清）
    page.querySelectorAll(".version-side .version-item").forEach((el) => el.remove());
    const oldBodyEarly = page.querySelector(".diff-pane--old .diff-pane__body");
    const newBodyEarly = page.querySelector(".diff-pane--new .diff-pane__body");
    if (oldBodyEarly) oldBodyEarly.innerHTML = "";
    if (newBodyEarly) newBodyEarly.innerHTML = "";

    // ===== 載入 doc 與 history =====
    const [r, hr] = await Promise.all([
      api(`/api/documents/${docId}`),
      api(`/api/documents/${docId}/history`),
    ]);
    if (!r.ok) { toast(errMsg(await r.json().catch(() => ({})), "讀取失敗"), "error"); return; }
    const doc = await r.json();
    const histData = hr.ok ? await hr.json() : { versions: [] };
    // §7.5 樂觀鎖：記住此次載入時的版次（= 最大 history version，DESC 第一筆；無則 0），
    // 存檔時回送 base_version，期間若被他人改過 → 409。
    const _hv = histData.versions || [];
    NS._editBaseVersion = _hv.length ? _hv[0].version : 0;

    // ===== 頭部 =====
    const subTitle = page.querySelector(".page__title-group p");
    if (subTitle) {
      const visLabel = (VIS_BADGE[doc.visibility] || VIS_BADGE.department).label;
      subTitle.textContent = `${doc.title || ""} · ${visLabel}`;
    }
    // 用 data-kbv5-role 標記頂部 3 個按鈕的角色（第一次 wire 時依文字判定，
    // 後續 loadEditPage 不再受按鈕文字改變影響——避免跨文件 docId 污染 bug）
    const actBtns = page.querySelectorAll('.page__actions .btn');
    actBtns.forEach((b) => {
      if (!b.dataset.kbv5Role) {
        const t = (b.textContent || "").trim();
        if (t === "完整版本歷史") b.dataset.kbv5Role = "versions";
        else if (t === "儲存草稿") b.dataset.kbv5Role = "draft";
        else if (t === "送出審核") b.dataset.kbv5Role = "save";
      }
      const role = b.dataset.kbv5Role;
      if (role === "versions") {
        b.removeAttribute("data-page");      // 斷開 mockup 全域 listener
        b.onclick = (e) => { e.preventDefault(); e.stopPropagation();
          console.info("[KBV5] edit→versions", docId);
          NS._versionsDocId = docId; window.switchPage("versions"); };
      } else if (role === "draft") {
        b.style.display = "none";             // §7.3 YAGNI 延後獨立草稿
      } else if (role === "save") {
        b.textContent = "儲存";
        b.onclick = (e) => { e.preventDefault(); e.stopPropagation();
          console.info("[KBV5] doSaveEdit click", docId);
          doSaveEdit(docId); };
      }
    });

    // ===== status bar =====
    const sb = page.querySelector(".edit-status-bar");
    if (sb) {
      const meTxt = (Auth.user && (Auth.user.display_name || Auth.user.username)) || "（未知）";
      sb.innerHTML =
        '<span class="edit-status-bar__dot"></span>' +
        `<span>編輯模式 · 上次更新 ${escapeHtml(reviewTimeLabel(doc.updated_at))}</span>` +
        `<span style="margin-left:auto;color:var(--text-3);">編輯者：${escapeHtml(meTxt)}</span>`;
    }

    // ===== 左：版本側欄（清 mock + 填真）=====
    const side = page.querySelector("#version-side") || page.querySelector(".version-side");
    if (side) {
      // 清掉 mockup 寫死 7 筆 version-item
      side.querySelectorAll(".version-item").forEach((el) => el.remove());
      const hintEl = side.querySelector(".version-side__hint");
      const titleEl = side.querySelector(".version-side__title");
      if (titleEl && titleEl.querySelector(".btn--quiet")) titleEl.querySelector(".btn--quiet").style.display = "none";
      // 目前版本卡（is-current）— 顯示「最新版」，若 last_restored_from 有值則標示
      // 來源版次（§7.5）。這欄位由後端追蹤（restore 寫入、edit 清空），新舊資料行為一致。
      const fromVer = doc.last_restored_from;
      const currentLabel = fromVer ? `最新版（還原自 v${fromVer}）` : "最新版";
      const current = document.createElement("div");
      current.className = "version-item is-current";
      current.innerHTML =
        `<div class="version-item__head"><span>${escapeHtml(currentLabel)}</span>` +
          '<span class="version-item__tag version-item__tag--draft">編輯中</span></div>' +
        `<div class="version-item__meta">${escapeHtml(reviewTimeLabel(doc.updated_at))}</div>`;
      side.appendChild(current);
      // 歷史版本
      const versions = histData.versions || [];
      if (!versions.length) {
        const empty = document.createElement("div");
        empty.style.cssText = "padding:14px;color:var(--text-3);font-size:12px;";
        empty.textContent = "尚無歷史版本（編輯後會產生）";
        side.appendChild(empty);
      } else {
        versions.forEach((v) => {
          const el = document.createElement("div");
          el.className = "version-item";
          el.dataset.vhVer = String(v.version);
          el.innerHTML =
            `<div class="version-item__head"><span>v${v.version}</span></div>` +
            `<div class="version-item__meta">${escapeHtml(v.editor || "?")} · ${escapeHtml(reviewTimeLabel(v.edited_at))}</div>` +
            (v.change_note ? `<div class="version-item__summary">${escapeHtml(v.change_note)}</div>` : "");
          el.style.cursor = "pointer";
          el.addEventListener("click", () => enterCompareMode(docId, v.version));
          side.appendChild(el);
        });
      }
      if (hintEl) hintEl.textContent = versions.length
        ? "點任一版本進入「對照模式」，左為舊版、右為目前可編輯內容。"
        : "尚無歷史版本可對照；下方可直接修改內容並儲存。";
    }

    // ===== 對照狀態列（預設關閉）=====
    const diffBar = page.querySelector("#diff-bar");
    if (diffBar) diffBar.style.display = "none";

    // ===== 屬性區（標題 / 部門 / 可見度）=====
    // 標題：原 mockup 用 diff-field__same（不可改）→ 改為一般 input
    const layout = page.querySelector(".edit-layout");
    if (layout) {
      // 找第一個包含「標題」label 的 wrapper
      const labels = layout.querySelectorAll("label");
      labels.forEach((lb) => {
        const t = (lb.textContent || "").trim();
        if (t === "標題") {
          const wrap = lb.parentElement;
          const old = wrap.querySelector(".diff-field__same");
          if (old) {
            const inp = document.createElement("input");
            inp.id = "kbv5-edit-title";
            inp.value = doc.title || "";
            inp.style.cssText = "width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:14px;box-sizing:border-box;";
            old.replaceWith(inp);
          }
        }
      });
    }
    // 部門+可見度：用 mockup 既有 select；填入目前值並標記為「未改變」
    const deptSel = page.querySelector("#edit-department-select");
    if (deptSel) {
      // 清舊 options + 從 API 拉
      const opts = ["業務部", "研發部", "採購部", "管理部", "客服部"];
      try {
        const dr = await api("/api/auth/departments-public");
        if (dr.ok) {
          const arr = await dr.json();
          if (Array.isArray(arr) && arr.length) opts.splice(0, opts.length, ...arr.map((d) => d.name || d));
        }
      } catch (_e) { /* keep defaults */ }
      deptSel.innerHTML = opts.map((d) =>
        `<option value="${escapeHtml(d)}" ${d === doc.owner_department ? "selected" : ""}>${escapeHtml(d)}</option>`).join("");
      deptSel.classList.remove("is-changed");
      deptSel.dataset.original = doc.owner_department || "";
    }
    const visSel = page.querySelector("#edit-visibility-select");
    if (visSel) {
      // mockup 已有 5 個 option；只更新 selected
      Array.from(visSel.options).forEach((o) => { o.selected = (o.value === doc.visibility); });
      visSel.classList.remove("is-changed");
      visSel.dataset.original = doc.visibility || "";
      const badge = page.querySelector("#visibility-changed-badge");
      if (badge) badge.style.display = "none";
      visSel.onchange = () => {
        const changed = visSel.value !== visSel.dataset.original;
        visSel.classList.toggle("is-changed", changed);
        if (badge) badge.style.display = changed ? "" : "none";
      };
    }
    // 部門/可見度的 .diff-field__label（早先 textContent="" 清掉，現在填回有意義文字）
    const oldLbl = page.querySelector(".diff-field .diff-field__pane--old .diff-field__label");
    const newLbl = page.querySelector(".diff-field .diff-field__pane--new .diff-field__label");
    if (oldLbl) oldLbl.textContent = "現行";
    if (newLbl) newLbl.innerHTML = '編輯中 <span style="font-weight:400;opacity:0.7;">(可修改)</span>';

    // ===== 內容區雙欄（清 mock + 設可編輯）=====
    const grid = page.querySelector("#diff-grid");
    if (grid) {
      const oldPaneBody = grid.querySelector(".diff-pane--old .diff-pane__body");
      const newPaneBody = grid.querySelector(".diff-pane--new .diff-pane__body");
      const oldPaneHdr = grid.querySelector(".diff-pane--old .diff-pane__header");
      const newPaneHdr = grid.querySelector(".diff-pane--new .diff-pane__header");
      // header 清 mock + 填真
      if (oldPaneHdr) {
        oldPaneHdr.innerHTML =
          '<span class="diff-pane__version">—</span><span style="color:var(--text-3);">未選對照版本</span>';
      }
      if (newPaneHdr) {
        newPaneHdr.innerHTML =
          '<span class="diff-pane__version">目前</span><span>編輯中</span>' +
          `<span class="diff-pane__author">${escapeHtml((Auth.user && (Auth.user.display_name || Auth.user.username)) || "")} · 剛剛</span>`;
      }
      if (oldPaneBody) {
        oldPaneBody.contentEditable = "false";
        oldPaneBody.innerHTML = '<div class="diff-line diff-line--empty">（點左側版本進入對照模式）</div>';
      }
      if (newPaneBody) {
        newPaneBody.contentEditable = "true";
        // 用 textContent 確保我們存的就是純文字 markdown
        newPaneBody.textContent = doc.body || "";
        newPaneBody.id = "kbv5-edit-body";
        // 接 markdown 工具列（mockup 寫死的 B/I/H1/H2/列表/表格/代碼/附件 按鈕）
        wireEditToolbar(page, newPaneBody);
      }
    }

    // ===== 標籤 diff（清 mock + 簡化為單欄可編輯）=====
    const tagBlock = (function () {
      const lbs = page.querySelectorAll("label");
      for (const lb of lbs) if ((lb.textContent || "").trim() === "標籤") return lb.parentElement;
      return null;
    })();
    if (tagBlock) {
      const df = tagBlock.querySelector(".diff-field");
      if (df) {
        df.innerHTML =
          '<div class="diff-field__pane diff-field__pane--new" style="grid-column:span 2;">' +
          '<div class="diff-field__label">編輯中（逗號分隔）</div>' +
          `<input id="kbv5-edit-tags" value="${escapeHtml((doc.tags || []).join(", "))}" style="width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:rgba(255,255,255,0.9);box-sizing:border-box;">` +
          "</div>";
      }
    }

    // ===== meta footer =====
    const footer = page.querySelector(".edit-layout > div > div > div:last-child");
    // 上面 selector 不一定中；改用 textContent 找含「建立:」
    const allFoots = page.querySelectorAll("[style*='border-top']");
    allFoots.forEach((el) => {
      if ((el.textContent || "").includes("建立")) {
        const wc = (doc.body || "").replace(/\s/g, "").length;
        el.innerHTML =
          `<span>建立：${escapeHtml(_localDate(doc.created_at))}</span>` +
          `<span>最後修改：${escapeHtml(reviewTimeLabel(doc.updated_at))}</span>` +
          `<span>字數：${wc.toLocaleString()}</span>` +
          `<span>瀏覽：${doc.view_count || 0} 次</span>`;
      }
    });
    void footer;
  }

  // §12.12 編輯工具列：在 contenteditable 右 pane 套用 markdown 包裝/前綴
  function wireEditToolbar(page, editor) {
    // 找出 toolbar 區（在「內容(Markdown)」label 同一行的 div）
    const labels = page.querySelectorAll("label");
    let toolbar = null;
    for (const lb of labels) {
      if ((lb.textContent || "").trim().startsWith("內容")) {
        const row = lb.parentElement;
        if (row) toolbar = row.querySelector('div[style*="display:flex"]');
        break;
      }
    }
    if (!toolbar) return;
    toolbar.querySelectorAll(".btn--quiet").forEach((btn) => {
      // 避免重複綁定（重新 loadEditPage 時跳過已綁過的）
      if (btn.dataset.kbv5MdRole) return;
      const t = (btn.textContent || "").trim();
      const op = {
        "B": { kind: "wrap", before: "**", after: "**" },
        "I": { kind: "wrap", before: "*", after: "*" },
        "H1": { kind: "line", prefix: "# " },
        "H2": { kind: "line", prefix: "## " },
        "列表": { kind: "line", prefix: "- " },
        "代碼": { kind: "wrap", before: "`", after: "`" },
        "表格": { kind: "block", text:
          "\n| 欄一 | 欄二 | 欄三 |\n|------|------|------|\n| 值1 | 值2 | 值3 |\n" },
        "附件": { kind: "deferred", msg: "附件功能於 L11 後續實作（§19.7）" },
      }[t];
      if (!op) return;
      btn.dataset.kbv5MdRole = t;
      btn.style.cursor = "pointer";
      btn.onclick = (e) => {
        e.preventDefault();
        if (op.kind === "deferred") { toast(op.msg, "info"); return; }
        applyMarkdownOp(editor, op);
      };
    });
  }

  function applyMarkdownOp(editor, op) {
    editor.focus();
    const sel = document.getSelection();
    if (!sel || sel.rangeCount === 0) return;
    const range = sel.getRangeAt(0);
    if (!editor.contains(range.commonAncestorContainer)) {
      // 游標不在編輯器內 → 把游標移到結尾
      const r2 = document.createRange();
      r2.selectNodeContents(editor);
      r2.collapse(false);
      sel.removeAllRanges();
      sel.addRange(r2);
    }
    if (op.kind === "wrap") {
      const text = sel.toString();
      // 用 execCommand 保留 undo 堆疊
      document.execCommand("insertText", false, op.before + text + op.after);
      // 沒有選取時把游標往回移 after 長度
      if (!text) {
        const s2 = document.getSelection();
        if (s2 && s2.rangeCount) {
          const r3 = s2.getRangeAt(0);
          for (let i = 0; i < op.after.length; i++) {
            try { r3.setStart(r3.startContainer, Math.max(0, r3.startOffset - 1)); } catch (_e) { break; }
          }
          r3.collapse(true);
          s2.removeAllRanges(); s2.addRange(r3);
        }
      }
    } else if (op.kind === "line") {
      // 在當前行行首加 prefix；簡化做法：直接 insertText "\n" + prefix（若已在行首則不加 \n）
      const r = document.getSelection().getRangeAt(0);
      let atLineStart = false;
      try {
        const before = (r.startContainer.textContent || "").charAt(r.startOffset - 1);
        atLineStart = (r.startOffset === 0 || before === "\n");
      } catch (_e) { atLineStart = false; }
      document.execCommand("insertText", false, (atLineStart ? "" : "\n") + op.prefix);
    } else if (op.kind === "block") {
      document.execCommand("insertText", false, op.text);
    }
  }

  // 編輯頁標籤欄渲染：oldTags=null → 單欄可編輯；oldTags=陣列 → 「舊版標籤(唯讀) | 編輯中」對照
  // （修：對照模式切版本時標籤沒跟著顯示該版本的紀錄標籤）。保留目前編輯中的值。
  function _renderEditTags(page, oldTags, oldLabel) {
    let df = null;
    for (const lb of page.querySelectorAll("label")) {
      if ((lb.textContent || "").trim() === "標籤") { df = lb.parentElement.querySelector(".diff-field"); break; }
    }
    if (!df) return;
    const curEl = df.querySelector("#kbv5-edit-tags");
    const curVal = curEl ? curEl.value : "";
    const inputHtml = `<input id="kbv5-edit-tags" value="${escapeHtml(curVal)}" style="width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:rgba(255,255,255,0.9);box-sizing:border-box;">`;
    if (oldTags == null) {
      df.innerHTML = '<div class="diff-field__pane diff-field__pane--new" style="grid-column:span 2;">' +
        '<div class="diff-field__label">編輯中（逗號分隔）</div>' + inputHtml + "</div>";
    } else {
      df.innerHTML =
        '<div class="diff-field__pane diff-field__pane--old"><div class="diff-field__label">' +
          escapeHtml(oldLabel || "舊版標籤") + '</div>' +
          `<div style="padding:7px 10px;font-size:13px;color:var(--text-2);">${escapeHtml((oldTags || []).join("、")) || "（無標籤）"}</div></div>` +
        '<div class="diff-field__pane diff-field__pane--new"><div class="diff-field__label">編輯中（逗號分隔）</div>' +
          inputHtml + "</div>";
    }
  }

  // 對照模式時在標題欄上方顯示該版本的標題(唯讀)；oldTitle=null → 移除。
  function _setEditCompareTitle(page, oldTitle, oldLabel) {
    const inp = page.querySelector("#kbv5-edit-title");
    if (!inp || !inp.parentElement) return;
    let ref = inp.parentElement.querySelector("[data-kbv5-ver-title]");
    if (oldTitle == null) { if (ref) ref.remove(); return; }
    if (!ref) {
      ref = document.createElement("div");
      ref.setAttribute("data-kbv5-ver-title", "1");
      ref.style.cssText = "font-size:12px;color:#92400e;margin-bottom:5px;padding:5px 9px;background:#fffbeb;border:1px solid #fde68a;border-radius:5px;";
      inp.parentElement.insertBefore(ref, inp);
    }
    ref.innerHTML = `<b>${escapeHtml(oldLabel || "舊版標題")}</b>：${escapeHtml(oldTitle)}`;
  }

  async function enterCompareMode(docId, version) {
    const page = document.querySelector('main.page[data-page="edit"]');
    if (!page) return;
    // 標記側欄 selected
    page.querySelectorAll(".version-item").forEach((el) => el.classList.remove("is-compared"));
    const sel = page.querySelector(`.version-item[data-vh-ver="${version}"]`);
    if (sel) sel.classList.add("is-compared");
    // 拉版本內容
    const r = await api(`/api/documents/${docId}/history/${version}`);
    if (!r.ok) { toast("讀取版本失敗", "error"); return; }
    const ver = await r.json();
    // 顯示對照狀態列 + 注入還原按鈕
    const bar = page.querySelector("#diff-bar");
    if (bar) {
      bar.style.display = "";
      const info = bar.querySelector(".diff-bar__info");
      if (info) info.innerHTML = `對照中：<b>v${version}</b>（${escapeHtml(ver.editor || "?")} · ${escapeHtml(reviewTimeLabel(ver.edited_at))}） ↔ <b>目前編輯中</b>`;
      const closer = bar.querySelector(".diff-bar__close");
      if (closer) closer.onclick = () => exitCompareMode();
      const stats = bar.querySelector(".diff-stats");
      if (stats) stats.innerHTML = "";   // §7.3 統計差異數延後
      // 注入「還原至此版本」按鈕（mockup 沒有；§7.5 還原功能既有後端端點）
      bar.querySelectorAll("#kbv5-vh-restore-btn").forEach((n) => n.remove());
      const restoreBtn = document.createElement("button");
      restoreBtn.id = "kbv5-vh-restore-btn";
      restoreBtn.className = "btn btn--primary btn--sm";
      restoreBtn.style.cssText = "margin-left:8px;font-size:11px;padding:4px 10px;";
      restoreBtn.innerHTML = `↻ 還原至 v${version}`;
      restoreBtn.onclick = (e) => { e.preventDefault(); e.stopPropagation();
        restoreToVersion(docId, version); };
      if (closer && closer.parentNode) closer.parentNode.insertBefore(restoreBtn, closer);
      else bar.appendChild(restoreBtn);
    }
    const grid = page.querySelector("#diff-grid");
    if (!grid) return;
    const oldHdr = grid.querySelector(".diff-pane--old .diff-pane__header");
    const oldBody = grid.querySelector(".diff-pane--old .diff-pane__body");
    const newBody = grid.querySelector(".diff-pane--new .diff-pane__body");
    if (oldHdr) {
      oldHdr.innerHTML =
        `<span class="diff-pane__version">v${version}</span><span>對照版本</span>` +
        `<span class="diff-pane__author">${escapeHtml(ver.editor || "?")} · ${escapeHtml(reviewTimeLabel(ver.edited_at))}</span>`;
    }
    // 用既有 _diffSides（與合併預覽相同）：紅底=刪除 / 綠底=新增
    const oldText = ver.body || "";
    const currentText = newBody ? (newBody.innerText || newBody.textContent || "") : "";
    const sides = _diffSides(oldText, currentText);
    const paneCss = "white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono,Consolas,monospace);font-size:12px;line-height:1.6;";
    if (oldBody) {
      oldBody.contentEditable = "false";
      oldBody.setAttribute("style", paneCss);
      oldBody.innerHTML = sides.left;
    }
    if (newBody) {
      newBody.contentEditable = "true";
      newBody.setAttribute("style", paneCss);
      newBody.innerHTML = sides.right;
    }
    // 標籤對照：左顯示此版本當時的標籤(唯讀)，右為目前可編輯（修：切版本標籤沒跟著切換）
    let _vtags = [];
    try { _vtags = JSON.parse(ver.tags || "[]"); } catch (_e) { _vtags = []; }
    _renderEditTags(page, _vtags, `v${version} 標籤`);
    // 標題對照：顯示此版本的標題（唯讀提示），與內文/標籤一致
    _setEditCompareTitle(page, ver.title || "（無標題）", `v${version} 標題`);
  }

  function exitCompareMode() {
    const page = document.querySelector('main.page[data-page="edit"]');
    if (!page) return;
    page.querySelectorAll(".version-item").forEach((el) => el.classList.remove("is-compared"));
    const bar = page.querySelector("#diff-bar");
    if (bar) bar.style.display = "none";
    const grid = page.querySelector("#diff-grid");
    if (!grid) return;
    const oldHdr = grid.querySelector(".diff-pane--old .diff-pane__header");
    const oldBody = grid.querySelector(".diff-pane--old .diff-pane__body");
    const newBody = grid.querySelector(".diff-pane--new .diff-pane__body");
    if (oldHdr) oldHdr.innerHTML = '<span class="diff-pane__version">—</span><span style="color:var(--text-3);">未選對照版本</span>';
    if (oldBody) {
      oldBody.removeAttribute("style");
      oldBody.innerHTML = '<div class="diff-line diff-line--empty">（點左側版本進入對照模式）</div>';
    }
    // 右 pane：去 spans 還原為純文字（避免後續編輯混入殘留標籤）
    if (newBody) {
      const plain = newBody.innerText || newBody.textContent || "";
      newBody.innerHTML = "";
      newBody.textContent = plain;
    }
    // 標籤欄收回單欄（保留目前編輯中的值）+ 移除標題對照提示
    _renderEditTags(page, null);
    _setEditCompareTitle(page, null);
  }

  async function doSaveEdit(docId) {
    const page = document.querySelector('main.page[data-page="edit"]');
    if (!page) return;
    // 從右 pane 取純文字（去 spans）+ 在對照模式時不會混到舊版內容
    const newBody = page.querySelector(".diff-pane--new .diff-pane__body");
    const titleEl = page.querySelector("#kbv5-edit-title");
    const tagsEl = page.querySelector("#kbv5-edit-tags");
    const visSel = page.querySelector("#edit-visibility-select");
    const note = window.prompt("變更說明（可空）：", "");
    const payload = {
      title: titleEl ? titleEl.value.trim() : undefined,
      body: newBody ? (newBody.innerText || newBody.textContent || "") : undefined,
      tags: tagsEl ? Pure.parseCsvList(tagsEl.value) : undefined,   // 拆/去空白/去重（pure.js 已測）
      change_note: (note || "").trim() || null,
      base_version: typeof NS._editBaseVersion === "number" ? NS._editBaseVersion : undefined,
    };
    console.info("[KBV5] doSaveEdit", docId, "body len:", (payload.body || "").length);
    const r = await api(`/api/documents/${docId}/edit`, {
      method: "POST", body: JSON.stringify(payload),
    });
    const j = await r.json().catch(() => ({}));
    // §7.5 並發：他人已更新 → 不靜默覆蓋，提示重新載入
    if (r.status === 409 && j.detail && j.detail.error === "edit_conflict") {
      toast("⚠ 此文件已被他人更新，請重新載入後再編輯（你的修改未儲存）", "error");
      if (window.confirm("此文件已被他人更新。\n要重新載入最新版本嗎？（你目前的修改會遺失）")) {
        loadEditPage(docId);
      }
      return;
    }
    if (!r.ok) { toast(errMsg(j, "儲存失敗"), "error"); return; }
    if (visSel && visSel.classList.contains("is-changed")) {
      toast("內容已儲存。可見度變更需獨立確認，請於文件頁點「改可見度」。", "info");
    } else {
      toast(`已儲存（snapshot v${j.snapshot_version}）`, "ok");
    }
    // 留在編輯頁並 reload sidebar 讓新版本立刻出現（取代原本 redirect 到 view）
    NS._versionsDocId = docId;
    loadEditPage(docId);
  }

  // §12.13 版本歷史頁（mockup #versions）：清 mock + timeline 渲染
  function wireVersionsPage() {
    const page = document.querySelector('main.page[data-page="versions"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";
    const onShow = () => {
      if (!page.classList.contains("is-active")) return;
      if (NS._versionsDocId) loadVersionsPage(NS._versionsDocId);
      else _clearVersionsMock(page);   // 無 doc context → 清掉 mockup 假時間軸（避免顯示假人名）
    };
    const obs = new MutationObserver(onShow);
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    onShow();
  }

  function _clearVersionsMock(page) {
    const tl = page.querySelector(".timeline");
    if (tl) tl.innerHTML = '<div style="padding:32px;color:var(--text-3);text-align:center;">請從文件頁的「版本歷史」進入以查看真實版本記錄。</div>';
  }

  async function loadVersionsPage(docId) {
    const page = document.querySelector('main.page[data-page="versions"]');
    if (!page) return;
    // flash 修復：先同步清掉 mockup 寫死的假版本列，再抓資料
    page.querySelectorAll(".version-item").forEach((n) => n.remove());
    const [r, hr] = await Promise.all([
      api(`/api/documents/${docId}`),
      api(`/api/documents/${docId}/history`),
    ]);
    if (!r.ok) { toast("讀取失敗", "error"); return; }
    const doc = await r.json();
    const histData = hr.ok ? await hr.json() : { versions: [] };
    const versions = histData.versions || [];

    // 副標
    const sub = page.querySelector(".page__title-group p");
    if (sub) sub.textContent = `${doc.title || ""} · 共 ${versions.length + 1} 個版本`;
    // 「← 返回文件」按鈕
    page.querySelectorAll('.page__actions [data-page="view"]').forEach((b) => {
      b.onclick = (e) => { e.preventDefault(); e.stopPropagation();
        if (typeof NS.openDocView === "function") NS.openDocView(docId); };
    });
    // 「匯出版本記錄」→ §7.3 YAGNI 延後，隱藏
    page.querySelectorAll('.page__actions .btn').forEach((b) => {
      if ((b.textContent || "").includes("匯出")) b.style.display = "none";
    });
    // versions-header
    const docInfo = page.querySelector(".versions-doc-info h3");
    if (docInfo) docInfo.textContent = doc.title || "";
    const docInfoMeta = page.querySelector(".versions-doc-info p");
    if (docInfoMeta) {
      const collaborators = new Set(versions.map((v) => v.editor).filter(Boolean));
      docInfoMeta.textContent =
        `共 ${versions.length + 1} 個版本 · ${collaborators.size} 位協作者 · 建立於 ${_localDate(doc.created_at)}`;
    }
    // 「編輯目前版本」鈕
    page.querySelectorAll('.versions-actions [data-page="edit"]').forEach((b) => {
      b.onclick = (e) => { e.preventDefault(); e.stopPropagation();
        NS._editDocId = docId; window.switchPage("edit"); };
    });
    // 「比較選定版本」→ §7.3 YAGNI 延後
    page.querySelectorAll('.versions-actions .btn--ghost').forEach((b) => {
      if ((b.textContent || "").includes("比較")) b.style.display = "none";
    });
    // 權限：admin/senior/manager(本部門) 可還原
    const role = (Auth.user && Auth.user.role) || "user";
    const myDepts = new Set([
      (Auth.user && Auth.user.department) || "",
      ...((Auth.user && Auth.user.secondary_departments) || []),
    ].filter(Boolean));
    const canRestore = role === "admin" || role === "senior_manager" ||
      (role === "manager" && myDepts.has(doc.owner_department));

    // timeline：清 mock + 渲染
    const tl = page.querySelector(".timeline");
    if (!tl) return;
    tl.innerHTML = "";
    // 目前版本卡（is-current）
    const currentCard = document.createElement("div");
    currentCard.className = "timeline-item is-current is-expanded";
    currentCard.innerHTML =
      '<div class="timeline-item__head">' +
        '<span class="timeline-item__version">目前</span>' +
        '<span class="timeline-item__pill timeline-item__pill--current">目前發布版</span>' +
        `<span class="timeline-item__time">${escapeHtml(reviewTimeLabel(doc.updated_at))}</span>` +
      "</div>" +
      (doc.summary ? `<div class="timeline-item__summary">${escapeHtml(doc.summary)}</div>` : "") +
      '<div class="timeline-item__actions">' +
        (canRestore ? `<button class="btn btn--primary" style="font-size:11px;padding:4px 10px;" data-tl-edit>編輯目前版本</button>` : "") +
      "</div>";
    tl.appendChild(currentCard);
    // 歷史版本
    versions.forEach((v) => {
      const card = document.createElement("div");
      card.className = "timeline-item";
      const initial = (v.editor || "?").slice(0, 1);
      card.innerHTML =
        '<div class="timeline-item__head">' +
          `<span class="timeline-item__version">v${v.version}</span>` +
          `<span class="timeline-item__time">${escapeHtml(reviewTimeLabel(v.edited_at))}</span>` +
        "</div>" +
        '<div class="timeline-item__author">' +
          `<div class="avatar" style="width:22px;height:22px;font-size:10px;">${escapeHtml(initial)}</div>` +
          `<span>${escapeHtml(v.editor || "?")}</span>` +
        "</div>" +
        (v.change_note ? `<div class="timeline-item__summary">${escapeHtml(v.change_note)}</div>` : "") +
        '<div class="timeline-item__actions">' +
          `<button class="btn btn--ghost" style="font-size:11px;padding:4px 10px;" data-tl-view="${v.version}">查看 diff</button>` +
          (canRestore ? `<button class="btn btn--quiet" style="font-size:11px;padding:4px 10px;" data-tl-restore="${v.version}">還原此版本</button>` : "") +
        "</div>";
      tl.appendChild(card);
    });

    // 綁定
    tl.querySelectorAll("[data-tl-edit]").forEach((b) =>
      b.addEventListener("click", () => { NS._editDocId = docId; window.switchPage("edit"); }));
    tl.querySelectorAll("[data-tl-view]").forEach((b) =>
      b.addEventListener("click", () => {
        NS._editDocId = docId; window.switchPage("edit");
        // 切到 edit page 後等 wireEditPage 載完再 enterCompareMode
        setTimeout(() => enterCompareMode(docId, parseInt(b.dataset.tlView, 10)), 400);
      }));
    tl.querySelectorAll("[data-tl-restore]").forEach((b) =>
      b.addEventListener("click", () => restoreToVersion(docId, parseInt(b.dataset.tlRestore, 10))));
  }

  async function restoreToVersion(docId, version) {
    return NS.stepUpPrompt({
      title: `還原至 v${version}`,
      desc: "覆蓋當前內容；既有編輯歷史保留。若當前狀態尚未儲存為一筆 history，請先儲存再還原。",
      submitText: "確認還原",
      submittingText: "還原中…",
    }, async (pwd) => {
      const r = await api(`/api/documents/${docId}/history/${version}/restore`, {
        method: "POST", body: JSON.stringify({ step_up_password: pwd }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) {
        const code = (j.detail && j.detail.error) || "restore_failed";
        if (code === "step_up_failed") throw new Error("密碼錯誤");
        throw new Error(errMsg(j, "還原失敗"));
      }
      toast(`已還原至 v${version}`, "ok");
      // 還原後跳回 edit 頁並 reload，避免在 versions 頁看到的內容與 doc 實際內容不一致
      NS._editDocId = docId;
      if (document.querySelector('main.page[data-page="edit"].is-active')) {
        loadEditPage(docId);
      } else {
        loadVersionsPage(docId);
      }
    });
  }

  NS.wireEditPage = wireEditPage;
  NS.wireVersionsPage = wireVersionsPage;

  // §7.7 軟刪除：step-up 密碼 confirm → DELETE → 返回知識庫
  function openSoftDeleteDialog(doc) {
    return NS.stepUpPrompt({
      title: `軟刪除「${doc.title || ""}」`,
      desc: "軟刪除後文件搬到垃圾桶，可由 admin/senior 在垃圾桶頁還原。請輸入您的登入密碼確認。",
      submitText: "確認刪除",
      submittingText: "刪除中…",
    }, async (pwd) => {
      const r = await api(`/api/documents/${doc.id}`, {
        method: "DELETE", body: JSON.stringify({ step_up_password: pwd }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) {
        const code = (j.detail && j.detail.error) || "delete_failed";
        if (code === "step_up_failed") throw new Error("密碼錯誤");
        throw new Error(errMsg(j, "刪除失敗"));
      }
      toast("已軟刪除（垃圾桶可還原）", "ok");
      window.switchPage("library");
      if (typeof window.refreshAll === "function") window.refreshAll();
    });
  }

  // §12.15 垃圾桶頁：列出軟刪除文件 + 還原 + 永久刪除（admin）
  function wireTrashPage() {
    const page = document.querySelector('main.page[data-page="trash"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";
    // 隱藏 mockup 的「全部還原 / 清空垃圾桶」（PRD 標註待確認，YAGNI 暫不做）
    page.querySelectorAll(".page__actions .btn").forEach((b) => { b.style.display = "none"; });
    // 監聽 page active → 載資料
    const obs = new MutationObserver(() => {
      if (page.classList.contains("is-active")) loadTrashList();
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active")) loadTrashList();
  }

  async function loadTrashList() {
    const page = document.querySelector('main.page[data-page="trash"]');
    if (!page) return;
    const list = page.querySelector(".trash-list");
    if (!list) return;
    const role = (Auth.user && Auth.user.role) || "user";
    if (!["admin", "senior_manager", "manager"].includes(role)) {
      list.innerHTML = '<div style="padding:32px;text-align:center;color:#94a3b8;font-size:13px;">您沒有權限查看垃圾桶</div>';
      return;
    }
    list.innerHTML = '<div style="padding:24px;text-align:center;color:#94a3b8;">載入中…</div>';
    const r = await api("/api/trash");
    if (!r.ok) {
      list.innerHTML = `<div style="padding:24px;color:#b91c1c;">${escapeHtml(errMsg(await r.json().catch(() => ({})), "讀取失敗"))}</div>`;
      return;
    }
    const items = (await r.json()).items || [];
    // §7.3 放寬：manager 可還原本部門軟刪除；permanent delete 仍限 admin
    const canRestore = ["admin", "senior_manager", "manager"].includes(role);
    const canPurge = role === "admin";
    const managerBanner = role === "manager"
      ? '<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:6px;padding:10px 14px;margin-bottom:12px;font-size:13px;">您看到的是<b>本部門</b>已軟刪除文件，可還原；永久刪除需管理者。</div>'
      : "";
    // 欄位標題列（mockup 沒有；補上讓使用者知道每欄是什麼）
    const header =
      '<div class="trash-row" style="font-weight:600;color:#64748b;font-size:12px;background:#f8fafc;border-bottom:1px solid #e2e8f0;text-transform:none;">' +
      '<div>標題</div>' +
      '<div>部門</div>' +
      '<div>刪除者</div>' +
      '<div>刪除時間</div>' +
      '<div style="text-align:right;">操作</div>' +
      '</div>';
    if (!items.length) {
      list.innerHTML = managerBanner + header +
        '<div style="padding:32px;text-align:center;color:#94a3b8;font-size:13px;">垃圾桶是空的。</div>';
      return;
    }
    list.innerHTML = managerBanner + header +
      items.map((t) => renderTrashRow(t, canRestore, canPurge)).join("");
    list.querySelectorAll("[data-trash-restore]").forEach((b) =>
      b.addEventListener("click", (e) => { e.stopPropagation();
        trashRestore(parseInt(b.dataset.trashRestore, 10)); }));
    list.querySelectorAll("[data-trash-purge]").forEach((b) =>
      b.addEventListener("click", (e) => { e.stopPropagation();
        trashPurge(parseInt(b.dataset.trashPurge, 10), b.dataset.trashTitle || ""); }));
    // 點標題開預覽
    list.querySelectorAll("[data-trash-preview]").forEach((el) =>
      el.addEventListener("click", () => openTrashPreview(parseInt(el.dataset.trashPreview, 10))));
  }

  function renderTrashRow(t, canRestore, canPurge) {
    const restoreBtn = canRestore
      ? `<button class="btn btn--ghost btn--sm" data-trash-restore="${t.id}">` +
        '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 9-9"/><path d="M3 4v5h5"/></svg>' +
        " 還原</button>"
      : "";
    const purgeBtn = canPurge
      ? `<button class="btn btn--danger btn--sm" data-trash-purge="${t.id}" data-trash-title="${escapeHtml(t.title || "")}">永久刪除</button>`
      : "";
    const actionsCell = (restoreBtn || purgeBtn)
      ? `<div class="trash-row__actions">${restoreBtn}${purgeBtn}</div>`
      : '<div class="trash-row__actions"><span style="color:#94a3b8;font-size:12px;">（唯讀）</span></div>';
    return `<div class="trash-row">` +
      `<div class="trash-row__title" data-trash-preview="${t.id}" style="cursor:pointer;" title="點擊預覽內容">` +
        '<div class="file-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg></div>' +
        `${escapeHtml(t.title || "(未命名)")}` +
      "</div>" +
      `<div class="trash-row__meta">${escapeHtml(t.owner_department || "")}</div>` +
      `<div class="trash-row__meta">${escapeHtml(t.deleted_by || "?")} 刪除</div>` +
      `<div class="trash-row__meta">${escapeHtml(reviewTimeLabel(t.deleted_at))}刪除</div>` +
      actionsCell +
      "</div>";
  }

  async function openTrashPreview(docId) {
    const r = await api(`/api/trash/${docId}`);
    if (!r.ok) {
      toast(errMsg(await r.json().catch(() => ({})), "讀取失敗"), "error");
      return;
    }
    const doc = await r.json();
    const bodyHtml = doc.vault_missing
      ? '<div style="padding:20px;border:1px solid #fecaca;background:#fef2f2;border-radius:8px;color:#991b1b;">⚠ trash 內 MD 檔遺失（已被永久刪除或外部清除）。</div>'
      : renderMarkdown(doc.body || "");
    const tags = (doc.tags || []).length
      ? `<div style="margin-top:6px;">${doc.tags.map((t) => `<span class="tag-pill">${escapeHtml(t)}</span>`).join("")}</div>`
      : "";
    const m = _kbModal(
      '<div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;">' +
        '<div>' +
          `<div style="font-size:16px;font-weight:700;color:#0b1f33;">${escapeHtml(doc.title || "(未命名)")}</div>` +
          `<div style="font-size:12px;color:#64748b;margin-top:4px;">${escapeHtml(doc.owner_department || "")}・` +
          `${escapeHtml(doc.deleted_by || "?")} 刪除・${escapeHtml(reviewTimeLabel(doc.deleted_at))}刪除</div>` +
          tags +
          '<div style="margin-top:6px;font-size:11px;color:#dc2626;font-weight:600;">⚠ 唯讀（垃圾桶內預覽，不可編輯）</div>' +
        '</div>' +
        '<button id="trash-prev-x" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;flex-shrink:0;">✕</button>' +
      '</div>' +
      `<div id="trash-prev-body" style="padding:18px 22px;max-height:60vh;overflow:auto;">${bodyHtml}</div>`,
      720
    );
    m.card.querySelector("#trash-prev-x").addEventListener("click", m.close);
  }

  async function trashRestore(docId) {
    const r = await api(`/api/trash/${docId}/restore`, { method: "POST" });
    if (!r.ok) { toast(errMsg(await r.json().catch(() => ({})), "還原失敗"), "error"); return; }
    toast("已還原回知識庫", "ok");
    loadTrashList();
  }

  async function trashPurge(docId, title) {
    return NS.stepUpPrompt({
      title: `永久刪除「${title}」`,
      desc: "此操作不可復原：實體刪除 MD 檔 + DELETE FROM documents。請輸入您的登入密碼。",
      submitText: "永久刪除",
      submittingText: "刪除中…",
    }, async (pwd) => {
      const r = await api(`/api/trash/${docId}/permanent`, {
        method: "DELETE", body: JSON.stringify({ step_up_password: pwd }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) {
        const code = (j.detail && j.detail.error) || "purge_failed";
        if (code === "step_up_failed") throw new Error("密碼錯誤");
        throw new Error(errMsg(j, "永久刪除失敗"));
      }
      toast("已永久刪除", "ok");
      loadTrashList();
    });
  }

  NS.wireTrashPage = wireTrashPage;

  // §41.3.1 相關文件區塊（含所屬統一 MOC）。跨部門同主題被擋合併時後端自動互掛 related；
  // 無權限的他部門文件僅顯示標題（灰、不可點、不發 API），點擊只提示請洽該部門。
  function renderRelatedBlock(side, doc) {
    side.querySelectorAll("#kbv5-related-block").forEach((n) => n.remove());
    const related = Array.isArray(doc.related) ? doc.related : [];
    const up = doc.up || null;
    const blk = document.createElement("div");
    blk.className = "doc-side__block";
    blk.id = "kbv5-related-block";
    let html = '<div class="doc-side__title">相關文件</div>';
    if (up) {
      html += `<div class="doc-side__row" style="margin-bottom:6px;">` +
        `<a data-moc="${up.id}" style="cursor:pointer;color:#2563eb;">🗺 ${escapeHtml(up.title)}（統一索引）</a></div>`;
    }
    if (related.length) {
      related.forEach((rel) => {
        if (rel.can_access) {
          html += `<div class="doc-side__row"><a data-rel="${rel.id}" ` +
            `style="cursor:pointer;color:#2563eb;">${escapeHtml(rel.title)}</a></div>`;
        } else {
          html += `<div class="doc-side__row"><span data-rel-dept="${escapeHtml(rel.owner_department || "其他部門")}" ` +
            `style="color:#94a3b8;cursor:not-allowed;">${escapeHtml(rel.title)}` +
            `（${escapeHtml(rel.owner_department || "其他部門")}維護）</span></div>`;
        }
      });
    } else if (!up) {
      html += '<div class="doc-side__row"><span style="color:#94a3b8;font-size:12px;">' +
        "目前無相關文件（跨部門同主題時自動建立）</span></div>";
    }
    blk.innerHTML = html;
    side.appendChild(blk);
    blk.querySelectorAll("[data-rel]").forEach((a) =>
      a.addEventListener("click", () => openDocView(parseInt(a.dataset.rel, 10))));
    blk.querySelectorAll("[data-moc]").forEach((a) =>
      a.addEventListener("click", () => openDocView(parseInt(a.dataset.moc, 10))));
    blk.querySelectorAll("[data-rel-dept]").forEach((s) =>
      s.addEventListener("click", () =>
        toast(`此內容由${s.dataset.relDept}維護，您無權限查看，請洽該部門`, "info")));
  }

  // ============================================================
  // 我的收藏（PRD §12.25）
  // ============================================================
  async function _toggleDocBookmark(docId, starEl) {
    const on = starEl.textContent === "★";
    if (on) {
      const r = await api(`/api/bookmarks/${docId}`, { method: "DELETE" });
      if (r.ok) { starEl.textContent = "☆"; starEl.style.color = "#cbd5e1"; toast("已取消收藏", "info"); }
    } else {
      const r = await api("/api/bookmarks", { method: "POST", body: JSON.stringify({ document_id: docId }) });
      if (r.ok) { starEl.textContent = "★"; starEl.style.color = "#f59e0b"; toast("已加入收藏（未分類）", "ok"); }
      else toast(errMsg(await r.json().catch(() => ({})), "收藏失敗"), "error");
    }
  }

  let _favActiveFolder = null;
  let _favData = { folders: [], items: [] };

  function wireFavorites() {
    const page = document.querySelector('main.page[data-page="favorites"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";
    const obs = new MutationObserver(() => { if (page.classList.contains("is-active")) loadFavorites(); });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active")) loadFavorites();
    // 匯出清單按鈕（D97 不收錄）→ 隱藏
    const exportBtn = Array.from(page.querySelectorAll(".page__actions .btn")).find((b) => (b.textContent || "").includes("匯出"));
    if (exportBtn) exportBtn.style.display = "none";
    const addFolderBtn = Array.from(page.querySelectorAll(".page__actions .btn")).find((b) => (b.textContent || "").includes("新增資料夾"));
    if (addFolderBtn) addFolderBtn.onclick = _createFavFolder;
  }

  async function loadFavorites() {
    const page = document.querySelector('main.page[data-page="favorites"]');
    if (!page || !Auth.access) return;
    const r = await api("/api/bookmarks").catch(() => null);
    if (!r || !r.ok) return;
    _favData = await r.json();
    if (!_favActiveFolder || !_favData.folders.some((f) => f.name === _favActiveFolder)) {
      const firstWith = _favData.folders.find((f) => f.count > 0);
      _favActiveFolder = (firstWith || _favData.folders[0] || { name: "未分類" }).name;
    }
    // header 統計
    const hp = page.querySelector(".page__title-group p");
    if (hp) hp.textContent = `共 ${_favData.items.length} 項收藏 · ${_favData.folders.length} 個資料夾 · 點 ★ 切換收藏`;
    _renderFavFolders(page);
    _renderFavCards(page);
  }

  function _renderFavFolders(page) {
    const wrap = page.querySelector(".fav-folders");
    if (!wrap) return;
    const folderCard = (f) => {
      const preview = _favData.items.filter((it) => it.folder === f.name).slice(0, 3).map((it) => it.title).join("、");
      return `<div class="fav-folder${f.name === _favActiveFolder ? " is-active" : ""}" data-folder="${escapeHtml(f.name)}" style="cursor:pointer;">` +
        `<div class="fav-folder__head"><div class="fav-folder__icon" style="background:${escapeHtml(f.color || "#E2E8F0")};">${escapeHtml(f.icon || "📁")}</div>` +
        `<div class="fav-folder__name">${escapeHtml(f.name)}</div><div class="fav-folder__count">${f.count}</div></div>` +
        `<div class="fav-folder__preview">${escapeHtml(preview || "（空）")}</div></div>`;
    };
    wrap.innerHTML = _favData.folders.map(folderCard).join("") +
      `<div class="fav-folder fav-folder--new" data-newfolder="1" style="cursor:pointer;"><span style="font-size:18px;">+</span> 新增資料夾</div>`;
    wrap.querySelectorAll(".fav-folder[data-folder]").forEach((el) => el.addEventListener("click", () => {
      _favActiveFolder = el.dataset.folder; _renderFavFolders(page); _renderFavCards(page);
    }));
    const nf = wrap.querySelector("[data-newfolder]");
    if (nf) nf.addEventListener("click", _createFavFolder);
  }

  function _renderFavCards(page) {
    const grid = page.querySelector(".fav-grid");
    if (!grid) return;
    const items = _favData.items.filter((it) => it.folder === _favActiveFolder);
    // 標題列（資料夾名 + 計數）
    const h3 = page.querySelectorAll("h3")[1];
    if (h3) h3.innerHTML = `${escapeHtml(_favActiveFolder)}（${items.length} 項）<span style="margin-left:auto;font-size:11px;font-weight:400;color:var(--text-3);">點卡片開啟文件</span>`;
    if (!items.length) { grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;color:var(--text-3);padding:32px;">此資料夾沒有收藏</div>'; return; }
    const folderOpts = _favData.folders.map((f) => f.name);
    grid.innerHTML = items.map((it) => {
      const opts = folderOpts.map((n) => `<option value="${escapeHtml(n)}"${n === it.folder ? " selected" : ""}>${escapeHtml(n)}</option>`).join("");
      return `<div class="fav-card" data-doc="${it.document_id}" style="cursor:pointer;">` +
        `<button class="fav-card__star" data-doc="${it.document_id}" title="取消收藏">★</button>` +
        `<div class="fav-card__type">${escapeHtml(it.category || "")}</div>` +
        `<div class="fav-card__title">${escapeHtml(it.title)}</div>` +
        `<div class="fav-card__path">📁 ${escapeHtml(it.owner_department || "")}</div>` +
        `<div class="fav-card__meta"><span>👁 ${it.view_count || 0} 次</span><span>🕒 ${escapeHtml(reviewTimeLabel(it.updated_at))}</span></div>` +
        `<select class="kbv5-fav-move" data-doc="${it.document_id}" style="margin-top:8px;width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:6px;font-size:12px;" title="移動到資料夾">${opts}</select></div>`;
    }).join("");
    grid.querySelectorAll(".fav-card").forEach((card) => card.addEventListener("click", (e) => {
      if (e.target.closest(".fav-card__star") || e.target.closest(".kbv5-fav-move")) return;
      openDocView(parseInt(card.dataset.doc, 10));
    }));
    grid.querySelectorAll(".fav-card__star").forEach((b) => b.addEventListener("click", async (e) => {
      e.stopPropagation();
      const r = await api(`/api/bookmarks/${b.dataset.doc}`, { method: "DELETE" });
      if (r.ok) { toast("已取消收藏", "info"); loadFavorites(); }
    }));
    grid.querySelectorAll(".kbv5-fav-move").forEach((sel) => sel.addEventListener("change", async (e) => {
      e.stopPropagation();
      const r = await api(`/api/bookmarks/${sel.dataset.doc}/folder`, { method: "POST", body: JSON.stringify({ folder: sel.value }) });
      if (r.ok) { toast("已移動", "ok"); loadFavorites(); }
    }));
  }

  function _createFavFolder() {
    securePrompt({
      title: "新增資料夾",
      fields: [{ name: "name", label: "資料夾名稱", type: "text", placeholder: "例：常用範本" }],
      submitText: "建立",
      onSubmit: async (v) => {
        const name = (v.name || "").trim();
        if (!name) return "請輸入名稱";
        const r = await api("/api/bookmark-folders", { method: "POST", body: JSON.stringify({ name }) });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) return errMsg(j, "建立失敗");
        _favActiveFolder = name; toast("已新增資料夾", "ok"); loadFavorites();
      },
    });
  }

  // ===== 可見度變更 dialog（L7，PRD §11）=====
  const VIS_OPTIONS = [
    { value: "department", label: "部門內部（預設）" },
    { value: "public", label: "🌐 公開（全公司）" },
    { value: "selected_departments", label: "🏢 自選部門" },
    { value: "restricted", label: "🔒 限定人員" },
    { value: "confidential", label: "🔴 高度機密（僅管理層）" },
  ];

  function _kbModal(innerHtml, maxWidth) {
    const overlay = document.createElement("div");
    overlay.style.cssText =
      "position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100000;" +
      "display:flex;align-items:center;justify-content:center;padding:20px;";
    const card = document.createElement("div");
    card.style.cssText =
      `background:#fff;border-radius:12px;max-width:${maxWidth || 460}px;width:100%;` +
      "max-height:88vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.3);font-family:inherit;";
    card.innerHTML = innerHtml;
    overlay.appendChild(card);
    document.body.appendChild(overlay);
    overlay.addEventListener("click", (e) => { if (e.target === overlay) overlay.remove(); });
    return { overlay, card, close: () => overlay.remove() };
  }

  async function openVisibilityDialog(doc, opts) {
    // pickMode：僅收集設定（提交頁用），不打 API、不需密碼；onPick(config) 回傳結果
    opts = opts || {};
    const pickMode = !!opts.pickMode;
    const collectPassword = pickMode && !!opts.collectPassword;  // 提交頁進階可見度需密碼
    // 取部門 + 使用者清單（供 selected_departments / restricted 選擇）
    let depts = [], users = [];
    try {
      const dr = await fetch("/api/departments", { headers: { "Authorization": "Bearer " + (Auth.access || "") } });
      if (dr.ok) depts = (await dr.json()).filter((d) => d.is_active).map((d) => d.name);
    } catch (e) {}
    try {
      const ur = await api("/api/users");
      if (ur.ok) users = (await ur.json()).filter((u) => !u.is_deleted);
    } catch (e) {}

    const curAllowed = doc.allowed_departments || [];
    const curAccess = doc.access_list || [];
    const m = _kbModal(`
      <div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">
        <div style="font-size:15px;font-weight:600;color:#0b1f33;">${pickMode ? "設定可見度" : "變更可見度"}</div>
        <button id="vd-close" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button>
      </div>
      <div style="padding:18px 22px;">
        <label style="font-size:12px;color:#475569;font-weight:500;">可見度層級</label>
        <select id="vd-vis" style="width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;margin-top:4px;font-size:14px;box-sizing:border-box;">
          ${VIS_OPTIONS.map((o) => `<option value="${o.value}"${o.value === doc.visibility ? " selected" : ""}>${o.label}</option>`).join("")}
        </select>

        <div id="vd-depts" style="display:none;margin-top:14px;">
          <label style="font-size:12px;color:#475569;font-weight:500;">選擇部門（可多選；本文件部門自動含入）</label>
          <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;">
            ${depts.map((d) => `<span class="kb-dept-chip" data-d="${escapeHtml(d)}" style="cursor:pointer;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid #cbd5e1;${curAllowed.includes(d) ? "background:#009BCB;color:#fff;border-color:#009BCB;" : "background:#fff;color:#475569;"}">${escapeHtml(d)}</span>`).join("")}
          </div>
        </div>

        <div id="vd-users" style="display:none;margin-top:14px;">
          <label id="vd-users-label" style="font-size:12px;color:#475569;font-weight:500;">額外授權人員（選填，部門成員以外也能看）</label>
          <input id="vd-user-search" placeholder="搜尋姓名 / 帳號…" style="width:100%;padding:8px 12px;border:1px solid #cbd5e1;border-radius:6px;margin-top:6px;font-size:13px;box-sizing:border-box;" />
          <div id="vd-user-list" style="max-height:180px;overflow:auto;margin-top:8px;border:1px solid #eef2f6;border-radius:8px;"></div>
        </div>

        <div id="vd-confirm" style="display:none;margin-top:14px;padding:10px 12px;background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;">
          <label style="display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#991b1b;cursor:pointer;">
            <input type="checkbox" id="vd-confirm-cb" style="margin-top:2px;" />
            <span>我了解改為「高度機密」後，一般使用者與主管將完全無法查看此文件。</span>
          </label>
        </div>

        <div id="vd-pw-wrap" style="margin-top:14px;">
          <label style="font-size:12px;color:#475569;font-weight:500;">您的登入密碼（高風險變更需確認）</label>
          <input id="vd-pw" type="password" autocomplete="new-password" style="width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;margin-top:4px;font-size:14px;box-sizing:border-box;" />
        </div>
      </div>
      <div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;">
        <button id="vd-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">取消</button>
        <button id="vd-save" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">儲存</button>
      </div>
    `, 480);

    const sel = m.card.querySelector("#vd-vis");
    const selectedUserIds = new Set(curAccess);

    function renderUserList(filter) {
      const list = m.card.querySelector("#vd-user-list");
      const f = (filter || "").toLowerCase();
      list.innerHTML = users
        .filter((u) => !f || `${u.username} ${u.display_name || ""} ${u.email}`.toLowerCase().includes(f))
        .slice(0, 50)
        .map((u) => {
          const on = selectedUserIds.has(u.id);
          const name = u.display_name || u.username;
          return `<label style="display:flex;gap:8px;align-items:center;padding:7px 10px;border-bottom:1px solid #f1f5f9;cursor:pointer;font-size:13px;">
            <input type="checkbox" data-uid="${u.id}" ${on ? "checked" : ""}/>
            <span>${escapeHtml(name)} <span style="color:#94a3b8;">· ${escapeHtml(u.department || "")}</span></span>
          </label>`;
        }).join("") || '<div style="padding:12px;color:#94a3b8;font-size:12px;">無符合人員</div>';
      list.querySelectorAll("input[data-uid]").forEach((cb) => {
        cb.addEventListener("change", () => {
          const id = parseInt(cb.dataset.uid, 10);
          if (cb.checked) selectedUserIds.add(id); else selectedUserIds.delete(id);
        });
      });
    }

    function refreshSections() {
      const v = sel.value;
      m.card.querySelector("#vd-depts").style.display = v === "selected_departments" ? "" : "none";
      // 人員子區：restricted 必選；department/selected_departments/public 為「額外授權」（混合模式）
      const showUsers = ["restricted", "department", "selected_departments", "public"].includes(v);
      m.card.querySelector("#vd-users").style.display = showUsers ? "" : "none";
      const ulabel = m.card.querySelector("#vd-users-label");
      if (ulabel) ulabel.textContent = v === "restricted"
        ? "選擇授權人員（必選）"
        : "額外授權人員（選填，部門成員以外也能看）";
      m.card.querySelector("#vd-confirm").style.display = v === "confidential" ? "" : "none";
      // 密碼欄：pickMode 且非 collectPassword 才隱藏；其餘顯示（department 也保留以便加授權人員）
      m.card.querySelector("#vd-pw-wrap").style.display = (pickMode && !collectPassword) ? "none" : "";
      const pwLabel = m.card.querySelector("#vd-pw-wrap label");
      if (pwLabel) pwLabel.textContent = v === "department"
        ? "您的登入密碼（若新增額外授權人員需確認）"
        : "您的登入密碼（高風險變更需確認）";
      if (showUsers) renderUserList("");
    }
    sel.addEventListener("change", refreshSections);
    refreshSections();

    // dept chip toggle
    m.card.querySelectorAll(".kb-dept-chip").forEach((chip) => {
      chip.addEventListener("click", () => {
        const on = chip.style.background.includes("0, 155, 203") || chip.style.background.includes("#009BCB") || chip.style.color === "rgb(255, 255, 255)";
        if (on) { chip.style.background = "#fff"; chip.style.color = "#475569"; chip.style.borderColor = "#cbd5e1"; chip.dataset.on = ""; }
        else { chip.style.background = "#009BCB"; chip.style.color = "#fff"; chip.style.borderColor = "#009BCB"; chip.dataset.on = "1"; }
      });
      if (curAllowed.includes(chip.dataset.d)) chip.dataset.on = "1";
    });
    const usearch = m.card.querySelector("#vd-user-search");
    if (usearch) usearch.addEventListener("input", () => renderUserList(usearch.value));

    m.card.querySelector("#vd-close").onclick = m.close;
    m.card.querySelector("#vd-cancel").onclick = m.close;
    m.card.querySelector("#vd-save").onclick = async () => {
      const v = sel.value;
      const body = { visibility: v };
      if (v === "selected_departments") {
        body.allowed_departments = Array.from(m.card.querySelectorAll(".kb-dept-chip"))
          .filter((c) => c.dataset.on === "1").map((c) => c.dataset.d);
        if (body.allowed_departments.length === 0) { toast("請至少選一個部門", "error"); return; }
      }
      if (v === "restricted") {
        body.access_list = Array.from(selectedUserIds);
        if (body.access_list.length === 0) { toast("請至少選一名授權人員", "error"); return; }
      } else if (["department", "selected_departments", "public"].includes(v)) {
        // 混合模式：額外授權人員（選填）
        const extra = Array.from(selectedUserIds);
        if (extra.length) body.access_list = extra;
      }
      if (v === "confidential") {
        body.confirm_confidential = m.card.querySelector("#vd-confirm-cb").checked;
        if (!body.confirm_confidential) { toast("請勾選確認", "error"); return; }
      }
      // pickMode：只回傳設定，不打 API。collectPassword 時非 department 需附密碼
      if (pickMode) {
        if (collectPassword) {
          const needsPw = (v !== "department") || (body.access_list && body.access_list.length > 0);
          if (needsPw) {
            const pw = m.card.querySelector("#vd-pw").value;
            if (!pw) { toast("請輸入密碼確認", "error"); return; }
            body.step_up_password = pw;
          }
        }
        m.close();
        if (typeof opts.onPick === "function") opts.onPick(body);
        return;
      }
      // 需密碼：非 department，或 department 但有額外授權人員（皆屬擴大存取）
      const needsPw = (v !== "department") || (body.access_list && body.access_list.length > 0);
      if (needsPw) {
        const pw = m.card.querySelector("#vd-pw").value;
        if (!pw) { toast("請輸入密碼確認", "error"); return; }
        body.step_up_password = pw;
      }
      const r = await api(`/api/documents/${doc.id}/visibility`, {
        method: "PATCH", body: JSON.stringify(body),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) { toast(errMsg(j, "變更失敗"), "error"); return; }
      toast("可見度已更新", "ok");
      m.close();
      openDocView(doc.id);  // 重新載入
    };
  }
  NS.openVisibilityDialog = openVisibilityDialog;

  // ===== 分享 dialog（L7）— 點分享即產生連結，只顯示網址 + 複製 + 關閉 =====
  async function openShareDialog(doc) {
    // 直接建立（或重用）分享連結
    const r = await api(`/api/documents/${doc.id}/share`, { method: "POST", body: "{}" });
    const j = await r.json().catch(() => ({}));
    if (!r.ok) { toast(errMsg(j, "建立分享失敗"), "error"); return; }
    const fullUrl = window.location.origin + "/share/" + j.token;

    const m = _kbModal(`
      <div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">
        <div style="font-size:15px;font-weight:600;color:#0b1f33;">分享文件</div>
        <button id="sh-x" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button>
      </div>
      <div style="padding:20px 22px;">
        <div style="font-size:12px;color:#64748b;margin-bottom:10px;">🔒 連結需登入且具備檢視權限才能開啟</div>
        <div style="display:flex;gap:8px;">
          <input id="sh-url" readonly value="${escapeHtml(fullUrl)}" style="flex:1;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;background:#f8fafc;box-sizing:border-box;" />
          <button id="sh-copy" style="padding:0 16px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;">⎘ 複製</button>
        </div>
      </div>
      <div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;">
        <button id="sh-close" style="padding:8px 18px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">關閉</button>
      </div>
    `, 480);

    const urlInput = m.card.querySelector("#sh-url");
    urlInput.focus(); urlInput.select();
    const doCopy = async () => {
      try { await navigator.clipboard.writeText(fullUrl); toast("已複製連結", "ok"); }
      catch (e) { urlInput.select(); document.execCommand("copy"); toast("已複製", "ok"); }
    };
    m.card.querySelector("#sh-copy").onclick = doCopy;
    m.card.querySelector("#sh-x").onclick = m.close;
    m.card.querySelector("#sh-close").onclick = m.close;
  }

  // 極簡 markdown 渲染（標題 / 清單 / 程式碼 / 段落）；XSS 先 escape 再轉
  // 行內 markdown：**粗體** / *斜體* / `code` / [text](url)
  // 輸入：已 escapeHtml 過的字串；用佔位符避免 escape 衝突
  // 極簡 markdown 渲染（含 XSS 安全：先 escape、連結只允許 https?://）抽到 pure.js（已測）
  function renderMarkdown(md) { return Pure.renderMarkdown(md); }

  // ============================================================
  // DASHBOARD 儀表板（L6 順手清 mock，接真實資料）
  // ============================================================
  // ============================================================
  // MY-TASKS 我的待辦（Kanban，唯讀；用真實提交/審核資料填三欄）
  // ============================================================
  function wireMyTasks() {
    const page = document.querySelector('main.page[data-page="my-tasks"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";
    if (!document.getElementById("kbv5-dnd-style")) {
      const st = document.createElement("style");
      st.id = "kbv5-dnd-style";
      st.textContent = ".kbv5-dragging{opacity:.35;}";
      document.head.appendChild(st);
    }
    const obs = new MutationObserver(() => {
      if (page.classList.contains("is-active")) loadMyTasks();
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active")) loadMyTasks();

    // 動作鈕：新增任務 → 建個人待辦；篩選/列表檢視 暫無功能 → 隱藏
    page.querySelectorAll(".page__actions .btn").forEach((btn) => {
      const t = (btn.textContent || "").trim();
      if (t.includes("新增任務")) btn.onclick = (e) => { e.preventDefault(); openTaskModal(null, "open"); };
      else if (t.includes("篩選") || t.includes("列表檢視")) btn.style.display = "none";
    });
    // 每欄「+」→ 在該欄狀態新增任務
    page.querySelectorAll(".kanban-col__add").forEach((b, i) => {
      b.onclick = (e) => { e.preventDefault(); openTaskModal(null, _TASK_COL_STATUS[i] || "open"); };
    });
  }

  function _kanbanCard(type, cls, title, metaParts, onClick) {
    const card = document.createElement("div");
    card.className = "kanban-card";
    card.style.cursor = onClick ? "pointer" : "default";
    card.innerHTML =
      `<span class="kanban-card__type ${cls}">${escapeHtml(type)}</span>` +
      `<div class="kanban-card__title">${escapeHtml(title)}</div>` +
      `<div class="kanban-card__meta">${metaParts.map((m) => `<span>${escapeHtml(m)}</span>`).join("")}</div>`;
    if (onClick) card.addEventListener("click", onClick);
    return card;
  }

  async function loadMyTasks() {
    const page = document.querySelector('main.page[data-page="my-tasks"]');
    if (!page || !Auth.access) return;
    const role = (Auth.user && Auth.user.role) || "user";
    const canReview = ["admin", "senior_manager", "manager"].includes(role);
    // flash 修復：先同步清掉 mockup 寫死的假看板卡，再抓資料（否則抓資料期間假卡會閃出）
    page.querySelectorAll(".kanban-card, .kbv5-empty").forEach((k) => k.remove());
    const [mineR, pendR, tasksR] = await Promise.all([
      api("/api/pending/me").catch(() => null),
      canReview ? api("/api/reviews/pending").catch(() => null) : Promise.resolve(null),
      api("/api/tasks").catch(() => null),
    ]);
    let mine = [], reviewQ = [], tasks = [];
    if (mineR && mineR.ok) mine = await mineR.json();
    if (pendR && pendR.ok) reviewQ = await pendR.json();
    if (tasksR && tasksR.ok) tasks = await tasksR.json();

    const cols = page.querySelectorAll(".kanban-col");
    if (cols.length < 3) return;
    const bodies = Array.from(cols).map((c) => {
      c.querySelectorAll(".kanban-card, .kbv5-empty").forEach((k) => k.remove());
      return c;  // append cards directly to col (cards are direct children after header)
    });
    const titleOf = (p) => (p.ai_meta && p.ai_meta.title) || "（未命名）";

    // 第一欄「待處理」：待我審核（reviewer）+ 我被退回需重送
    const col1 = [];
    if (canReview) {
      reviewQ.forEach((p) => col1.push(_kanbanCard("📋 待我審核", "kanban-card__type--review",
        titleOf(p), [`📁 ${p.submitter_department || ""}`, reviewTimeLabel(p.created_at)],
        () => openReviewModalForPid(p.id))));
    }
    mine.filter((p) => p.status === "rejected").forEach((p) => col1.push(
      _kanbanCard("📋 被退回·需重送", "kanban-card__type--review", titleOf(p),
        [reviewTimeLabel(p.updated_at)], () => openMySubmissionModal(p.id))));

    // 第二欄「進行中」：我的草稿 + 送審中
    const col2 = [];
    mine.filter((p) => p.status === "draft" || p.status === "ai_ready").forEach((p) => col2.push(
      _kanbanCard("📝 我的草稿", "kanban-card__type--draft", titleOf(p),
        [reviewTimeLabel(p.updated_at)], () => openMySubmissionModal(p.id))));
    mine.filter((p) => p.status === "pending").forEach((p) => col2.push(
      _kanbanCard("⏳ 送審中", "kanban-card__type--reply", titleOf(p),
        [reviewTimeLabel(p.updated_at)], () => openMySubmissionModal(p.id))));

    // 第三欄「完成」：已核准收錄
    const col3 = [];
    mine.filter((p) => p.status === "approved").forEach((p) => col3.push(
      _kanbanCard("✓ 已收錄", "kanban-card__type--review", titleOf(p),
        [reviewTimeLabel(p.reviewed_at || p.updated_at)],
        p.target_document_id ? () => openDocView(p.target_document_id) : null)));

    // 個人待辦（可拖曳改狀態 + 排序）：集中放每欄「最上面」成一組，方便拖曳重排
    const taskCards = { open: [], in_progress: [], done: [] };
    tasks.forEach((t) => (taskCards[t.status] || taskCards.open).push(_taskCard(t)));
    col1.unshift(...taskCards.open);
    col2.unshift(...taskCards.in_progress);
    col3.unshift(...taskCards.done);

    [[bodies[0], col1], [bodies[1], col2], [bodies[2], col3]].forEach(([col, cards]) => {
      const countEl = col.querySelector(".kanban-col__count");
      if (countEl) countEl.textContent = String(cards.length);
      cards.forEach((c) => col.appendChild(c));
      if (cards.length === 0) {
        const empty = document.createElement("div");
        empty.className = "kbv5-empty";
        empty.style.cssText = "padding:14px;color:var(--text-3);font-size:12px;text-align:center;";
        empty.textContent = "（無）";
        col.appendChild(empty);
      }
    });

    // 標題列統計 + 導覽 badge
    const sub = page.querySelector(".page__title-group p");
    const total = col1.length + col2.length + col3.length;
    if (sub) sub.textContent = `共 ${total} 項 · 待處理 ${col1.length} · 進行中 ${col2.length} · 完成 ${col3.length}`;
    const badge = document.querySelector('[data-page="my-tasks"] span');
    if (badge && /^\d+$/.test((badge.textContent || "").trim())) badge.textContent = String(col1.length + col2.length);

    _wireKanbanDnD(page);
  }
  NS.loadMyTasks = loadMyTasks;

  const _TASK_COL_STATUS = ["open", "in_progress", "done"];
  let _dragEl = null;
  const _taskMap = {};  // id -> task 資料（給編輯用）

  function _dueInfo(t) {
    // 回傳 {label, color, border}：逾期紅、≤2天琥珀、否則正常；已完成不提醒
    if (!t.due_at) return null;
    const d = String(t.due_at).slice(0, 10);
    if (t.status === "done") return { label: `⏱ ${d}`, color: "var(--text-3)", border: "" };
    const dueDate = new Date(d + "T23:59:59");
    if (isNaN(dueDate.getTime())) return { label: `⏱ ${d}`, color: "var(--text-3)", border: "" };
    const today = new Date(); today.setHours(0, 0, 0, 0);
    const diff = Math.floor((dueDate - today) / 86400000);
    if (diff < 0) return { label: `⏱ 已逾期 ${d}`, color: "var(--danger,#dc2626)", border: "var(--danger,#dc2626)" };
    if (diff === 0) return { label: `⏱ 今天到期 ${d}`, color: "var(--danger,#dc2626)", border: "var(--danger,#dc2626)" };
    if (diff <= 2) return { label: `⏱ 剩 ${diff} 天 ${d}`, color: "var(--warn,#d97706)", border: "var(--warn,#d97706)" };
    return { label: `⏱ ${d}`, color: "var(--text-3)", border: "" };
  }

  function _applyTaskDue(card, t) {
    // 依目前 t.status 重算到期樣式（拖到完成/移出完成時即時更新）
    const di = _dueInfo(t);
    card.style.borderLeft = (di && di.border) ? `4px solid ${di.border}` : "";
    const meta = card.querySelector(".kanban-card__meta");
    if (!meta) return;
    let dueEl = meta.querySelector(".kbv5-due");
    if (di) {
      if (!dueEl) { dueEl = document.createElement("span"); dueEl.className = "kbv5-due"; meta.appendChild(dueEl); }
      dueEl.textContent = di.label;
      dueEl.style.color = di.color;
      dueEl.style.fontWeight = "600";
    } else if (dueEl) {
      dueEl.remove();
    }
  }

  function _taskCard(t) {
    _taskMap[t.id] = t;
    const card = document.createElement("div");
    card.className = "kanban-card kbv5-task";
    card.draggable = true;
    card.dataset.taskId = t.id;
    const di = _dueInfo(t);
    if (di && di.border) card.style.borderLeft = `4px solid ${di.border}`;
    const dueHtml = di ? `<span class="kbv5-due" style="color:${di.color};font-weight:600;">${escapeHtml(di.label)}</span>` : "";
    card.innerHTML =
      `<span class="kanban-card__type kanban-card__type--assigned">📝 待辦</span>` +
      `<span style="float:right;display:inline-flex;gap:10px;">` +
        `<button class="kbv5-task-edit" title="編輯" style="border:0;background:transparent;color:#94a3b8;cursor:pointer;font-size:13px;line-height:1;">✎</button>` +
        `<button class="kbv5-task-del" title="刪除" style="border:0;background:transparent;color:#94a3b8;cursor:pointer;font-size:13px;line-height:1;">✕</button></span>` +
      `<div class="kanban-card__title">${escapeHtml(t.title)}</div>` +
      `<div class="kanban-card__meta">${t.body ? `<span>${escapeHtml(t.body.slice(0, 40))}</span>` : ""}${dueHtml}</div>`;
    card.addEventListener("dragstart", (e) => {
      _dragEl = card;
      e.dataTransfer.setData("text/plain", String(t.id));
      e.dataTransfer.effectAllowed = "move";
      // 用 setTimeout 讓拖曳殘影是「實心原卡」，之後才把原位卡淡化為佔位
      setTimeout(() => card.classList.add("kbv5-dragging"), 0);
    });
    card.addEventListener("dragend", () => { card.classList.remove("kbv5-dragging"); _dragEl = null; });
    card.querySelector(".kbv5-task-del").addEventListener("click", async (e) => {
      e.stopPropagation();
      const r = await api(`/api/tasks/${t.id}`, { method: "DELETE" });
      if (r.ok) { card.remove(); _refreshKanbanCounts(); toast("已刪除任務", "info"); }
    });
    card.querySelector(".kbv5-task-edit").addEventListener("click", (e) => {
      e.stopPropagation(); openTaskModal(t);
    });
    return card;
  }

  function _getDragAfter(col, y) {
    const cards = [...col.querySelectorAll(".kbv5-task:not(.kbv5-dragging)")];
    let best = { offset: -Infinity, el: null };
    for (const c of cards) {
      const box = c.getBoundingClientRect();
      const offset = y - box.top - box.height / 2;
      if (offset < 0 && offset > best.offset) best = { offset, el: c };
    }
    return best.el;
  }

  function _refreshKanbanCounts() {
    const page = document.querySelector('main.page[data-page="my-tasks"]');
    if (!page) return;
    const cols = page.querySelectorAll(".kanban-col");
    cols.forEach((col) => {
      const n = col.querySelectorAll(".kanban-card").length;
      const cnt = col.querySelector(".kanban-col__count");
      if (cnt) cnt.textContent = String(n);
      col.querySelectorAll(".kbv5-empty").forEach((e) => e.remove());
      if (n === 0) {
        const empty = document.createElement("div");
        empty.className = "kbv5-empty";
        empty.style.cssText = "padding:14px;color:var(--text-3);font-size:12px;text-align:center;";
        empty.textContent = "（無）";
        col.appendChild(empty);
      }
    });
    const sub = page.querySelector(".page__title-group p");
    const c = [...cols].map((col) => col.querySelectorAll(".kanban-card").length);
    if (sub) sub.textContent = `共 ${c[0] + c[1] + c[2]} 項 · 待處理 ${c[0]} · 進行中 ${c[1]} · 完成 ${c[2]}`;
  }

  function _wireKanbanDnD(page) {
    const cols = page.querySelectorAll(".kanban-col");
    cols.forEach((col, i) => {
      if (col.dataset.kbv5Dnd === "1") return;
      col.dataset.kbv5Dnd = "1";
      col.addEventListener("dragover", (e) => {
        if (!_dragEl) return;  // 只接受任務卡（提交衍生卡不可拖）
        e.preventDefault();
        col.querySelectorAll(".kbv5-empty").forEach((x) => x.remove());
        const after = _getDragAfter(col, e.clientY);
        if (after) { col.insertBefore(_dragEl, after); return; }
        // 任務卡集中在每欄最上：放在第一張「非任務卡」之前（即任務組末端）
        const firstSub = col.querySelector(".kanban-card:not(.kbv5-task)");
        if (firstSub) col.insertBefore(_dragEl, firstSub);
        else col.appendChild(_dragEl);
      });
      col.addEventListener("drop", async (e) => {
        e.preventDefault();
        if (!_dragEl) return;
        const card = _dragEl;
        const tid = parseInt(card.dataset.taskId, 10);
        const status = _TASK_COL_STATUS[i] || "open";
        const t = _taskMap[tid];
        const changed = !!(t && t.status !== status);
        // 樂觀更新：先在前端套用新狀態 + 重算到期樣式（含拖入/拖出「完成」即時更新），再持久化
        if (t) { t.status = status; _applyTaskDue(card, t); }
        _refreshKanbanCounts();
        try {
          if (changed) await api(`/api/tasks/${tid}`, { method: "PATCH", body: JSON.stringify({ status }) });
          const ids = [...col.querySelectorAll(".kbv5-task")].map((c) => parseInt(c.dataset.taskId, 10));
          await api("/api/tasks/reorder", { method: "POST", body: JSON.stringify({ ids }) });
        } catch (x) { toast("移動儲存失敗，請重整", "error"); }
      });
    });
  }

  // 新增 / 編輯任務共用 modal（含到期日）。task 為 null = 新增（status 指定建立欄）。
  function openTaskModal(task, status) {
    const isEdit = !!task;
    const css = "width:100%;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;box-sizing:border-box;margin-top:4px;";
    const m = _kbModal(
      `<div style="padding:18px 22px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;"><div style="font-size:15px;font-weight:600;color:#0b1f33;">${isEdit ? "編輯任務" : "新增任務"}</div><button id="tk-x" style="border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;">✕</button></div>` +
      `<div style="padding:18px 22px;">` +
      `<label style="font-size:12px;color:#475569;">標題</label><input id="tk-title" style="${css}" value="${task ? escapeHtml(task.title) : ""}" placeholder="例：整理本週刀具清單">` +
      `<label style="font-size:12px;color:#475569;margin-top:12px;display:block;">備註（選填）</label><textarea id="tk-body" style="${css};min-height:90px;font-size:13px;">${task ? escapeHtml(task.body || "") : ""}</textarea>` +
      `<label style="font-size:12px;color:#475569;margin-top:12px;display:block;">到期日（選填）</label><input id="tk-due" type="date" style="${css}" value="${task ? escapeHtml((task.due_at || "").slice(0, 10)) : ""}">` +
      `<div id="tk-err" style="display:none;margin-top:10px;font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:8px 10px;"></div></div>` +
      `<div style="padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;"><button id="tk-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">取消</button><button id="tk-save" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">${isEdit ? "儲存" : "建立"}</button></div>`, 460);
    const err = m.card.querySelector("#tk-err");
    m.card.querySelector("#tk-x").onclick = m.close; m.card.querySelector("#tk-cancel").onclick = m.close;
    m.card.querySelector("#tk-save").addEventListener("click", async () => {
      err.style.display = "none";
      const title = m.card.querySelector("#tk-title").value.trim();
      if (!title) { err.textContent = "請輸入標題"; err.style.display = ""; return; }
      const payload = { title, body: m.card.querySelector("#tk-body").value,
                        due_at: m.card.querySelector("#tk-due").value || null };
      let r;
      if (isEdit) {
        r = await api(`/api/tasks/${task.id}`, { method: "PATCH", body: JSON.stringify(payload) });
      } else {
        r = await api("/api/tasks", { method: "POST", body: JSON.stringify(payload) });
      }
      if (!r.ok) { err.textContent = errMsg(await r.json().catch(() => ({})), "儲存失敗"); err.style.display = ""; return; }
      // 新增到非「待處理」欄 → 建立後再改狀態
      if (!isEdit && status && status !== "open") {
        const t = await r.json();
        await api(`/api/tasks/${t.id}`, { method: "PATCH", body: JSON.stringify({ status }) });
      }
      m.close(); toast(isEdit ? "已更新任務" : "已新增任務", "ok"); loadMyTasks();
    });
  }

  // ============ §12.21 標籤分類頁 ============
  function wireTagsPage() {
    const page = document.querySelector('main.page[data-page="tags"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";
    const obs = new MutationObserver(() => {
      if (page.classList.contains("is-active")) loadTagsPage();
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active")) loadTagsPage();
  }

  function _sizeClassForCount(c, max) {
    const ratio = max > 0 ? c / max : 0;
    if (ratio >= 0.7) return "size-xl";
    if (ratio >= 0.4) return "size-lg";
    if (ratio >= 0.2) return "size-md";
    if (ratio >= 0.1) return "size-sm";
    return "size-xs";
  }

  async function loadTagsPage() {
    const page = document.querySelector('main.page[data-page="tags"]');
    if (!page) return;
    // flash 修復：先同步清掉 mockup 寫死的假標籤，再抓資料
    page.querySelectorAll(".tag-cloud__item").forEach((n) => n.remove());
    const r = await api("/api/tags");
    if (!r.ok) return;
    const j = await r.json();
    const items = j.items || [];
    const maxCount = items.reduce((m, x) => Math.max(m, x.count), 0);
    // 清掉 mockup 寫死的 tag-cloud__item + tag-categories 卡片
    const cloud = page.querySelector(".tag-cloud");
    if (cloud) {
      cloud.querySelectorAll(".tag-cloud__item").forEach((n) => n.remove());
      if (items.length === 0) {
        const empty = document.createElement("span");
        empty.style.cssText = "color:var(--text-3);font-size:13px;";
        empty.textContent = "尚無標籤";
        cloud.appendChild(empty);
      } else {
        items.forEach((it) => {
          const span = document.createElement("span");
          span.className = "tag-cloud__item " + _sizeClassForCount(it.count, maxCount);
          span.style.cursor = "pointer";
          span.dataset.tagName = it.name;
          span.innerHTML = `${escapeHtml(it.name)} <span class="tag-cloud__count">${it.count}</span>`;
          span.addEventListener("click", () => openTagDocsModal(it.name));
          cloud.appendChild(span);
        });
      }
    }
    // 隱藏 mockup 寫死的「分類卡片」（沒做分類分組功能，避免混淆）
    const cats = page.querySelector(".tag-categories");
    if (cats) cats.style.display = "none";
    // ⑩#5：隱藏 mockup 寫死的「標籤下文件」inline 假清單（CNC 128 篇假資料）；
    // 真實「點標籤看文件」走 openTagDocsModal 彈窗
    const related = page.querySelector(".tag-related-list");
    if (related) related.style.display = "none";
    // header 統計
    const headerP = page.querySelector(".page__title-group p");
    if (headerP) headerP.textContent = `共 ${j.total} 個標籤 · 點擊查看含該標籤的文件`;
    // 隱藏 mockup 的「管理 / 新增標籤」按鈕（後端目前無此 API；標籤從文件 tags 聚合）
    page.querySelectorAll(".page__actions .btn").forEach((b) => b.style.display = "none");
  }

  async function openTagDocsModal(tag) {
    const r = await api(`/api/tags/${encodeURIComponent(tag)}/documents`);
    if (!r.ok) { toast("讀取失敗", "error"); return; }
    const j = await r.json();
    const itemsHtml = j.items.map((d) => `<div data-doc="${d.id}" style="padding:10px 12px;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:8px;cursor:pointer;">
      <div style="font-weight:600;color:#0b1f33;">${escapeHtml(d.title)}</div>
      <div style="font-size:11px;color:#64748b;margin-top:2px;">${escapeHtml(d.owner_department || "")} · ${reviewTimeLabel(d.updated_at)}</div>
      <div style="font-size:12px;color:#475569;margin-top:4px;">${escapeHtml(d.summary || "")}</div>
    </div>`).join("") || '<div style="color:#94a3b8;text-align:center;padding:20px;">無文件</div>';
    const m = _kbModal(`<div style="padding:18px 24px;border-bottom:1px solid #e2e8f0;">
      <div style="font-size:16px;font-weight:600;">🏷️ #${escapeHtml(tag)} · ${j.count} 篇</div></div>
      <div style="padding:18px 24px;max-height:60vh;overflow:auto;">${itemsHtml}</div>`, { maxWidth: 600 });
    m.element.querySelectorAll("[data-doc]").forEach((row) =>
      row.addEventListener("click", () => { m.close(); NS.openDocView(parseInt(row.dataset.doc, 10)); }));
  }

  // ============ §12.19 媒體庫（跨文件附件總覽） ============
  function wireAttachmentsPage() {
    const page = document.querySelector('main.page[data-page="attachments"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";
    const obs = new MutationObserver(() => {
      if (page.classList.contains("is-active")) loadAttachmentsPage();
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active")) loadAttachmentsPage();
    // tab 切換（mockup 用 data-type=all/image/pdf/video/doc）
    const tabs = page.querySelectorAll(".media-type-tabs [data-type]");
    tabs.forEach((t) => t.addEventListener("click", () => {
      tabs.forEach((x) => x.classList.remove("is-active"));
      t.classList.add("is-active");
      loadAttachmentsPage(t.dataset.type);
    }));
    // 隱藏 mockup「上傳檔案 / 匯出清單」按鈕（D97 禁下載 + 上傳須綁 doc）
    page.querySelectorAll(".page__actions .btn").forEach((b) => b.style.display = "none");
  }

  const _MIME_FILTER = {
    all: null, image: "image/", pdf: "application/pdf",
    video: "video/", doc: "application/",
  };

  async function loadAttachmentsPage(typeKey) {
    const page = document.querySelector('main.page[data-page="attachments"]');
    if (!page) return;
    const grid = page.querySelector(".media-grid");
    if (!grid) return;
    const prefix = _MIME_FILTER[typeKey || "all"];
    const url = "/api/attachments" + (prefix ? `?mime_prefix=${encodeURIComponent(prefix)}` : "");
    const r = await api(url);
    grid.querySelectorAll(".media-card").forEach((n) => n.remove());
    if (!r.ok) return;
    const j = await r.json();
    if (j.count === 0) {
      const empty = document.createElement("div");
      empty.style.cssText = "grid-column:1/-1;text-align:center;color:#94a3b8;padding:30px;";
      empty.textContent = "沒有附件";
      grid.appendChild(empty);
    }
    j.items.forEach((it) => {
      const isVid = it.mime_type.startsWith("video/");
      const thumbKind = Pure.mediaThumbKind(it.mime_type);
      const ext = (it.filename.split(".").pop() || "?").toUpperCase().slice(0, 5);
      const sizeKB = Pure.fmtKB(it.size_bytes);
      const card = document.createElement("div");
      card.className = "media-card";
      card.style.cursor = "pointer";
      card.innerHTML = `<div class="media-card__thumb media-card__thumb--${thumbKind}">
        <span class="media-card__type-badge">${isVid ? "▶ " : ""}${escapeHtml(ext)}</span></div>
        <div class="media-card__body">
          <div class="media-card__name">${escapeHtml(it.filename)}</div>
          <div class="media-card__meta"><span>${sizeKB} KB</span><span>${reviewTimeLabel(it.uploaded_at)}</span></div>
          <div class="media-card__source">↳ ${escapeHtml(it.doc_title)}</div>
        </div>`;
      card.addEventListener("click", () => openAttachmentPreview(it.document_id, it.id, it.mime_type, it.filename));
      grid.appendChild(card);
    });
    // header 統計（mockup 寫死 1,284 / 8.7 GB → 改真實）
    const headerP = page.querySelector(".page__title-group p");
    if (headerP) {
      const totalMB = Pure.fmtMB(j.total_bytes, 1);
      headerP.textContent = `跨文件附件總覽 · 共 ${j.count} 個 · ${totalMB} MB（D97：僅線上預覽、不下載）`;
    }
    // ⑩#7：tab 計數原本寫死（圖片742/PDF318/影片47/文件177）→ 改用後端 type_counts。
    // type_counts 只在首載（無 mime_prefix）回傳；過濾切換時沿用上次快取，不歸零。
    if (j.type_counts) _attachTypeCounts = j.type_counts;
    const tc = _attachTypeCounts;
    if (tc) {
      const LBL = { all: "全部", image: "圖片", pdf: "PDF", video: "影片", doc: "文件" };
      page.querySelectorAll(".media-type-tabs [data-type]").forEach((b) => {
        const k = b.dataset.type;
        if (LBL[k] != null && tc[k] != null) b.textContent = `${LBL[k]} ${tc[k]}`;
      });
    } else {
      const allTab = page.querySelector(".media-type-tabs [data-type='all']");
      if (allTab) allTab.textContent = `全部 ${j.count}`;
    }
  }
  let _attachTypeCounts = null;

  // ============ §12.x 個人主頁 ============
  function wireProfilePage() {
    const page = document.querySelector('main.page[data-page="profile"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";
    const obs = new MutationObserver(() => {
      if (page.classList.contains("is-active")) loadProfilePage();
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active")) loadProfilePage();
  }
  NS.openProfile = function (userId) { NS._profileUserId = userId; window.switchPage("profile"); };

  async function loadProfilePage() {
    const page = document.querySelector('main.page[data-page="profile"]');
    if (!page) return;
    const uid = NS._profileUserId || (Auth.user && Auth.user.id);
    if (!uid) return;
    // flash 修復：先同步清掉 mockup 寫死的假貢獻列，再抓資料
    page.querySelectorAll(".contrib-row").forEach((n) => n.remove());
    // Phase5-G：併發拉 profile / heatmap / tags（後端 API §19.12）
    const [pr, hr, tr] = await Promise.all([
      api(`/api/profile/${uid}`),
      api(`/api/profile/${uid}/heatmap`),
      api(`/api/profile/${uid}/tags`),
    ]);
    if (!pr.ok) { toast("讀取個人主頁失敗", "error"); return; }
    const prof = await pr.json();
    const heat = hr.ok ? await hr.json() : { days: [], max_count: 0, total: 0 };
    const tagsResp = tr.ok ? await tr.json() : { items: [] };
    const u = prof.user;

    // ── Hero ──
    const nameEl = page.querySelector(".profile-hero__name");
    if (nameEl) nameEl.textContent = u.display_name || u.username;
    const idEl = page.querySelector(".profile-hero__id");
    if (idEl) idEl.textContent = `@${u.username} · ${u.department || "（未設部門）"} · ${u.role}`;
    const avatar = page.querySelector(".profile-hero__avatar");
    if (avatar) avatar.textContent = (u.display_name || u.username || "?").slice(0, 1);
    const chips = page.querySelector(".profile-hero__chips");
    if (chips) {
      chips.innerHTML = "";
      const _chip = (txt) => {
        const s = document.createElement("span");
        s.className = "profile-hero__chip";
        s.textContent = txt;
        return s;
      };
      if (u.department) chips.appendChild(_chip(u.department));
      if (u.extension) chips.appendChild(_chip("分機 " + u.extension));
      if (u.email) chips.appendChild(_chip(u.email));
      if (u.created_at) chips.appendChild(_chip("加入於 " + _localDate(u.created_at)));
    }
    // 隱藏假按鈕（編輯個人資料/傳訊息）
    page.querySelectorAll(".profile-hero__actions").forEach((n) => n.style.display = "none");

    // ── 4 stats（負責文件 / 已審核 / 總瀏覽 / 最後活動）──
    const stats = prof.stats || {};
    const statCards = page.querySelectorAll(".profile-stats .profile-stat");
    const _setStat = (idx, label, value, delta) => {
      const card = statCards[idx];
      if (!card) return;
      const l = card.querySelector(".profile-stat__label");
      const v = card.querySelector(".profile-stat__value");
      const d = card.querySelector(".profile-stat__delta");
      if (l) l.textContent = label;
      if (v) v.textContent = value;
      if (d) { d.textContent = delta; d.style.color = "var(--text-3)"; }
    };
    _setStat(0, "負責文件", String(stats.documents || 0), "可見的本人著作");
    _setStat(1, "已審核通過", String(stats.approved_count || 0), "歷史核准數");
    _setStat(2, "總瀏覽數", String(stats.total_views || 0), "累計 / 可見文件");
    _setStat(3, "最後活動", stats.last_active ? (stats.last_active || "").slice(0, 10) : "—", "audit_log");

    // ⑩#6：「近期貢獻」tab 計數原本寫死 負責(28)/協作(12)/已審核(47)
    // → 負責=documents、已審核=approved_count（後端無「協作」欄位 → 去掉數字避免假值）
    const ptabs = page.querySelectorAll(".profile-main__tabs button");
    if (ptabs[0]) ptabs[0].textContent = `負責 (${stats.documents || 0})`;
    if (ptabs[1]) ptabs[1].textContent = "協作";
    if (ptabs[2]) ptabs[2].textContent = `已審核 (${stats.approved_count || 0})`;

    // ── 標籤雲（.profile-tag-cloud）──
    const cloud = page.querySelector(".profile-tag-cloud");
    if (cloud) {
      cloud.innerHTML = "";
      const items = tagsResp.items || [];
      if (items.length === 0) {
        cloud.innerHTML = '<span style="font-size:12px;color:var(--text-3);">尚無標籤</span>';
      } else {
        items.forEach((t) => {
          const s = document.createElement("span");
          const sz = t.size && t.size !== "md" ? `profile-tag--${t.size}` : "";
          s.className = `profile-tag ${sz}`.trim();
          s.textContent = t.name;
          s.title = `${t.count} 篇`;
          cloud.appendChild(s);
        });
      }
    }

    // ── heatmap 下方 summary（mockup 寫死 142 次 → 改 API total / 平均）──
    // 找 .profile-card 內含「90 天」標題那張的最後一個 <div>（mockup 第 12556 行）
    const heatCard = Array.from(page.querySelectorAll(".profile-card")).find((c) => {
      const t = c.querySelector(".profile-card__title");
      return t && (t.textContent || "").includes("90 天");
    });
    if (heatCard) {
      // 用 lastElementChild：mockup 的 summary 永遠在卡片最後一格
      // （字級 MutationObserver 會把 margin-top:8px → margin-top: 8px 加空格，attribute selector 不可靠）
      const summaryLine = heatCard.lastElementChild;
      if (summaryLine && (summaryLine.textContent || "").includes("90 天")) {
        const total = (heat.days || []).reduce((s, d) => s + (d.count || 0), 0);
        const avg = total === 0 ? "0" : (total / 91).toFixed(1);
        summaryLine.innerHTML = `過去 90 天共 <b style="color:var(--text-1);">${total}</b> 次操作 · 平均 ${avg} 次 / 天`;
      }
    }
    // ── 隱藏 mockup「所屬團隊 / 聯絡資訊」(後端目前無 API；後續 phase 補) ──
    Array.from(page.querySelectorAll(".profile-card")).forEach((c) => {
      const t = c.querySelector(".profile-card__title");
      const txt = t && t.textContent ? t.textContent : "";
      if (txt.includes("所屬團隊") || txt.includes("聯絡資訊")) c.style.display = "none";
    });

    // ── 熱力圖（13 週 × 7 天 = 91 cells）──
    // mockup 為 7 個 .heatmap-row，每 row 13 cells（橫軸=週、縱軸=星期幾）
    // API 回傳 91 days（最早 → 今天）→ 換算成 7×13：rowIdx = i % 7, colIdx = floor(i / 7)
    const heatRows = page.querySelectorAll(".heatmap-row");
    if (heatRows.length === 7) {
      // 先清乾淨
      heatRows.forEach((r) => { r.innerHTML = ""; });
      // 預先建 91 個空 cell，依 (row, col) 放
      const grid = Array.from({ length: 7 }, () => Array(13).fill(null));
      (heat.days || []).forEach((d, i) => {
        const row = i % 7;
        const col = Math.floor(i / 7);
        if (col < 13) grid[row][col] = d;
      });
      for (let r = 0; r < 7; r++) {
        for (let c = 0; c < 13; c++) {
          const d = grid[r][c];
          const cell = document.createElement("div");
          const lvl = d ? (d.level || 0) : 0;
          cell.className = "heatmap-cell" + (lvl > 0 ? ` heatmap-cell--l${lvl}` : "");
          if (d) cell.title = `${d.date}：${d.count} 次活動`;
          heatRows[r].appendChild(cell);
        }
      }
    }

    // ── 近期貢獻（.contrib-row 清掉 mockup 假資料 → 換真實 prof.recent_contributions）──
    const profileMain = page.querySelector(".profile-main");
    if (profileMain) {
      profileMain.querySelectorAll(".contrib-row").forEach((n) => n.remove());
      const recent = prof.recent_contributions || [];
      const head = profileMain.querySelector(".profile-main__head");
      const fmtTime = (iso) => {
        try { return reviewTimeLabel(iso); } catch (e) { return (iso || "").slice(0, 10); }
      };
      if (recent.length === 0) {
        const empty = document.createElement("div");
        empty.style.cssText = "padding:18px;text-align:center;font-size:12px;color:var(--text-3);";
        empty.textContent = "尚無可見文件";
        if (head && head.parentNode) head.after(empty);
        else profileMain.appendChild(empty);
      } else {
        recent.forEach((d) => {
          const row = document.createElement("div");
          row.className = "contrib-row";
          row.style.cursor = "pointer";
          row.innerHTML = `
            <div>
              <div class="contrib-row__title">${escapeHtml(d.title || "")}</div>
              <div class="contrib-row__path">📁 ${escapeHtml(d.owner_department || "")} / ${escapeHtml(d.category || "")}</div>
            </div>
            <div class="contrib-row__meta">${escapeHtml(d.visibility || "")}</div>
            <div class="contrib-row__meta">${escapeHtml(fmtTime(d.updated_at))}</div>
            <div class="contrib-row__count">${d.view_count || 0}</div>`;
          row.addEventListener("click", () => NS.openDocView(d.id));
          profileMain.appendChild(row);
        });
      }
      // 隱藏 mockup 的「展開全部」假連結
      const expand = profileMain.querySelector("div[style*='text-align:center']");
      if (expand) expand.style.display = "none";
    }

    // 把舊版插入的「最近文件」block 清掉（若存在）
    page.querySelectorAll("[data-kbv5-profile-docs]").forEach((n) => n.remove());
  }

  // ============ Phase5-C §12.17 進階搜尋頁 ============

  // UI label → backend field whitelist 對應
  const _ADV_FIELD_MAP = {
    "部門": "department", "標籤": "tags", "作者": "author",
    "標題": "title", "內文": "body",
    "更新日期": "updated_at", "建立日期": "created_at",
    "可見度": "visibility",
    // 「檔案類型」「附件數」後端不支援 → 隱藏
  };
  const _ADV_OP_MAP = {
    "等於": "eq", "不等於": "ne", "包含": "contains", "開頭為": "startswith",
    "包含任一": "contains_any", "包含全部": "contains_all", "不包含": "not_contains",
    "晚於": "after", "早於": "before",
  };

  function _advReadConditions(page) {
    const rows = page.querySelectorAll(".adv-search-form__section .condition-row");
    const conds = [];
    rows.forEach((row) => {
      const selects = row.querySelectorAll("select");
      const inputs = row.querySelectorAll("input");
      if (selects.length < 2 || inputs.length < 1) return;
      const fieldLabel = selects[0].value;
      const opLabel = selects[1].value;
      const field = _ADV_FIELD_MAP[fieldLabel];
      const op = _ADV_OP_MAP[opLabel];
      const val = (inputs[0].value || "").trim();
      if (!field || !op || !val) return;
      // contains_any/all/not 切逗號為 list
      if (["contains_any", "contains_all", "not_contains"].includes(op)) {
        conds.push({ field, op, value: val.split(",").map((s) => s.trim()).filter(Boolean) });
      } else if (field === "author") {
        // 後端 author 對應 author_id（int）→ 試解析 int，否則跳過
        const n = parseInt(val, 10);
        if (!isNaN(n)) conds.push({ field, op, value: n });
      } else {
        conds.push({ field, op, value: val });
      }
    });
    return conds;
  }

  function _advReadScope(page) {
    // bug 修正：之前用 .adv-search-form__section input[type='checkbox'] 把
    // 第一段「基本關鍵字」的 3 個 checkbox（包含同義詞/區分大小寫/啟用正規）
    // 也算進去 → index 3 變成「只搜尋我有權限的」(預設 checked) → 後端 403
    // 改用具體選範圍限定 section
    const sections = page.querySelectorAll(".adv-search-form__section");
    const scopeSec = sections[sections.length - 1];   // 最後一個 section = 範圍限定
    if (!scopeSec) return { include_archived: false, include_drafts: false, include_trash: false };
    const checks = scopeSec.querySelectorAll("input[type='checkbox']");
    // 0: 只搜尋我有權限的（no-op）; 1: 包含已封存; 2: 包含草稿; 3: 包含垃圾桶
    return {
      include_archived: checks[1]?.checked || false,
      include_drafts: checks[2]?.checked || false,
      include_trash: checks[3]?.checked || false,
    };
  }

  function _advReadLogic(page) {
    const active = page.querySelector(".logic-toggle button.is-active");
    const txt = (active?.textContent || "").trim();
    if (txt.startsWith("OR")) return "OR";
    if (txt.startsWith("NOT")) return "NOT";
    return "AND";
  }

  function _advReadKeyword(page) {
    const input = page.querySelector(".adv-search-form__section input[type='text']");
    return (input?.value || "").trim() || null;
  }

  function _advRenderResults(page, data) {
    page.querySelectorAll("[data-kbv5-adv-results]").forEach((n) => n.remove());
    // 結果掛在「左欄 wrapper」內，與 form 並排在 column 1
    // 不被右側「我的查詢」column 2 卡高度
    const leftCol = page.querySelector("[data-kbv5-left-col]") || page.querySelector(".adv-search-form")?.parentNode;
    const form = page.querySelector(".adv-search-form");
    if (!leftCol || !form) return;
    const wrap = document.createElement("div");
    wrap.dataset.kbv5AdvResults = "1";
    wrap.style.cssText = "margin-top:20px;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;";
    const head = `<div style="font-size:14px;font-weight:600;color:#0b1f33;margin-bottom:10px;">搜尋結果（${data.total} 筆）· 引擎 ${data.engine}</div>`;
    if (!data.items || data.items.length === 0) {
      wrap.innerHTML = head + '<div style="color:#94a3b8;font-size:13px;padding:20px;text-align:center;">無符合條件的文件</div>';
      layout.appendChild(wrap);
      return;
    }
    const list = data.items.map((it) => `<div data-doc="${it.id}" style="padding:10px 12px;background:#fff;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:6px;cursor:pointer;">
      <div style="font-weight:600;font-size:13px;color:#0b1f33;">${escapeHtml(it.title)}</div>
      <div style="font-size:11px;color:#94a3b8;margin-top:2px;">${escapeHtml(it.owner_department || "")} · ${escapeHtml(it.visibility)} · ${reviewTimeLabel(it.updated_at)}</div>
      <div style="font-size:12px;color:#475569;margin-top:4px;">${escapeHtml(it.summary || "")}</div>
    </div>`).join("");
    wrap.innerHTML = head + list;
    wrap.querySelectorAll("[data-doc]").forEach((row) =>
      row.addEventListener("click", () => {
        // Phase5-C：記住來源 = 進階搜尋
        _recordSearchReturn("advanced");
        NS.openDocView(parseInt(row.dataset.doc, 10));
      }));
    leftCol.appendChild(wrap);
  }

  function _advAddConditionRow(page, fieldLabel = "標題") {
    const fieldOpts = Object.keys(_ADV_FIELD_MAP).map((k) =>
      `<option ${k === fieldLabel ? "selected" : ""}>${k}</option>`).join("");
    const opOpts = "等於 不等於 包含 開頭為 包含任一 包含全部 不包含 晚於 早於".split(" ")
      .map((k) => `<option>${k}</option>`).join("");
    const row = document.createElement("div");
    row.className = "condition-row";
    row.innerHTML = `<select>${fieldOpts}</select>
      <select>${opOpts}</select>
      <input type="text" placeholder="值..." />
      <button class="condition-row__remove">✕</button>`;
    row.querySelector(".condition-row__remove").addEventListener("click", () => row.remove());
    return row;
  }

  function _advResetForm(page) {
    const keyword = page.querySelector(".adv-search-form__section input[type='text']");
    if (keyword) keyword.value = "";
    // 清所有 condition 列、保留一行空的
    const condSection = page.querySelectorAll(".adv-search-form__section")[1];
    if (condSection) {
      condSection.querySelectorAll(".condition-row").forEach((n) => n.remove());
      const addBtn = condSection.querySelector(".btn--quiet");
      condSection.insertBefore(_advAddConditionRow(page), addBtn);
    }
    // 重設邏輯為 AND
    page.querySelectorAll(".logic-toggle button").forEach((b, i) => {
      if (i === 0) b.classList.add("is-active");
      else b.classList.remove("is-active");
    });
    // 範圍 reset
    const checks = page.querySelectorAll(".adv-search-form__section input[type='checkbox']");
    if (checks[0]) checks[0].checked = true;
    if (checks[1]) checks[1].checked = false;
    if (checks[2]) checks[2].checked = false;
    if (checks[3]) checks[3].checked = false;
    // 清結果
    page.querySelectorAll("[data-kbv5-adv-results]").forEach((n) => n.remove());
  }

  async function _advLoadSavedQueries(page) {
    const side = page.querySelector(".saved-query-side");
    if (!side) return;
    // 清 mockup 5 個假查詢 + 「查看全部」按鈕
    side.querySelectorAll(".saved-query, .btn--quiet").forEach((n) => n.remove());
    const r = await api("/api/search/saved-queries");
    if (!r.ok) return;
    const j = await r.json();
    if (j.count === 0) {
      const empty = document.createElement("div");
      empty.style.cssText = "font-size:12px;color:#94a3b8;padding:8px 0;";
      empty.textContent = "尚無儲存的查詢";
      side.appendChild(empty);
      return;
    }
    j.items.forEach((q) => {
      const item = document.createElement("div");
      item.className = "saved-query";
      item.style.cursor = "pointer";
      const condCount = (q.query?.conditions?.length || 0);
      item.innerHTML = `${q.pinned ? '<span class="saved-query__pin">📌</span>' : ""}
        <div class="saved-query__name">${escapeHtml(q.name)}</div>
        <div class="saved-query__desc">${q.query?.keyword ? '關鍵字「' + escapeHtml(q.query.keyword) + '」' : ""}${condCount > 0 ? " · " + condCount + " 條件" : ""}</div>
        <div style="display:flex;gap:6px;margin-top:6px;font-size:11px;">
          <button data-act="search" style="border:0;background:#009BCB;color:#fff;padding:3px 10px;border-radius:4px;cursor:pointer;font-weight:600;">🔍 搜尋</button>
          <button data-act="pin" style="border:1px solid #cbd5e1;background:#fff;padding:2px 8px;border-radius:4px;cursor:pointer;">${q.pinned ? "取消釘選" : "釘選"}</button>
          <button data-act="del" style="border:1px solid #fecaca;background:#fff;color:#ef4444;padding:2px 8px;border-radius:4px;cursor:pointer;">刪除</button>
        </div>`;
      // 「搜尋」：套用條件 + 立即執行搜尋 + 收折表單
      item.querySelector("[data-act='search']").addEventListener("click", (e) => {
        e.stopPropagation();
        _advApplyQuery(page, q.query);
        toast(`已套用「${q.name}」並搜尋`, "ok");
        _advExecuteSearch(page);
        _advCollapseForm(page, true);
      });
      item.querySelector("[data-act='pin']").addEventListener("click", async (e) => {
        e.stopPropagation();
        await api(`/api/search/saved-queries/${q.id}`, { method: "PUT",
          body: JSON.stringify({ pinned: !q.pinned }) });
        _advLoadSavedQueries(page);
      });
      item.querySelector("[data-act='del']").addEventListener("click", async (e) => {
        e.stopPropagation();
        if (!confirm(`刪除查詢「${q.name}」？`)) return;
        await api(`/api/search/saved-queries/${q.id}`, { method: "DELETE" });
        _advLoadSavedQueries(page);
      });
      side.appendChild(item);
    });
  }

  function _advApplyQuery(page, q) {
    if (!q) return;
    // keyword
    const keyword = page.querySelector(".adv-search-form__section input[type='text']");
    if (keyword) keyword.value = q.keyword || "";
    // conditions
    const condSection = page.querySelectorAll(".adv-search-form__section")[1];
    if (condSection) {
      condSection.querySelectorAll(".condition-row").forEach((n) => n.remove());
      const addBtn = condSection.querySelector(".btn--quiet");
      const _fieldLabel = (field) => Object.keys(_ADV_FIELD_MAP).find((k) => _ADV_FIELD_MAP[k] === field) || "標題";
      const _opLabel = (op) => Object.keys(_ADV_OP_MAP).find((k) => _ADV_OP_MAP[k] === op) || "等於";
      (q.conditions || []).forEach((c) => {
        const row = _advAddConditionRow(page, _fieldLabel(c.field));
        const selects = row.querySelectorAll("select");
        selects[0].value = _fieldLabel(c.field);
        selects[1].value = _opLabel(c.op);
        const val = Array.isArray(c.value) ? c.value.join(", ") : String(c.value || "");
        row.querySelector("input").value = val;
        condSection.insertBefore(row, addBtn);
      });
      if ((q.conditions || []).length === 0) {
        condSection.insertBefore(_advAddConditionRow(page), addBtn);
      }
    }
    // logic
    page.querySelectorAll(".logic-toggle button").forEach((b) => b.classList.remove("is-active"));
    const target = (q.logic || "AND").startsWith("OR") ? 1 : (q.logic || "AND").startsWith("NOT") ? 2 : 0;
    const btns = page.querySelectorAll(".logic-toggle button");
    if (btns[target]) btns[target].classList.add("is-active");
    // scope
    const checks = page.querySelectorAll(".adv-search-form__section input[type='checkbox']");
    if (checks[1]) checks[1].checked = !!q.include_archived;
    if (checks[2]) checks[2].checked = !!q.include_drafts;
    if (checks[3]) checks[3].checked = !!q.include_trash;
  }

  async function _advExecuteSearch(page) {
    const body = {
      keyword: _advReadKeyword(page),
      logic: _advReadLogic(page),
      conditions: _advReadConditions(page),
      ..._advReadScope(page),
    };
    const r = await api("/api/search/advanced", { method: "POST", body: JSON.stringify(body) });
    const j = await r.json().catch(() => ({}));
    if (!r.ok) { toast(errMsg(j, "搜尋失敗"), "error"); return; }
    _advRenderResults(page, j);
    NS._advLastQuery = body;   // 給「儲存查詢」用
  }

  // Pattern 01：mockup 對所有 [data-page] 元素預綁 switchPage click（line 13737）
  // → 必須在 wireup 前 clone+replace，否則我的 listener 註冊晚 → mockup 先跑
  // → switchPage 把頁面切走 → 我的 listener 在已不 active 的頁面跑（→ 結果消失）
  function _stripMockupPageNav(container) {
    container.querySelectorAll('[data-page]').forEach((el) => {
      const clone = el.cloneNode(true);
      el.parentNode.replaceChild(clone, el);
    });
  }

  // Phase5-C：表單收折（搜尋後自動收）+ 「修改條件」按鈕展開
  function _advCollapseForm(page, collapsed) {
    const form = page.querySelector(".adv-search-form");
    const leftCol = page.querySelector("[data-kbv5-left-col]");   // 5C 修正：放在 leftCol 內，
    if (!form || !leftCol) return;                                  // 不要破壞 grid 兩欄結構
    if (collapsed) {
      form.style.display = "none";
      if (!leftCol.querySelector("[data-kbv5-adv-expand]")) {
        const btn = document.createElement("button");
        btn.dataset.kbv5AdvExpand = "1";
        btn.className = "btn btn--ghost";
        btn.style.cssText = "margin-bottom:12px;align-self:flex-start;width:fit-content;";
        btn.innerHTML = "✏ 修改條件";
        btn.addEventListener("click", () => _advCollapseForm(page, false));
        leftCol.insertBefore(btn, leftCol.firstChild);
      }
    } else {
      form.style.display = "";
      leftCol.querySelectorAll("[data-kbv5-adv-expand]").forEach((n) => n.remove());
    }
  }

  // Phase5-C 補：topbar 搜尋列 — mockup 是 div + onclick="switchPage('search')"
  // → 換成真 input，Enter 跳 library + 用 q 觸發實際搜尋
  // §31 應用內回報：more-menu 注入入口 + modal
  function wireFeedbackEntry() {
    const menu = document.querySelector(".more-menu__popover");
    if (!menu || menu.dataset.kbv5Feedback === "1") return;
    menu.dataset.kbv5Feedback = "1";
    const btn = document.createElement("button");
    btn.className = "more-menu__item";
    btn.dataset.kbv5FeedbackBtn = "1";
    btn.innerHTML =
      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">' +
      '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>' +
      "💬 回報問題";
    btn.addEventListener("click", (e) => {
      e.preventDefault(); e.stopPropagation();
      // 關 more-menu
      const more = document.querySelector(".topbar__more");
      if (more) more.classList.remove("is-open");
      openFeedbackModal();
    });
    menu.appendChild(btn);
  }

  function openFeedbackModal(opts = {}) {
    document.querySelectorAll("[data-kbv5-feedback-modal]").forEach((n) => n.remove());
    const ov = document.createElement("div");
    ov.dataset.kbv5FeedbackModal = "1";
    ov.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;";
    const card = document.createElement("div");
    card.style.cssText = "background:var(--surface);border-radius:12px;padding:24px 28px;max-width:480px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,0.3);";
    card.innerHTML =
      `<div style="font-size:17px;font-weight:700;margin-bottom:4px;">💬 回報問題</div>` +
      `<div style="font-size:12px;color:var(--text-3);margin-bottom:16px;">你的回饋會送到管理者，回覆後會通知你。</div>` +
      `<label style="font-size:12px;font-weight:600;color:var(--text-2);">類型</label>` +
      `<select id="kbv5-fb-cat" style="width:100%;padding:8px 10px;margin:4px 0 12px;border:1px solid var(--border);border-radius:6px;">` +
        `<option value="bug">🐛 Bug 回報</option>` +
        `<option value="feature">✨ 功能建議</option>` +
        `<option value="improvement">🔧 改善建議</option>` +
        `<option value="question">❓ 詢問</option>` +
        `<option value="document_error">🚨 文件錯誤</option>` +
      `</select>` +
      `<label style="font-size:12px;font-weight:600;color:var(--text-2);">標題（30 字內）</label>` +
      `<input id="kbv5-fb-title" maxlength="30" placeholder="簡述問題..." style="width:100%;padding:8px 10px;margin:4px 0 12px;border:1px solid var(--border);border-radius:6px;box-sizing:border-box;">` +
      `<label style="font-size:12px;font-weight:600;color:var(--text-2);">描述（500 字內）</label>` +
      `<textarea id="kbv5-fb-desc" maxlength="500" rows="4" placeholder="詳細說明..." style="width:100%;padding:8px 10px;margin:4px 0 14px;border:1px solid var(--border);border-radius:6px;box-sizing:border-box;resize:vertical;"></textarea>` +
      `<div style="display:flex;justify-content:flex-end;gap:8px;">` +
        `<button class="btn btn--quiet btn--sm" data-fb-cancel>取消</button>` +
        `<button class="btn btn--primary btn--sm" data-fb-send>送出</button>` +
      `</div>`;
    ov.appendChild(card);
    document.body.appendChild(ov);
    // §50.3.2：報告錯誤入口預選類型 + 帶 doc_id
    if (opts.category) card.querySelector("#kbv5-fb-cat").value = opts.category;
    ov.addEventListener("click", (e) => { if (e.target === ov) ov.remove(); });
    card.querySelector("[data-fb-cancel]").addEventListener("click", () => ov.remove());
    card.querySelector("[data-fb-send]").addEventListener("click", async () => {
      const cat = card.querySelector("#kbv5-fb-cat").value;
      const title = card.querySelector("#kbv5-fb-title").value.trim();
      const desc = card.querySelector("#kbv5-fb-desc").value.trim();
      if (!title || !desc) { toast("請填標題與描述", "warn"); return; }
      const r = await api("/api/feedback", {
        method: "POST",
        body: JSON.stringify({
          category: cat, title, description: desc,
          doc_id: (cat === "document_error" ? (opts.doc_id || null) : null),
          page_url: window.location.pathname + window.location.hash,
          user_agent: navigator.userAgent.slice(0, 200),
        }),
      });
      if (r.ok) { toast("已送出回報，感謝您！", "ok"); ov.remove(); }
      else toast(errMsg(await r.json().catch(() => ({})), "送出失敗"), "error");
    });
  }

  function wireTopbarSearch() {
    const div = document.getElementById("topbar-search");
    if (!div || div.dataset.kbv5 === "1") return;
    div.dataset.kbv5 = "1";
    div.removeAttribute("onclick");
    // 隱藏 ⌘K kbd hint（誤導使用者以為要 Cmd+K，且點到會閃游標但不能輸入）
    const kbd = div.querySelector(".topbar__search-kbd");
    if (kbd) kbd.style.display = "none";
    // SVG 圖示也設 pointer-events none，避免點圖示時 focus 跑掉
    const svg = div.querySelector("svg");
    if (svg) svg.style.pointerEvents = "none";
    // 找到 placeholder span 改成 <input>
    const placeholder = div.querySelector(".topbar__search-placeholder");
    if (!placeholder) return;
    const input = document.createElement("input");
    input.type = "text";
    input.placeholder = "搜尋文件、標籤、作者…";
    input.style.cssText = "flex:1;border:0;background:transparent;outline:none;font-size:14px;color:inherit;font-family:inherit;padding:0;min-width:0;";
    placeholder.parentNode.replaceChild(input, placeholder);
    // 整個 topbar-search div 點擊都聚焦 input（包含圖示區、padding 區）
    div.style.cursor = "text";
    div.addEventListener("click", (e) => {
      e.stopPropagation();
      // 只在點擊不是 input 自己時 focus；避免雙觸發
      if (e.target !== input) input.focus();
    });
    input.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        const q = input.value.trim();
        if (!q) return;
        const libPage = document.querySelector('main.page[data-page="library"]');
        const alreadyOnLib = !!(libPage && libPage.classList.contains("is-active"));
        NS._topbarSearchQ = q;
        const libSearch = libPage && libPage.querySelector(".lib-toolbar .search-box input");
        if (libSearch) libSearch.value = q;
        window.switchPage("library");
        // 已在 library 頁時 switchPage 不改變 is-active → 頁面轉換 observer 不會消費 q
        // （bug：原本只填值不搜尋）→ 此處直接消費並執行搜尋。
        if (alreadyOnLib) { NS._topbarSearchQ = null; loadLibrary(q); }
        input.value = "";
      }
    });
  }

  // ============ Phase5-F §46.2 批次匯入歷史 .md zip ============
  async function openBulkImportMdModal() {
    // 載部門清單
    let depts = ["業務部", "研發部", "客服部", "管理部", "行銷部"];
    try {
      const r = await api("/api/departments");
      if (r.ok) {
        const j = await r.json();
        const items = j.items || j;
        if (Array.isArray(items)) depts = items.map((d) => d.name || d).filter(Boolean);
      }
    } catch (_e) {}

    const deptOpts = depts.map((d) => `<option value="${escapeHtml(d)}">${escapeHtml(d)}</option>`).join("");
    const m = _kbModal(`
      <div style="padding:18px 24px;border-bottom:1px solid #e2e8f0;">
        <div style="font-size:16px;font-weight:600;color:#0b1f33;">📦 批次匯入歷史 .md（PRD §46.2）</div>
        <div style="font-size:12px;color:#64748b;margin-top:4px;">
          上傳 .zip（內含多個 .md 檔）→ 系統自動解析 frontmatter、PII 掃描、跨部門檢查、批次寫入</div>
      </div>
      <div style="padding:20px 24px;">
        <div style="font-size:13px;color:#475569;margin-bottom:6px;">📁 ZIP 檔案 <span style="color:#94a3b8;">（單檔上限 50 MB，最多 500 個 .md）</span></div>
        <input type="file" data-bim-file accept=".zip" style="width:100%;padding:10px;border:1px dashed #cbd5e1;border-radius:6px;background:#f8fafc;cursor:pointer;" />

        <div style="font-size:13px;color:#475569;margin:14px 0 6px;">🏢 目標部門 <span style="color:#dc2626;">*</span></div>
        <select data-bim-dept style="width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;">${deptOpts}</select>
        <div style="font-size:11px;color:#94a3b8;margin-top:4px;">所有匯入的文件將以此部門為 owner_department；若 .md 內 frontmatter 指定不同部門 → 跳過（§41 跨部門隔離）。</div>

        <div data-bim-progress style="display:none;margin-top:18px;padding:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;font-size:13px;color:#1e40af;">
          ⏳ 解析中...
        </div>
        <div data-bim-result style="display:none;margin-top:18px;"></div>
      </div>
      <div style="padding:14px 24px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;">
        <button id="bim-cancel" style="padding:8px 16px;border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;cursor:pointer;font-size:13px;">取消</button>
        <button id="bim-execute" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;">執行匯入</button>
      </div>`, 640);

    m.card.querySelector("#bim-cancel").addEventListener("click", m.close);
    m.card.querySelector("#bim-execute").addEventListener("click", async () => {
      const fileEl = m.card.querySelector("[data-bim-file]");
      const deptEl = m.card.querySelector("[data-bim-dept]");
      const file = fileEl.files && fileEl.files[0];
      const dept = deptEl.value;
      if (!file) { toast("請選 zip 檔案", "error"); return; }
      if (!file.name.toLowerCase().endsWith(".zip")) {
        toast("僅支援 .zip", "error"); return;
      }
      const execBtn = m.card.querySelector("#bim-execute");
      execBtn.disabled = true;
      execBtn.textContent = "處理中...";
      const progress = m.card.querySelector("[data-bim-progress]");
      progress.style.display = "";
      try {
        const url = `/api/admin/bulk-import?filename=${encodeURIComponent(file.name)}&target_dept=${encodeURIComponent(dept)}`;
        const r = await fetch(url, {
          method: "POST",
          headers: { "Authorization": "Bearer " + (Auth.access || ""),
                      "Content-Type": "application/zip" },
          body: file,
        });
        const j = await r.json().catch(() => ({}));
        progress.style.display = "none";
        if (!r.ok) {
          const d = j.detail || {};
          const errMap = {
            empty_file: "檔案為空", file_too_large: "ZIP 過大（上限 50MB）",
            invalid_zip: "ZIP 格式錯誤", no_md_files: "ZIP 中沒有 .md 檔",
            too_many_files: "ZIP 內 .md 超過 500 個", department_not_found: "目標部門不存在",
          };
          toast(errMap[d.error] || errMsg(j, "匯入失敗"), "error");
          return;
        }
        // 結果區
        const resEl = m.card.querySelector("[data-bim-result]");
        resEl.style.display = "";
        resEl.innerHTML = `
          <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;">
            <div style="padding:10px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;text-align:center;">
              <div style="font-size:11px;color:#15803d;">✓ 成功匯入</div>
              <div style="font-size:20px;font-weight:600;color:#15803d;">${j.imported}</div>
            </div>
            <div style="padding:10px;background:#fef9c3;border:1px solid #fde047;border-radius:6px;text-align:center;">
              <div style="font-size:11px;color:#a16207;">PII 命中</div>
              <div style="font-size:20px;font-weight:600;color:#a16207;">${j.skipped_pii}</div>
            </div>
            <div style="padding:10px;background:#fee2e2;border:1px solid #fecaca;border-radius:6px;text-align:center;">
              <div style="font-size:11px;color:#b91c1c;">跨部門</div>
              <div style="font-size:20px;font-weight:600;color:#b91c1c;">${j.skipped_cross_dept}</div>
            </div>
            <div style="padding:10px;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;text-align:center;">
              <div style="font-size:11px;color:#475569;">總數</div>
              <div style="font-size:20px;font-weight:600;color:#475569;">${j.total}</div>
            </div>
          </div>
          ${(j.failed && j.failed.length) ? `<details style="margin-top:10px;"><summary style="cursor:pointer;color:#dc2626;font-size:12px;">查看 ${j.failed.length} 筆失敗</summary><pre style="margin-top:6px;padding:10px;background:#fef2f2;border-radius:6px;font-size:11px;white-space:pre-wrap;max-height:200px;overflow:auto;">${escapeHtml(JSON.stringify(j.failed, null, 2))}</pre></details>` : ""}
          ${(j.skipped_pii_detail && j.skipped_pii_detail.length) ? `<details style="margin-top:6px;"><summary style="cursor:pointer;color:#a16207;font-size:12px;">查看 ${j.skipped_pii_detail.length} 筆 PII 詳情</summary><pre style="margin-top:6px;padding:10px;background:#fef9c3;border-radius:6px;font-size:11px;white-space:pre-wrap;max-height:200px;overflow:auto;">${escapeHtml(JSON.stringify(j.skipped_pii_detail, null, 2))}</pre></details>` : ""}
        `;
        toast(`匯入完成：成功 ${j.imported} 篇`, "ok");
        execBtn.textContent = "完成";
        execBtn.disabled = false;
        execBtn.onclick = () => m.close();
      } catch (e) {
        progress.style.display = "none";
        toast("上傳失敗：" + e.message, "error");
        execBtn.disabled = false;
        execBtn.textContent = "執行匯入";
      }
    });
  }

  // ============ Phase5-E §19.13 / §46.3 CSV 匯入使用者 wizard ============
  // 系統欄位（與後端 USER_FIELDS 對齊）
  const _USER_IMPORT_FIELDS = [
    { value: "", label: "— 不匯入 —" },
    { value: "username", label: "使用者帳號 (username)" },
    { value: "email", label: "Email *" },
    { value: "display_name", label: "姓名 (display_name)" },
    { value: "department", label: "主要部門 (department) *" },
    { value: "role", label: "系統角色 (role) *" },
    { value: "extension", label: "分機 (extension)" },
    { value: "mobile", label: "行動電話 (mobile)" },
  ];

  function _wizardGoTo(page, step) {
    page.querySelectorAll(".wizard-step").forEach((s) => {
      s.classList.toggle("is-active", parseInt(s.dataset.step, 10) === step);
    });
    page.querySelectorAll("[data-step-panel]").forEach((p) => {
      p.style.display = parseInt(p.dataset.stepPanel, 10) === step ? "" : "none";
    });
  }

  function wireUserImportPage() {
    const page = document.querySelector('main.page[data-page="user-import"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";
    // Pattern 01：清掉 mockup [data-page] 預綁（取消/返回 等按鈕用 data-page 跳 admin）
    // 保留 data-page 的元素但移除 listener，wireUserImportPage 自己接管
    _stripMockupPageNav(page);

    // state
    const state = { importId: null, columns: [], mapping: {}, mappingResult: null };
    NS._userImportState = state;

    // === 步驟 1：上傳 ===
    const dropZone = page.querySelector(".drop-zone");
    if (dropZone) {
      // 清掉 mockup 寫死的「已選檔案」假卡
      dropZone.querySelectorAll(".drop-zone__file").forEach((n) => n.remove());
      // 隱藏的 file input
      let fi = page.querySelector("[data-kbv5-csv-input]");
      if (!fi) {
        fi = document.createElement("input");
        fi.type = "file";
        fi.accept = ".csv,text/csv";
        fi.dataset.kbv5CsvInput = "1";
        fi.style.display = "none";
        dropZone.appendChild(fi);
      }
      dropZone.style.cursor = "pointer";
      dropZone.addEventListener("click", (e) => {
        if (e.target.tagName !== "INPUT") fi.click();
      });
      // 拖放
      dropZone.addEventListener("dragover", (e) => {
        e.preventDefault(); dropZone.classList.add("is-dragover");
      });
      dropZone.addEventListener("dragleave", () => dropZone.classList.remove("is-dragover"));
      dropZone.addEventListener("drop", async (e) => {
        e.preventDefault(); dropZone.classList.remove("is-dragover");
        const f = e.dataTransfer.files && e.dataTransfer.files[0];
        if (f) await _userImportUpload(page, state, f);
      });
      fi.addEventListener("change", async () => {
        const f = fi.files && fi.files[0];
        if (f) await _userImportUpload(page, state, f);
      });
    }

    // 下載範本按鈕
    const tplBtn = Array.from(page.querySelectorAll(".page__actions .btn"))
      .find((b) => (b.textContent || "").includes("下載範本"));
    if (tplBtn) {
      tplBtn.addEventListener("click", async () => {
        const r = await fetch("/api/admin/users/import/template.csv", {
          headers: { "Authorization": "Bearer " + (Auth.access || "") },
        });
        if (!r.ok) { toast("下載失敗（需 admin 權限）", "error"); return; }
        const blob = await r.blob();
        const a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = "user_import_template.csv";
        a.click();
      });
    }

    // 步驟切換按鈕。⚠ mockup 原 inline onclick=wizardGoTo(N) 會無條件跳步、繞過下方驗證
    // （cloneNode 不會清掉 inline onclick 屬性，先前註解有誤）→ 明確移除，只留 app.js 驗證過的 handler。
    page.querySelectorAll("[data-step-panel] button").forEach((btn) => {
      btn.removeAttribute("onclick");
      btn.onclick = null;
      const txt = (btn.textContent || "").trim();
      if (txt.includes("下一步")) {
        btn.addEventListener("click", async () => {
          const curPanel = btn.closest("[data-step-panel]");
          const curStep = parseInt(curPanel.dataset.stepPanel, 10);
          if (curStep === 1) {
            if (!state.importId) { toast("請先上傳 CSV", "error"); return; }
            _wizardGoTo(page, 2);
            _userImportRenderMapping(page, state);
          } else if (curStep === 2) {
            const ok = await _userImportSubmitMapping(page, state);
            if (ok) { _wizardGoTo(page, 3); _userImportRenderPreview(page, state); }
          }
        });
      } else if (txt.includes("上一步")) {
        btn.addEventListener("click", () => {
          const curPanel = btn.closest("[data-step-panel]");
          const curStep = parseInt(curPanel.dataset.stepPanel, 10);
          if (curStep > 1) _wizardGoTo(page, curStep - 1);
        });
      } else if (txt.includes("取消") || txt.includes("返回")) {
        btn.addEventListener("click", () => window.switchPage("admin"));
      } else if (txt.includes("執行匯入")) {
        btn.addEventListener("click", () => _userImportExecute(page, state));
      }
    });

    // 進頁面時 reset wizard
    const obs = new MutationObserver(() => {
      if (page.classList.contains("is-active")) _userImportReset(page, state);
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active")) _userImportReset(page, state);
  }

  function _userImportReset(page, state) {
    state.importId = null; state.columns = []; state.mapping = {}; state.mappingResult = null;
    _wizardGoTo(page, 1);
    const fi = page.querySelector("[data-kbv5-csv-input]");
    if (fi) fi.value = "";
    page.querySelectorAll("[data-kbv5-file-card]").forEach((n) => n.remove());
  }

  async function _userImportUpload(page, state, file) {
    if (!file.name.toLowerCase().endsWith(".csv")) {
      toast("僅支援 .csv 檔案", "error"); return;
    }
    const r = await fetch(
      `/api/admin/users/import/upload?filename=${encodeURIComponent(file.name)}`,
      { method: "POST",
        headers: { "Authorization": "Bearer " + (Auth.access || ""),
                    "Content-Type": "text/csv" },
        body: file },
    );
    const j = await r.json().catch(() => ({}));
    if (!r.ok) {
      const d = j.detail || {};
      const errMap = { empty_file: "檔案為空", file_too_large: "檔案過大（上限 5 MB）",
                        no_data_rows: "CSV 無資料列", csv_parse_failed: "CSV 解析失敗",
                        encoding_must_be_utf8: "CSV 編碼必須是 UTF-8" };
      toast(errMap[d.error] || errMsg(j, "上傳失敗"), "error");
      return;
    }
    state.importId = j.import_id;
    state.columns = j.columns;
    // 顯示已選檔案卡片
    const dropZone = page.querySelector(".drop-zone");
    dropZone.querySelectorAll("[data-kbv5-file-card]").forEach((n) => n.remove());
    const card = document.createElement("div");
    card.className = "drop-zone__file";
    card.dataset.kbv5FileCard = "1";
    card.innerHTML = `<div class="drop-zone__file-icon">📄</div>
      <div style="flex:1;min-width:0;">
        <div class="drop-zone__file-name">${escapeHtml(file.name)}</div>
        <div class="drop-zone__file-meta">${Pure.fmtKB(file.size)} KB · ${j.total_rows} 筆資料 · ${j.columns.length} 個欄位</div>
      </div>`;
    dropZone.appendChild(card);
    toast(`已上傳 ${file.name}（${j.total_rows} 筆）`, "ok");
  }

  function _userImportRenderMapping(page, state) {
    const tbl = page.querySelector(".mapping-table");
    if (!tbl) return;
    // 清掉 mockup mock rows
    tbl.querySelectorAll(".mapping-row").forEach((n) => n.remove());
    // 自動推測對應（中文常見對 → 系統欄位）
    const guess = {
      "姓名": "display_name", "名字": "display_name", "Email": "email", "電郵": "email",
      "郵件": "email", "信箱": "email", "部門": "department", "主要部門": "department",
      "角色": "role", "系統角色": "role", "帳號": "username", "使用者帳號": "username",
      "username": "username", "email": "email",
      "分機": "extension", "行動電話": "mobile", "手機": "mobile",
    };
    state.mapping = {};
    state.columns.forEach((col) => {
      const auto = guess[col] || "";
      state.mapping[col] = auto;
      const row = document.createElement("div");
      row.className = "mapping-row";
      const opts = _USER_IMPORT_FIELDS.map((f) =>
        `<option value="${f.value}"${f.value === auto ? " selected" : ""}>${escapeHtml(f.label)}</option>`).join("");
      const statusClass = auto ? "mapping-row__status--ok" : "mapping-row__status--ignore";
      const statusText = auto ? "已對應" : "略過";
      row.innerHTML = `
        <div><span class="mapping-row__source">${escapeHtml(col)}</span></div>
        <div class="mapping-row__arrow">→</div>
        <div><select data-csv-col="${escapeHtml(col)}">${opts}</select></div>
        <div><span class="mapping-row__status ${statusClass}">${statusText}</span></div>`;
      row.querySelector("select").addEventListener("change", (e) => {
        state.mapping[col] = e.target.value;
        const sBadge = row.querySelector(".mapping-row__status");
        if (e.target.value) {
          sBadge.className = "mapping-row__status mapping-row__status--ok";
          sBadge.textContent = "已對應";
        } else {
          sBadge.className = "mapping-row__status mapping-row__status--ignore";
          sBadge.textContent = "略過";
        }
      });
      tbl.appendChild(row);
    });
  }

  async function _userImportSubmitMapping(page, state) {
    if (!state.importId) { toast("狀態錯誤，請重新上傳", "error"); return false; }
    const r = await api(`/api/admin/users/import/${state.importId}/mapping`, {
      method: "POST", body: JSON.stringify({ mapping: state.mapping }),
    });
    const j = await r.json().catch(() => ({}));
    if (!r.ok) {
      toast(errMsg(j, "驗證失敗"), "error");
      return false;
    }
    if (j.missing_required_fields && j.missing_required_fields.length > 0) {
      toast(`必填欄位缺對應：${j.missing_required_fields.join(", ")}`, "error");
      return false;
    }
    state.mappingResult = j;
    return true;
  }

  function _userImportRenderPreview(page, state) {
    const result = state.mappingResult || {};
    // summary 卡片
    const sum = page.querySelector(".preview-summary");
    if (sum) {
      sum.querySelectorAll(".preview-summary__card").forEach((c, i) => {
        const valEl = c.querySelector(".preview-summary__value");
        if (i === 0 && valEl) valEl.textContent = String(result.ok_count || 0);
        if (i === 1 && valEl) valEl.textContent = "0";   // 「需確認」此版未支援
        if (i === 2 && valEl) valEl.textContent = String(result.error_count || 0);
        if (i === 3 && valEl) valEl.textContent = String(result.total_rows || 0);
      });
    }
    // 預覽表
    const tbody = page.querySelector(".preview-table tbody");
    if (tbody) {
      tbody.innerHTML = (result.rows || []).map((rv) => {
        const d = rv.data || {};
        const cls = rv.status === "ok" ? "preview-table__row-status--ok"
          : "preview-table__row-status--err";
        const icon = rv.status === "ok" ? "✓ 將建立" : "✕ 無法匯入";
        const errs = rv.errors && rv.errors.length
          ? `<span style="color:#991B1B;">${escapeHtml(rv.errors.join(" · "))}</span>`
          : '<span style="color:var(--text-3);">—</span>';
        return `<tr class="${rv.status === "error" ? "is-error" : ""}">
          <td><span class="preview-table__row-status ${cls}">${icon}</span></td>
          <td>${escapeHtml(d.display_name || "—")}</td>
          <td>${escapeHtml(d.email || "")}<br><span style="color:var(--text-3);font-size:10px;">→ ${escapeHtml(d.username || "")}</span></td>
          <td>${escapeHtml(d.department || "—")}</td>
          <td>${escapeHtml(d.role || "—")}</td>
          <td>${errs}</td>
        </tr>`;
      }).join("");
    }
    // 替換「執行匯入」按鈕文字
    const execBtn = Array.from(page.querySelectorAll("[data-step-panel='3'] .btn--primary"))
      .find((b) => (b.textContent || "").includes("執行匯入"));
    if (execBtn) execBtn.textContent = `執行匯入（建立 ${result.ok_count || 0} 位）`;
  }

  async function _userImportExecute(page, state) {
    if (!state.importId) return;
    const pwd = window.prompt("請輸入您的密碼（admin step-up 驗證）：");
    if (!pwd) return;
    const r = await api(`/api/admin/users/import/${state.importId}/execute`, {
      method: "POST", body: JSON.stringify({ step_up_password: pwd }),
    });
    const j = await r.json().catch(() => ({}));
    if (!r.ok) {
      const d = j.detail || {};
      if (d.error === "incorrect_password") toast("密碼錯誤", "error");
      else toast(errMsg(j, "匯入失敗"), "error");
      return;
    }
    // 顯示成功 modal（含臨時密碼，admin 自行轉告）
    const passwordsHtml = (j.successes || []).map((s) =>
      `<div style="padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:6px;display:flex;gap:12px;align-items:center;">
        <div style="flex:1;font-size:13px;">
          <div style="font-weight:600;">${escapeHtml(s.username)} (${escapeHtml(s.department)} · ${escapeHtml(s.role)})</div>
          <div style="color:#64748b;font-size:11px;">${escapeHtml(s.email)}</div>
        </div>
        <code style="background:#f1f5f9;padding:4px 10px;border-radius:4px;font-size:12px;color:#0b1f33;">${escapeHtml(s.temp_password)}</code>
      </div>`).join("");
    const m = _kbModal(`
      <div style="padding:18px 24px;border-bottom:1px solid #e2e8f0;">
        <div style="font-size:16px;font-weight:600;color:#0b1f33;">匯入完成</div>
        <div style="font-size:12px;color:#64748b;margin-top:4px;">
          成功建立 ${j.ok_count} 位 · 失敗 ${j.error_count} 位</div>
      </div>
      <div style="padding:20px 24px;max-height:60vh;overflow:auto;">
        ${j.ok_count > 0 ? `<div style="font-size:13px;color:#475569;margin-bottom:10px;">
          ⚠️ 以下臨時密碼請<b>立即抄錄並轉告對應使用者</b>，關閉視窗後將無法再次取得：</div>${passwordsHtml}` : ""}
        ${j.error_count > 0 ? `<details style="margin-top:14px;">
          <summary style="cursor:pointer;color:#dc2626;font-size:13px;">查看 ${j.error_count} 筆失敗清單</summary>
          <pre style="margin-top:8px;padding:12px;background:#fef2f2;border-radius:6px;font-size:12px;white-space:pre-wrap;">${escapeHtml(JSON.stringify(j.failures, null, 2))}</pre>
        </details>` : ""}
      </div>
      <div style="padding:14px 24px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;">
        <button id="ui-close" style="padding:8px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-weight:600;">完成</button>
      </div>`, 720);
    m.card.querySelector("#ui-close").addEventListener("click", () => {
      m.close();
      window.switchPage("admin");
    });
  }

  function wireAdvancedSearchPage() {
    const page = document.querySelector('main.page[data-page="advanced-search"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";

    // 🚨 ROOT FIX：把 mockup 預綁的 [data-page] listener 全部清掉
    _stripMockupPageNav(page);

    // 包左欄 wrapper（form + results 都在裡面）→ 結果不被右側 saved-query 卡
    const form0 = page.querySelector(".adv-search-form");
    const layout0 = page.querySelector(".adv-search-layout");
    if (form0 && layout0 && !page.querySelector("[data-kbv5-left-col]")) {
      const leftCol = document.createElement("div");
      leftCol.dataset.kbv5LeftCol = "1";
      leftCol.style.cssText = "display:flex;flex-direction:column;min-width:0;";
      form0.parentNode.insertBefore(leftCol, form0);
      leftCol.appendChild(form0);
    }

    // 清掉 mockup 寫死的 4 個假 condition row
    page.querySelectorAll(".adv-search-form__section .condition-row").forEach((n) => n.remove());
    // 清掉 keyword 預設「五軸 切削 參數」
    const kw = page.querySelector(".adv-search-form__section input[type='text']");
    if (kw) kw.value = "";
    // 預設加 1 行空 condition
    const condSection = page.querySelectorAll(".adv-search-form__section")[1];
    if (condSection) {
      const addBtn = condSection.querySelector(".btn--quiet");
      if (addBtn) condSection.insertBefore(_advAddConditionRow(page), addBtn);
    }
    // 「新增條件」按鈕
    if (condSection) {
      const addBtn = condSection.querySelector(".btn--quiet");
      if (addBtn) addBtn.addEventListener("click", () => {
        condSection.insertBefore(_advAddConditionRow(page), addBtn);
      });
    }
    // logic toggle
    page.querySelectorAll(".logic-toggle button").forEach((b) => {
      b.addEventListener("click", () => {
        page.querySelectorAll(".logic-toggle button").forEach((x) => x.classList.remove("is-active"));
        b.classList.add("is-active");
      });
    });
    // 三個底部按鈕
    const footerBtns = page.querySelectorAll(".adv-search-form > div:last-child button");
    const [searchBtn, saveBtn, resetBtn] = footerBtns;
    if (searchBtn) {
      // 清掉 mock 寫死「(預估 47 筆)」
      const svg = searchBtn.querySelector("svg");
      searchBtn.innerHTML = (svg ? svg.outerHTML : "") + " 執行搜尋";
      searchBtn.addEventListener("click", (e) => { e.preventDefault();
        _advExecuteSearch(page);
        _advCollapseForm(page, true);   // Phase5-C UX：搜尋後自動收折
      });
    }
    if (saveBtn) {
      saveBtn.addEventListener("click", async () => {
        const body = {
          keyword: _advReadKeyword(page),
          logic: _advReadLogic(page),
          conditions: _advReadConditions(page),
          ..._advReadScope(page),
        };
        // 沒有 keyword 也沒有條件 → 拒絕儲存空查詢
        if (!body.keyword && body.conditions.length === 0) {
          toast("請先輸入關鍵字或新增條件", "error");
          return;
        }
        // 自動命名（不再彈 prompt）：用 keyword + 條件數
        const ts = new Date().toISOString().slice(5, 16).replace("T", " ");
        const name = body.keyword
          ? (body.conditions.length > 0
              ? `${body.keyword} (${body.conditions.length}條件)`
              : body.keyword)
          : `${body.conditions.length} 條件查詢 · ${ts}`;
        const r = await api("/api/search/saved-queries", { method: "POST",
          body: JSON.stringify({ name, query_json: body, pinned: false }) });
        if (r.ok) {
          toast(`已儲存「${name}」`, "ok");
          _advLoadSavedQueries(page);
        } else toast(errMsg(await r.json().catch(() => ({})), "儲存失敗"), "error");
      });
    }
    if (resetBtn) {
      resetBtn.addEventListener("click", () => _advResetForm(page));
    }

    // Phase5-C #1：基本關鍵字 input 按 Enter 觸發搜尋
    const kwInput = page.querySelector(".adv-search-form__section input[type='text']");
    if (kwInput) {
      kwInput.addEventListener("keydown", (e) => {
        if (e.key === "Enter") {
          e.preventDefault();
          _advExecuteSearch(page);
          _advCollapseForm(page, true);
        }
      });
    }

    // 觀察進入頁面 → #2 歸 0 表單 + 載入 saved-queries
    let _advWasActive = page.classList.contains("is-active");
    const obs = new MutationObserver(() => {
      const nowActive = page.classList.contains("is-active");
      if (nowActive && !_advWasActive) {
        // 每次重新進入頁面：完全清空表單
        _advResetForm(page);
        _advCollapseForm(page, false);   // 確保 form 是展開狀態
      }
      if (nowActive) _advLoadSavedQueries(page);
      _advWasActive = nowActive;
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active")) _advLoadSavedQueries(page);
  }

  function wireDashboard() {
    const page = document.querySelector('main.page[data-page="dashboard"]');
    if (!page || page.dataset.kbv5 === "1") return;
    page.dataset.kbv5 = "1";
    const obs = new MutationObserver(() => {
      if (page.classList.contains("is-active")) loadDashboard();
    });
    obs.observe(page, { attributes: true, attributeFilter: ["class"] });
    if (page.classList.contains("is-active")) loadDashboard();

    // Phase5-B 補：widget 連結 — 「查看全部」/「前往知識庫」
    page.querySelectorAll(".widget__link").forEach((a) => {
      const t = (a.textContent || "").trim();
      a.removeAttribute("href");
      a.style.cursor = "pointer";
      a.addEventListener("click", (e) => {
        e.preventDefault();
        if (t.includes("知識庫")) window.switchPage("library");
        else if (t.includes("查看全部")) {
          // 依 widget 父層決定跳哪個頁
          const widget = a.closest(".widget");
          const title = (widget?.querySelector(".widget__title")?.textContent || "").trim();
          if (title.includes("待處理") || title.includes("審核")) window.switchPage("review");
          else if (title.includes("提交") || title.includes("草稿")) window.switchPage("my-tasks");
          else if (title.includes("通知")) window.switchPage("notifications");
          else window.switchPage("my-tasks");
        }
      });
    });
  }

  // §50.3.1 新人必讀 checklist widget：插到儀表板頂部，僅在有必讀且未完成時顯示
  async function injectOnboardingChecklistWidget(page) {
    page.querySelectorAll("[data-kbv5-onboarding]").forEach((n) => n.remove());
    let data;
    try {
      const r = await api("/api/account/onboarding-checklist");
      if (!r.ok) return;
      data = await r.json();
    } catch (_e) { return; }
    if (!data || !data.total || data.complete) return;   // 無必讀或已讀完 → 不顯示
    const card = document.createElement("div");
    card.dataset.kbv5Onboarding = "1";
    card.style.cssText = "background:var(--surface);border:1px solid var(--accent);border-radius:12px;padding:14px 18px;margin:0 0 16px;";
    const rows = (data.items || []).map((it) =>
      `<div style="display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px;">` +
      `<span>${it.viewed ? "✅" : "⬜"}</span>` +
      `<a href="#" data-doc-id="${it.doc_id}" style="color:${it.viewed ? "var(--text-3)" : "var(--accent)"};text-decoration:${it.viewed ? "line-through" : "none"};">${escapeHtml(it.title)}</a>` +
      `</div>`).join("");
    card.innerHTML =
      `<div style="font-weight:700;font-size:14px;margin-bottom:6px;">🎓 新人必讀 (${data.viewed}/${data.total})</div>` +
      `<div style="font-size:11px;color:var(--text-3);margin-bottom:8px;">${escapeHtml(data.department || "")} · 點未讀文件開始閱讀</div>` +
      rows;
    const titleGroup = page.querySelector(".page__title-group");
    if (titleGroup && titleGroup.parentNode) titleGroup.parentNode.insertBefore(card, titleGroup.nextSibling);
    else page.prepend(card);
    card.querySelectorAll("a[data-doc-id]").forEach((a) => {
      a.addEventListener("click", (e) => { e.preventDefault(); openDocView(parseInt(a.dataset.docId, 10)); });
    });
  }

  async function loadDashboard() {
    const page = document.querySelector('main.page[data-page="dashboard"]');
    if (!page) return;
    if (!Auth.access) return;  // 未登入不抓資料（避免 init 期誤觸 401 跳轉）

    // 「重新整理」按鈕：只綁一次，點了重抓儀表板資料（mockup 原本是死按鈕）
    const refreshBtn = document.getElementById("kbv5-dash-refresh");
    if (refreshBtn && refreshBtn.dataset.kbv5Bound !== "1") {
      refreshBtn.dataset.kbv5Bound = "1";
      refreshBtn.addEventListener("click", async () => {
        if (refreshBtn.disabled) return;
        refreshBtn.disabled = true;
        refreshBtn.style.opacity = "0.6";
        try { await loadDashboard(); refreshReviewBadge(); refreshNotifBadge(); toast("已更新", "ok"); }
        finally { refreshBtn.disabled = false; refreshBtn.style.opacity = ""; }
      });
    }
    const role = (Auth.user && Auth.user.role) || "user";
    const canReview = ["admin", "senior_manager", "manager"].includes(role);

    // 同步先消除寫死 mock（歡迎詞 + KPI 數字 + widget 列），避免載入前閃假資料
    const u = Auth.user || {};
    const welcome = page.querySelector(".page__title-group p");
    if (welcome) welcome.textContent =
      `歡迎回來，${u.display_name || u.username || ""}。以下是今天的待辦與最近動態。`;
    page.querySelectorAll(".dash-grid .kpi .kpi__value").forEach((v) => { v.textContent = "—"; });
    page.querySelectorAll(".dash-grid .kpi .kpi__sub").forEach((s) => { s.textContent = ""; });
    page.querySelectorAll(".dash-layout .widget .pending-row").forEach((r) => r.remove());
    page.querySelectorAll(".dash-layout .widget .recent-doc").forEach((r) => r.remove());

    // §50.3.1 新人必讀 checklist widget（有未讀完才顯示）
    injectOnboardingChecklistWidget(page);

    // 平行抓：文件列表、（可審核者）待審佇列、我的提交
    const [docsR, pendR, mineR] = await Promise.all([
      api("/api/documents?limit=100").catch(() => null),
      canReview ? api("/api/reviews/pending").catch(() => null) : Promise.resolve(null),
      api("/api/pending/me").catch(() => null),
    ]);
    let docs = [], pending = [], mine = [], total = 0;
    if (docsR && docsR.ok) { const d = await docsR.json(); docs = d.items || []; total = d.total != null ? d.total : docs.length; }
    if (pendR && pendR.ok) pending = await pendR.json();
    if (mineR && mineR.ok) mine = await mineR.json();

    // KPI 卡（依序：待處理提交 / 本月已收錄 / 總文件數 / 活躍使用者）
    const kpis = page.querySelectorAll(".dash-grid .kpi");
    const setKpi = (el, value, sub) => {
      if (!el) return;
      const v = el.querySelector(".kpi__value"); if (v) v.textContent = value;
      const s = el.querySelector(".kpi__sub"); if (s) s.textContent = sub;
    };
    if (canReview) {
      setKpi(kpis[0], String(pending.length), "待您審核");
    } else {
      const myPending = mine.filter((m) => m.status === "pending").length;
      const myDraft = mine.filter((m) => m.status === "draft" || m.status === "ai_ready").length;
      setKpi(kpis[0], String(myPending), `草稿 ${myDraft} 篇`);
      // 第一張卡標題改「我的待審」
      const lbl = kpis[0] && kpis[0].querySelector(".kpi__label");
      if (lbl) lbl.textContent = "我送審中";
    }
    // 本月已收錄：用 documents 內 created_at 在本月者
    const now = new Date();
    const ym = now.toISOString().slice(0, 7);
    const monthCount = docs.filter((d) => (d.created_at || "").slice(0, 7) === ym).length;
    setKpi(kpis[1], String(monthCount), "本月新增");
    setKpi(kpis[2], total.toLocaleString(), "可見文件");
    // 活躍使用者卡：無資料來源 → 改顯示「我的草稿」（可點開清單）
    const drafts = mine.filter((m) => m.status === "draft" || m.status === "ai_ready");
    setKpi(kpis[3], String(drafts.length), drafts.length ? "點此查看草稿" : "我的草稿/未送審");
    const lbl3 = kpis[3] && kpis[3].querySelector(".kpi__label");
    if (lbl3) lbl3.textContent = "我的草稿";
    if (kpis[3]) {
      kpis[3].style.cursor = drafts.length ? "pointer" : "default";
      kpis[3].onclick = drafts.length ? () => openMyDraftsModal(drafts) : null;
    }

    // admin/senior_manager：注入「🩺 系統健康」區塊（§47.3）— 不阻塞下方 widget
    if (role === "admin" || role === "senior_manager") {
      _injectAdminHealthBlock(page).catch(() => {});
    }

    // 待處理提交 widget（reviewers 顯示待審；一般 user 顯示自己的提交）
    const widgets = page.querySelectorAll(".dash-layout .widget");
    const pendingWidget = widgets[0];
    if (pendingWidget) {
      const body = pendingWidget.querySelector(".widget__body");
      const titleCount = pendingWidget.querySelector(".widget__title-count");
      const titleEl = pendingWidget.querySelector(".widget__title");
      if (body) {
        body.querySelectorAll(".pending-row").forEach((r) => r.remove());
        const list = canReview ? pending : mine;
        if (titleCount) titleCount.textContent = String(list.length);
        if (titleEl && !canReview) {
          titleEl.childNodes[0].textContent = "我的提交 ";
        }
        if (list.length === 0) {
          const empty = document.createElement("div");
          empty.className = "pending-row";
          empty.style.cssText = "color:var(--text-3);justify-content:center;cursor:default;";
          empty.textContent = canReview ? "目前沒有待審文件" : "您還沒有提交";
          body.appendChild(empty);
        } else {
          list.slice(0, 8).forEach((p) => {
            const meta = p.ai_meta || {};
            const title = meta.title || "（處理中）";
            const dept = p.submitter_department || "";
            const statusMap = {
              processing: "AI 處理中", ai_ready: "AI 已整理", pending: "待審核",
              approved: "已核准", rejected: "已退回", draft: "草稿",
            };
            const row = document.createElement("div");
            row.className = "pending-row";
            row.innerHTML = `
              <div class="avatar pending-row__avatar">${escapeHtml((dept || "?").slice(0,1))}</div>
              <div>
                <div class="pending-row__name">${escapeHtml(dept)}</div>
                <div class="pending-row__meta">${escapeHtml(title)}</div>
              </div>
              <span class="pending-row__status pending-row__status--ai">${statusMap[p.status] || p.status}</span>
              <span class="pending-row__time">${reviewTimeLabel(p.created_at)}</span>`;
            if (canReview && p.status === "pending") {
              // 直接開審核 modal，不再跳審核頁
              row.style.cursor = "pointer";
              row.addEventListener("click", () => openReviewModalForPid(p.id));
            } else if (!canReview) {
              // 提交者點自己的提交：rejected → 看原因 + 重送；其他 → 檢視
              row.style.cursor = "pointer";
              row.addEventListener("click", () => openMySubmissionModal(p.id));
            }
            body.appendChild(row);
          });
        }
      }
    }

    // 最近文件 widget
    const recentWidget = widgets[1];
    if (recentWidget) {
      const body = recentWidget.querySelector(".widget__body");
      if (body) {
        body.querySelectorAll(".recent-doc").forEach((r) => r.remove());
        const recent = [...docs].sort((a, b) => (b.updated_at || "").localeCompare(a.updated_at || "")).slice(0, 6);
        if (recent.length === 0) {
          const empty = document.createElement("div");
          empty.className = "recent-doc";
          empty.style.cssText = "color:var(--text-3);cursor:default;";
          empty.textContent = "知識庫尚無文件";
          body.appendChild(empty);
        } else {
          recent.forEach((d) => {
            const vis = VIS_BADGE[d.visibility] || VIS_BADGE.department;
            const row = document.createElement("div");
            row.className = "recent-doc";
            row.style.cursor = "pointer";
            row.innerHTML = `
              <div class="recent-doc__icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
              </div>
              <div class="recent-doc__body">
                <div class="recent-doc__title">${escapeHtml(d.title)}</div>
                <div class="recent-doc__meta">${escapeHtml(d.owner_department || "")} · <span class="vis-badge ${vis.cls}">${vis.label}</span></div>
              </div>`;
            row.addEventListener("click", () => openDocView(d.id));
            body.appendChild(row);
          });
        }
      }
    }
  }

  // §47.3 admin 健康儀表板區塊（注入 dashboard 末端）
  async function _injectAdminHealthBlock(page) {
    page.querySelectorAll("[data-kbv5-health-block]").forEach((n) => n.remove());
    const r = await api("/api/admin/health-dashboard").catch(() => null);
    if (!r || !r.ok) return;
    const j = await r.json();
    const blk = document.createElement("div");
    blk.dataset.kbv5HealthBlock = "1";
    blk.style.cssText = "margin-top:24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;";
    const cards = [
      { label: "鮮度：< 6 月", val: j.freshness.fresh_lt_6m, color: "#16a34a" },
      { label: "6–12 月", val: j.freshness.moderate_6_12m, color: "#64748b" },
      { label: "⚠ 12–24 月", val: j.freshness.warning_12_24m, color: "#d97706" },
      { label: "⛔ > 24 月", val: j.freshness.critical_gt_24m, color: "#dc2626" },
    ];
    const freshnessHtml = cards.map((c) =>
      `<div style="flex:1;padding:12px;background:var(--surface-2);border-radius:8px;">` +
      `<div style="font-size:11px;color:var(--text-3);">${escapeHtml(c.label)}</div>` +
      `<div style="font-size:22px;font-weight:700;color:${c.color};margin-top:4px;">${c.val}</div></div>`
    ).join("");
    const orphanItems = (j.orphans.sample || []).slice(0, 5).map((d) =>
      `<div style="padding:6px 10px;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer;" data-doc="${d.id}">` +
      `<b>${escapeHtml(d.title || "")}</b> <span style="color:var(--text-3);">· ${escapeHtml(d.owner_department || "")}</span></div>`
    ).join("");
    const aiCostUSD = (j.ai_cost_30d.total_x1000 / 1000).toFixed(2);
    const deptItems = (j.by_department || []).map((d) =>
      `<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;">` +
      `<span>${escapeHtml(d.dept)}</span><b>${d.c}</b></div>`
    ).join("");
    blk.innerHTML =
      '<div style="display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--text-1);margin-bottom:14px;">' +
        '🩺 系統健康 <span style="font-size:11px;color:var(--text-3);font-weight:400;">(§47.3 admin 視角)</span>' +
      '</div>' +
      '<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;">' +
        `<div style="padding:12px;background:var(--surface-2);border-radius:8px;"><div style="font-size:11px;color:var(--text-3);">總文件</div><div style="font-size:22px;font-weight:700;margin-top:4px;">${j.totals.total_docs}</div></div>` +
        `<div style="padding:12px;background:var(--surface-2);border-radius:8px;"><div style="font-size:11px;color:var(--text-3);">已封存</div><div style="font-size:22px;font-weight:700;margin-top:4px;color:var(--text-2);">${j.totals.archived_docs}</div></div>` +
        `<div style="padding:12px;background:var(--surface-2);border-radius:8px;"><div style="font-size:11px;color:var(--text-3);">垃圾桶</div><div style="font-size:22px;font-weight:700;margin-top:4px;color:var(--text-3);">${j.totals.trash_docs}</div></div>` +
        `<div style="padding:12px;background:var(--surface-2);border-radius:8px;"><div style="font-size:11px;color:var(--text-3);">活躍使用者</div><div style="font-size:22px;font-weight:700;margin-top:4px;">${j.totals.active_users}</div></div>` +
      '</div>' +
      '<div style="font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:8px;">內容鮮度分佈</div>' +
      `<div style="display:flex;gap:10px;margin-bottom:18px;">${freshnessHtml}</div>` +
      '<div style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;">' +
        `<div><div style="font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px;">孤立文件（${j.orphans.count} 篇，前 5 筆）</div>` +
          `<div style="background:var(--surface-2);border-radius:6px;padding:6px;">${orphanItems || '<div style="padding:10px;font-size:12px;color:var(--text-3);">無孤立文件</div>'}</div></div>` +
        `<div><div style="font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px;">部門文件 Top-5</div>` +
          `<div style="background:var(--surface-2);border-radius:6px;padding:10px;">${deptItems || '<div style="font-size:12px;color:var(--text-3);">尚無資料</div>'}</div></div>` +
        `<div><div style="font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px;">AI 成本（近 30 天）</div>` +
          `<div style="background:var(--surface-2);border-radius:6px;padding:10px;">` +
            `<div style="font-size:22px;font-weight:700;">USD $${aiCostUSD}</div>` +
            `<div style="font-size:11px;color:var(--text-3);margin-top:4px;">${j.ai_cost_30d.calls} 次呼叫 · ${(j.ai_cost_30d.input_tokens + j.ai_cost_30d.output_tokens).toLocaleString()} tokens</div>` +
          `</div></div>` +
      '</div>';
    page.appendChild(blk);
    blk.querySelectorAll("[data-doc]").forEach((el) =>
      el.addEventListener("click", () => NS.openDocView(parseInt(el.dataset.doc, 10))));
  }

  // ===== 分享連結：解析 token → 以正常檢視頁開啟（需登入）=====
  let _pendingShareToken = null;

  async function resolveAndOpenShare(token) {
    _pendingShareToken = null;
    // 查狀態（含 document_id）
    let status;
    try {
      const r = await fetch("/api/share/" + encodeURIComponent(token));
      if (!r.ok) {
        const j = await r.json().catch(() => ({}));
        const m = { link_not_found: "連結不存在", link_revoked: "連結已被撤銷",
                    link_expired: "連結已過期", document_gone: "文件已不存在" };
        toast(m[(j.detail && j.detail.error) || ""] || "無法存取此分享連結", "error");
        if (typeof window.switchPage === "function") window.switchPage("dashboard");
        return;
      }
      status = await r.json();
    } catch (e) {
      toast("網路錯誤", "error");
      return;
    }
    // 有密碼 → 先驗證（呼叫 access 端點確認密碼）
    if (status.has_password) {
      const v = await securePrompt({
        title: "分享連結需要密碼",
        desc: `文件「${status.title}」受密碼保護，請輸入連結密碼。`,
        fields: [{ name: "password", label: "連結密碼", type: "password" }],
      });
      if (!v) { if (window.switchPage) window.switchPage("dashboard"); return; }
      const headers = { "Content-Type": "application/json" };
      if (Auth.access) headers["Authorization"] = "Bearer " + Auth.access;
      const ar = await fetch("/api/share/" + encodeURIComponent(token) + "/access", {
        method: "POST", headers, body: JSON.stringify({ password: v.password }),
      });
      if (!ar.ok) {
        const aj = await ar.json().catch(() => ({}));
        const code = (aj.detail && aj.detail.error) || "";
        if (code === "bad_share_password") toast("密碼錯誤", "error");
        else toast("無法存取", "error");
        return;
      }
    }
    // 用正常檢視頁開啟（與從知識庫點擊一致）
    // 把網址換回 / 避免重整又觸發
    try { window.history.replaceState({}, "", "/"); } catch (e) {}
    openDocView(status.document_id);
  }

  // ===== （舊）分享獨立頁 — 已不使用，保留以防其他引用 =====
  async function renderSharePage(token) {
    // 移除 unauth guard（分享頁不需登入）
    document.documentElement.classList.remove("kbv5-unauth");
    // 蓋一個全屏唯讀容器
    const root = document.createElement("div");
    root.style.cssText =
      "position:fixed;inset:0;z-index:99999;overflow:auto;background:var(--bg,#f7fafc);" +
      "font-family:inherit;padding:40px 16px;";
    root.innerHTML = `<div style="max-width:780px;margin:0 auto;">
      <div id="kbshare-box" style="background:#fff;border:1px solid #d6e2ea;border-radius:12px;padding:28px 32px;box-shadow:0 4px 16px rgba(0,0,0,.06);">
        <div style="color:#94a3b8;font-size:13px;">載入中…</div>
      </div>
      <div style="text-align:center;margin-top:16px;color:#94a3b8;font-size:11px;">DemoCorp 知識庫 · 唯讀分享連結</div>
    </div>`;
    document.body.appendChild(root);
    const box = root.querySelector("#kbshare-box");

    // 先查狀態
    let status;
    try {
      const r = await fetch("/api/share/" + encodeURIComponent(token));
      if (!r.ok) {
        const j = await r.json().catch(() => ({}));
        const m = { link_not_found: "連結不存在", link_revoked: "連結已被撤銷",
                    link_expired: "連結已過期", document_gone: "文件已不存在" };
        box.innerHTML = `<div style="text-align:center;padding:24px;color:#dc2626;">
          ⚠ ${m[(j.detail && j.detail.error) || ""] || "無法存取此連結"}</div>`;
        return;
      }
      status = await r.json();
    } catch (e) {
      box.innerHTML = '<div style="color:#dc2626;">網路錯誤</div>';
      return;
    }

    function renderContent(doc) {
      box.innerHTML = `
        <h1 style="font-size:22px;color:#0f2a3a;margin:0 0 8px;">${escapeHtml(doc.title)}</h1>
        <div style="font-size:12px;color:#64748b;margin-bottom:18px;">
          ${escapeHtml(doc.owner_department || "")} · ${escapeHtml(doc.category || "")}
          · ${(doc.tags || []).map((t) => `<span style="display:inline-block;background:#eff6ff;color:#1d4ed8;font-size:11px;padding:1px 7px;border-radius:999px;margin-right:3px;">${escapeHtml(t)}</span>`).join("")}
        </div>
        <div class="doc-content kbshare-content"></div>`;
      box.querySelector(".kbshare-content").innerHTML = doc.vault_missing
        ? '<div style="padding:16px;border:1px solid #fecaca;background:#fef2f2;border-radius:8px;color:#991b1b;">⚠ 此文件的內容檔遺失，暫無法顯示。</div>'
        : renderMarkdown(doc.body || "");
    }

    async function fetchContent(password) {
      const headers = { "Content-Type": "application/json" };
      if (Auth.access) headers["Authorization"] = "Bearer " + Auth.access;
      const r = await fetch("/api/share/" + encodeURIComponent(token) + "/access", {
        method: "POST", headers, body: JSON.stringify({ password: password || null }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) {
        const code = (j.detail && j.detail.error) || "";
        if (code === "login_required") {
          box.innerHTML = `<div style="text-align:center;padding:24px;">
            <div style="color:#0f2a3a;font-weight:600;margin-bottom:8px;">此連結需登入才能檢視</div>
            <a href="/" style="color:#009BCB;">前往登入 →</a></div>`;
          return false;
        }
        if (code === "bad_share_password") { toast("密碼錯誤", "error"); return false; }
        box.innerHTML = '<div style="color:#dc2626;padding:24px;text-align:center;">無法載入內容</div>';
        return false;
      }
      renderContent(j);
      return true;
    }

    if (status.has_password) {
      box.innerHTML = `
        <div style="text-align:center;padding:12px;">
          <div style="font-size:16px;font-weight:600;color:#0f2a3a;margin-bottom:4px;">${escapeHtml(status.title)}</div>
          <div style="font-size:12px;color:#64748b;margin-bottom:16px;">此分享連結受密碼保護</div>
          <input id="kbshare-pw" type="password" placeholder="輸入連結密碼" style="padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;width:220px;" />
          <button id="kbshare-go" style="margin-left:8px;padding:9px 18px;border:0;background:#009BCB;color:#fff;border-radius:6px;cursor:pointer;font-size:14px;">檢視</button>
        </div>`;
      const pw = box.querySelector("#kbshare-pw");
      const go = box.querySelector("#kbshare-go");
      go.onclick = () => fetchContent(pw.value);
      pw.addEventListener("keydown", (e) => { if (e.key === "Enter") go.click(); });
      pw.focus();
    } else {
      await fetchContent(null);
    }
  }
  NS.renderSharePage = renderSharePage;

  // -------------------- bootstrap --------------------
  // ============================================================
  // 通知（SSE + 鈴鐺 + 滑出 panel + 通知中心頁，PRD §12.5 / §12.23）
  // ============================================================
  let _notifES = null;
  let _notifUnread = 0;
  let _notifPanelFilter = "all";
  let _notifCenterFilter = "all";
  const _NOTIF_GLYPH = { review: "📄", mention: "@", system: "🛡", success: "✓" };
  const _PANEL_FILTERS = ["all", "unread", "mention", "system"];
  const _CENTER_FILTERS = ["all", "unread", "mention", "review", "review_result", "system", "schedule"];

  function _bellBadge() {
    const b = document.querySelector("#btn-bell .badge-dot");
    if (!b) return;
    if (_notifUnread > 0) { b.style.display = ""; b.textContent = _notifUnread > 99 ? "99+" : String(_notifUnread); }
    else b.style.display = "none";
  }

  async function refreshNotifBadge() {
    if (!Auth.access) return;
    const r = await api("/api/notifications/unread-count").catch(() => null);
    if (r && r.ok) { _notifUnread = (await r.json()).unread || 0; _bellBadge(); }
  }

  // 導覽列「審核」徽章：以真實待審佇列數驅動（取代 mockup 寫死的 7）。
  // 非審核者(403)或佇列為 0 → 隱藏。可由其他流程（進審核頁、核准/退回後）呼叫。
  function _setReviewBadge(n) {
    const el = document.getElementById("nav-review-badge");
    if (!el) return;
    if (n > 0) { el.style.display = ""; el.textContent = n > 99 ? "99+" : String(n); }
    else { el.style.display = "none"; el.textContent = ""; }
  }
  async function refreshReviewBadge() {
    if (!Auth.access) return;
    const r = await api("/api/reviews/pending").catch(() => null);
    if (!r || !r.ok) { _setReviewBadge(0); return; }  // 含 403 無權限 → 隱藏
    let n = 0;
    try { const d = await r.json(); n = Array.isArray(d) ? d.length : (d && Array.isArray(d.items) ? d.items.length : 0); } catch (x) {}
    _setReviewBadge(n);
  }
  window.__refreshReviewBadge = refreshReviewBadge;

  function startNotifStream() {
    if (!Auth.access || _notifES) return;
    refreshNotifBadge();
    refreshReviewBadge();
    try {
      _notifES = new EventSource("/api/notifications/stream?token=" + encodeURIComponent(Auth.access));
      _notifES.addEventListener("unread", (e) => { _notifUnread = parseInt(e.data, 10) || 0; _bellBadge(); });
      _notifES.addEventListener("notification", (e) => {
        _notifUnread += 1; _bellBadge();
        try {
          const n = JSON.parse(e.data);
          toast("🔔 " + (n.title || "新通知"), "info");
          if (n && n.type === "review") refreshReviewBadge();  // 新審核通知 → 即時更新導覽列徽章
        } catch (x) {}
        const panel = document.getElementById("notif-panel");
        if (panel && panel.classList.contains("is-open")) loadNotifPanel(_notifPanelFilter);
        const center = document.querySelector('main.page[data-page="notifications"]');
        if (center && center.classList.contains("is-active")) loadNotifCenter(_notifCenterFilter);
      });
      _notifES.onerror = () => {
        try { _notifES.close(); } catch (x) {}
        _notifES = null;
        if (Auth.access) setTimeout(startNotifStream, 10000);  // token 更新後自動重連
      };
    } catch (e) {}
  }
  function stopNotifStream() { if (_notifES) { try { _notifES.close(); } catch (x) {} _notifES = null; } _notifUnread = 0; _bellBadge(); }

  function _notifItemHtml(n) {
    const glyph = _NOTIF_GLYPH[n.icon] || "🛈";
    return `<div class="notif-item${n.is_read ? "" : " is-unread"}" data-id="${n.id}" data-link="${escapeHtml(n.link || "")}" data-type="${escapeHtml(n.type || "")}" style="cursor:pointer;">` +
      `<div class="notif-item__icon notif-item__icon--${n.icon}">${glyph}</div>` +
      `<div class="notif-item__body"><div class="notif-item__title">${escapeHtml(n.title || "")}</div>` +
      `<div class="notif-item__meta"><b>${escapeHtml(reviewTimeLabel(n.created_at))}</b>${n.body ? `<span>· ${escapeHtml(n.body)}</span>` : ""}</div></div></div>`;
  }

  async function _markNotifRead(nid, el) {
    const r = await api(`/api/notifications/${nid}/read`, { method: "POST" });
    if (r.ok) {
      if (el && el.classList.contains("is-unread")) { el.classList.remove("is-unread"); _notifUnread = Math.max(0, _notifUnread - 1); _bellBadge(); }
    }
  }

  async function loadNotifPanel(filter) {
    _notifPanelFilter = filter || _notifPanelFilter;
    const list = document.querySelector(".notif-panel__list");
    if (!list || !Auth.access) return;
    // flash 修復：先同步覆蓋 mockup 寫死的假通知為載入態，再抓資料
    list.innerHTML = '<div style="padding:24px;text-align:center;color:var(--text-3);font-size:13px;">載入中…</div>';
    const r = await api(`/api/notifications?filter=${_notifPanelFilter}&limit=12`).catch(() => null);
    if (!r || !r.ok) { list.innerHTML = '<div style="padding:24px;text-align:center;color:var(--text-3);">載入失敗</div>'; return; }
    const items = await r.json();
    list.innerHTML = items.length ? items.map(_notifItemHtml).join("")
      : '<div style="padding:32px;text-align:center;color:var(--text-3);font-size:13px;">目前沒有通知</div>';
    const cnt = document.querySelector(".notif-panel__count");
    if (cnt) cnt.textContent = `${_notifUnread} 則未讀`;
    list.querySelectorAll(".notif-item").forEach((el) => el.addEventListener("click", () => {
      _markNotifRead(parseInt(el.dataset.id, 10), el);
      _notifNavigate(el.dataset.link, el.dataset.type);
    }));
    _refreshNotifCounts();
  }

  function _notifNavigate(link, type) {
    if (!link) return;
    const closePanel = () => { if (typeof window.closeNotifPanel === "function") window.closeNotifPanel(); };

    // /share/{token} → 分享 token 解析
    const mShare = link.match(/^\/share\/(.+)$/);
    if (mShare) { closePanel(); resolveAndOpenShare(mShare[1]); return; }

    // /view/{id}(#c{cid})? 或 /documents?/{id} → 文件檢視 + 可選 scroll 到評論
    const mDoc = link.match(/\/(?:view|documents?)\/(\d+)(?:#c(\d+))?/);
    if (mDoc) {
      closePanel();
      const docId = parseInt(mDoc[1], 10);
      const anchorCid = mDoc[2] ? parseInt(mDoc[2], 10) : null;
      openDocView(docId);
      if (anchorCid) setTimeout(() => _scrollToComment(anchorCid), 600);
      return;
    }

    // /pending/{id} → 依 type 區分收件人角色
    const mPending = link.match(/^\/pending\/(\d+)/);
    if (mPending) {
      closePanel();
      const pid = parseInt(mPending[1], 10);
      // type=review / system（撤回通知）→ 收件人是 reviewer → 開審核 modal
      // type=approved/rejected/approved_with_edit/review_result → 收件人是 submitter → 開「我的提交」
      const isReviewerCtx = type === "review" || type === "system";
      if (isReviewerCtx && typeof openReviewModalForPid === "function") {
        // 進審核頁再開 modal（確保 listBoard 已渲染）
        if (typeof window.switchPage === "function") window.switchPage("review");
        setTimeout(() => openReviewModalForPid(pid), 300);
      } else if (typeof openMySubmissionModal === "function") {
        // submitter 視角：開「我的提交」modal（含退回原因/重送/撤回等）
        openMySubmissionModal(pid);
      }
      return;
    }

    // /user/{uid} → 個人主頁
    const mUser = link.match(/^\/user\/(\d+)/);
    if (mUser) {
      closePanel();
      const uid = parseInt(mUser[1], 10);
      if (typeof NS.openProfile === "function") NS.openProfile(uid);
      else if (typeof window.switchPage === "function") window.switchPage("profile");
      return;
    }
  }

  function _scrollToComment(cid) {
    const node = document.querySelector(`.comment[data-comment-id="${cid}"]`);
    if (!node) {
      // 若還沒渲染好，再等一次（render 慢的情況）
      setTimeout(() => {
        const n2 = document.querySelector(`.comment[data-comment-id="${cid}"]`);
        if (n2) _highlightAndScroll(n2);
      }, 600);
      return;
    }
    _highlightAndScroll(node);
  }

  function _highlightAndScroll(node) {
    node.scrollIntoView({ behavior: "smooth", block: "center" });
    // 高亮 2 秒方便視覺找到
    const orig = node.style.background;
    node.style.transition = "background 0.4s";
    node.style.background = "var(--accent-bg, #dbeafe)";
    setTimeout(() => { node.style.background = orig; }, 2000);
  }

  function _groupByTime(items) {
    const today = new Date(); today.setHours(0, 0, 0, 0);
    const y = new Date(today.getTime() - 86400000);
    const wk = new Date(today.getTime() - 6 * 86400000);
    const groups = { "今天": [], "昨天": [], "本週稍早": [], "更早": [] };
    for (const n of items) {
      const d = new Date((n.created_at || "").replace(" ", "T") + ((n.created_at || "").endsWith("Z") ? "" : "Z"));
      if (isNaN(d.getTime())) { groups["更早"].push(n); continue; }
      if (d >= today) groups["今天"].push(n);
      else if (d >= y) groups["昨天"].push(n);
      else if (d >= wk) groups["本週稍早"].push(n);
      else groups["更早"].push(n);
    }
    return groups;
  }

  async function loadNotifCenter(filter) {
    _notifCenterFilter = filter || _notifCenterFilter;
    const page = document.querySelector('main.page[data-page="notifications"]');
    const listEl = page && page.querySelector(".notif-list-full");
    if (!listEl || !Auth.access) return;
    // flash 修復：先同步覆蓋 mockup 寫死的假通知為載入態，再抓資料
    listEl.innerHTML = '<div style="padding:32px;text-align:center;color:var(--text-3);font-size:13px;">載入中…</div>';
    const r = await api(`/api/notifications?filter=${_notifCenterFilter}&limit=200`).catch(() => null);
    if (!r || !r.ok) { listEl.innerHTML = '<div style="padding:32px;text-align:center;color:var(--text-3);">載入失敗</div>'; return; }
    const items = await r.json();
    if (!items.length) { listEl.innerHTML = '<div style="padding:48px;text-align:center;color:var(--text-3);">目前沒有通知</div>'; }
    else {
      const groups = _groupByTime(items);
      listEl.innerHTML = Object.entries(groups).filter(([, arr]) => arr.length).map(([label, arr]) =>
        `<div style="padding:10px 20px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:0.05em;">${label}</div>` +
        arr.map(_notifItemHtml).join("")).join("");
    }
    listEl.querySelectorAll(".notif-item").forEach((el) => el.addEventListener("click", () => {
      _markNotifRead(parseInt(el.dataset.id, 10), el);
      _notifNavigate(el.dataset.link, el.dataset.type);
    }));
    const hp = page.querySelector(".page__title-group p");
    if (hp) hp.textContent = `共 ${items.length} 則 · ${_notifUnread} 則未讀`;
    _refreshNotifCounts();
  }

  async function _refreshNotifCounts() {
    if (!Auth.access) return;
    const r = await api("/api/notifications?filter=all&limit=200").catch(() => null);
    if (!r || !r.ok) return;
    const items = await r.json();
    const c = {
      all: items.length,
      unread: items.filter((n) => !n.is_read).length,
      mention: items.filter((n) => n.category === "mention").length,
      review: items.filter((n) => n.category === "review").length,
      review_result: items.filter((n) => n.category === "review_result").length,
      system: items.filter((n) => n.category === "system").length,
      schedule: items.filter((n) => n.category === "schedule").length,
    };
    // 滑出 panel 的 4 個 tab（全部/未讀/@我/系統）
    const tabs = document.querySelectorAll(".notif-panel__tab");
    if (tabs[0]) tabs[0].textContent = `全部 ${c.all}`;
    if (tabs[1]) tabs[1].textContent = `未讀 ${c.unread}`;
    if (tabs[2]) tabs[2].textContent = `@ 我 ${c.mention}`;
    if (tabs[3]) tabs[3].textContent = `系統 ${c.system}`;
    // 通知中心左 nav 7 類
    const order = ["all", "unread", "mention", "review", "review_result", "system", "schedule"];
    document.querySelectorAll('main.page[data-page="notifications"] .notif-side-nav__item').forEach((it, i) => {
      const span = it.querySelector(".notif-side-nav__count");
      if (span) span.textContent = String(c[order[i]] ?? 0);
    });
  }

  function wireNotifications() {
    // 鈴鐺：包住 mockup 的 toggleNotifPanel，開啟時載入內容
    const origToggle = window.toggleNotifPanel;
    window.toggleNotifPanel = function () {
      if (typeof origToggle === "function") origToggle();
      const p = document.getElementById("notif-panel");
      if (p && p.classList.contains("is-open")) loadNotifPanel(_notifPanelFilter);
    };
    // panel tabs（全部/未讀/@我/系統）
    document.querySelectorAll(".notif-panel__tab").forEach((btn, i) => {
      btn.addEventListener("click", () => {
        document.querySelectorAll(".notif-panel__tab").forEach((b) => b.classList.remove("is-active"));
        btn.classList.add("is-active");
        loadNotifPanel(_PANEL_FILTERS[i] || "all");
      });
    });
    // panel footer「全部標為已讀」
    const panelFooter = document.querySelector(".notif-panel__footer .btn");
    if (panelFooter) panelFooter.addEventListener("click", async () => {
      await api("/api/notifications/read-all", { method: "POST" });
      _notifUnread = 0; _bellBadge(); loadNotifPanel(_notifPanelFilter);
    });
    // 通知中心頁
    const center = document.querySelector('main.page[data-page="notifications"]');
    if (center) {
      const obs = new MutationObserver(() => { if (center.classList.contains("is-active")) loadNotifCenter(_notifCenterFilter); });
      obs.observe(center, { attributes: true, attributeFilter: ["class"] });
      center.querySelectorAll(".notif-side-nav__item").forEach((it, i) => {
        it.addEventListener("click", () => {
          center.querySelectorAll(".notif-side-nav__item").forEach((x) => x.classList.remove("is-active"));
          it.classList.add("is-active");
          loadNotifCenter(_CENTER_FILTERS[i] || "all");
        });
      });
      const readAll = Array.from(center.querySelectorAll(".page__actions .btn")).find((b) => (b.textContent || "").includes("全部標為已讀"));
      if (readAll) readAll.addEventListener("click", async () => {
        await api("/api/notifications/read-all", { method: "POST" });
        _notifUnread = 0; _bellBadge(); loadNotifCenter(_notifCenterFilter);
      });
      // 偏好設定按鈕（L9 範圍外）→ 提示
      const pref = Array.from(center.querySelectorAll(".page__actions .btn")).find((b) => (b.textContent || "").includes("偏好"));
      if (pref) pref.onclick = () => toast("通知偏好設定於帳號頁（規劃中）", "info");
    }
  }
  NS.startNotifStream = startNotifStream;

  // Phase5-C：字級切換覆蓋 CSS — mockup CSS + 我的注入 code 多處寫死 font-size px
  // 改用 calc(NNpx * var(--scale)) 隨字級縮放
  function _injectFontScaleOverrides() {
    if (document.getElementById("kbv5-font-scale-css")) return;
    const css = `
      /* mockup font-toggle 按鈕本身（line 184 寫死 11px） */
      .font-toggle button { font-size: calc(11px * var(--scale)) !important; }

      /* 進階搜尋結果（我注入的）：依資料屬性套用 */
      [data-kbv5-adv-results] { font-size: calc(13px * var(--scale)); }
      [data-kbv5-adv-results] > div:first-child { font-size: calc(14px * var(--scale)) !important; }
      [data-kbv5-adv-results] [data-doc] > div:first-child { font-size: calc(13px * var(--scale)) !important; }
      [data-kbv5-adv-results] [data-doc] > div:nth-child(2) { font-size: calc(11px * var(--scale)) !important; }
      [data-kbv5-adv-results] [data-doc] > div:nth-child(3) { font-size: calc(12px * var(--scale)) !important; }

      /* 進階搜尋表單收折按鈕 / 搜尋按鈕 */
      [data-kbv5-adv-expand] { font-size: calc(13px * var(--scale)) !important; }

      /* 知識庫標籤搜尋 + 清除全部按鈕 */
      [data-kbv5-tag-ctrl] input,
      [data-kbv5-tag-ctrl] button { font-size: calc(12px * var(--scale)) !important; }

      /* saved-query side 內的按鈕 */
      .saved-query button { font-size: calc(11px * var(--scale)) !important; }

      /* 「返回搜尋結果」按鈕 */
      [data-kbv5-search-return] { font-size: calc(13px * var(--scale)) !important; }

      /* 附件 / 引用 等 doc-side 我注入區塊 */
      [data-kbv5-attach-block] { font-size: calc(12px * var(--scale)); }
      [data-kbv5-refs-block] { font-size: calc(12px * var(--scale)); }

      /* topbar 搜尋 input（我做的） */
      #topbar-search input { font-size: calc(14px * var(--scale)) !important; }

      /* === Phase5-C 第 2 輪：使用者實測點名 === */

      /* #1 知識庫卡片：部門 / 可見度 / 標籤 / 時間 */
      .vis-badge { font-size: calc(10px * var(--scale)) !important; }
      .tag-pill { font-size: calc(10px * var(--scale)) !important; }
      .doc-card__footer { font-size: calc(11px * var(--scale)) !important; }
      .doc-card__author .avatar { font-size: calc(9px * var(--scale)) !important; }

      /* #2 文件檢視頁 */
      .doc-main__meta { font-size: calc(13px * var(--scale)) !important; }
      .doc-main__meta .avatar { font-size: calc(10px * var(--scale)) !important; }
      .doc-side__title { font-size: calc(11px * var(--scale)) !important; }
      .doc-side__row { font-size: calc(13px * var(--scale)) !important; }
      .doc-side__action { font-size: calc(13px * var(--scale)) !important; }

      /* #3 進階搜尋：我的查詢側欄 */
      .saved-query-side__hint { font-size: calc(12px * var(--scale)) !important; }
      .saved-query__name { font-size: calc(13px * var(--scale)) !important; }
      .saved-query__desc { font-size: calc(11px * var(--scale)) !important; }

      /* #4 系統管理：權限矩陣 */
      .permission-matrix, .matrix-table, .matrix-table th, .matrix-table td,
      .matrix-cell, .matrix-legend, .matrix-legend-item
        { font-size: calc(12px * var(--scale)) !important; }
      .matrix-tab, .matrix-tabs button { font-size: calc(13px * var(--scale)) !important; }

      /* #5 PII 偵測規則：即時偵測測試左右欄位 */
      .pii-test-input, .pii-test-output, .pii-test-result,
      .detection-test, .detection-test textarea, .detection-test pre
        { font-size: calc(13px * var(--scale)) !important; }

      /* #6 AI Provider 框格 + 用量趨勢 */
      .ai-card, .ai-card *, .ai-trend, .ai-trend *,
      .provider-card, .provider-card *
        { font-size: calc(13px * var(--scale)); }
      .ai-card__title, .provider-card__title
        { font-size: calc(14px * var(--scale)) !important; }
      .ai-card__sub, .provider-card__sub
        { font-size: calc(11px * var(--scale)) !important; }

      /* #7 模型對照 */
      .model-mapping, .model-mapping *, .feature-row, .feature-row *
        { font-size: calc(13px * var(--scale)); }

      /* #8 稽核日誌：KPI 卡 */
      .audit-kpi, .audit-kpi *, .audit-kpi__value, .audit-kpi__label,
      .audit-kpi__change
        { font-size: calc(13px * var(--scale)); }
      .audit-kpi__value { font-size: calc(20px * var(--scale)) !important; font-weight:600; }
      .audit-kpi__label { font-size: calc(11px * var(--scale)) !important; }
      .audit-row, .audit-row * { font-size: calc(12px * var(--scale)); }

      /* #9-10 跨部門主題 */
      .xdept-topic, .xdept-topic *, .xdept-sidebar, .xdept-sidebar *,
      .xdept-detail, .xdept-detail *, .cross-dept-modal, .cross-dept-modal *
        { font-size: calc(13px * var(--scale)); }
      select.xdept-select, .xdept-detail select { font-size: calc(13px * var(--scale)) !important; }

      /* #11 媒體庫卡片下方文字 */
      .media-card__name { font-size: calc(12px * var(--scale)) !important; }
      .media-card__meta { font-size: calc(11px * var(--scale)) !important; }
      .media-card__source { font-size: calc(11px * var(--scale)) !important; }
      .media-card__type-badge { font-size: calc(10px * var(--scale)) !important; }

      /* #12 我的待辦：卡片時間 + 標題上方分類 */
      .task-card__time, .kanban-card__time, .my-task__time
        { font-size: calc(11px * var(--scale)) !important; }
      .task-card__category, .kanban-card__category, .my-task__category,
      .kanban-col__title, .kanban-col__count
        { font-size: calc(12px * var(--scale)) !important; }

      /* 我的代辦 (兼容多種 class) */
      .my-tasks-page * { font-size: inherit; }   /* reset propagation */
      [data-page="my-tasks"] .kanban-col__title { font-size: calc(13px * var(--scale)) !important; }
      [data-page="my-tasks"] .kanban-card { font-size: calc(13px * var(--scale)); }

      /* 標籤雲 size-xs/sm/md/lg/xl */
      .tag-cloud__item.size-xs { font-size: calc(11px * var(--scale)) !important; }
      .tag-cloud__item.size-sm { font-size: calc(13px * var(--scale)) !important; }
      .tag-cloud__item.size-md { font-size: calc(15px * var(--scale)) !important; }
      .tag-cloud__item.size-lg { font-size: calc(18px * var(--scale)) !important; }
      .tag-cloud__item.size-xl { font-size: calc(22px * var(--scale)) !important; }

      /* 各種隱藏在 mockup CSS 的小字 */
      .dept-item__sub, .ppl-row__meta, .contrib-row__path,
      .contrib-row__meta, .selected-user-mini__meta,
      .hit-row__time, .hit-row__doc-path, .hit-row__user
        { font-size: calc(11px * var(--scale)) !important; }
      .profile-tag--xl { font-size: calc(14px * var(--scale)) !important; }
      .profile-tag--lg { font-size: calc(13px * var(--scale)) !important; }

      /* #13 我的收藏：hint 文字「點卡片開啟文件」+ fav-card 內容 */
      [data-page="favorites"] h3 span { font-size: calc(11px * var(--scale)) !important; }
      .fav-card__type { font-size: calc(10px * var(--scale)) !important; }
      .fav-card__title { font-size: calc(13px * var(--scale)) !important; }
      .fav-card__path { font-size: calc(11px * var(--scale)) !important; }
      .fav-card__meta { font-size: calc(11px * var(--scale)) !important; }
      .fav-card .kbv5-fav-move { font-size: calc(12px * var(--scale)) !important; }
    `;
    const style = document.createElement("style");
    style.id = "kbv5-font-scale-css";
    style.textContent = css;
    document.head.appendChild(style);
  }

  // Phase5-C 系統性修正（Pattern 06）：app.js 動態注入的 HTML 大量用 inline
  // style="font-size:NNpx"，靜態 CSS（含 !important class 規則）難以逐一覆蓋。
  // 改用 MutationObserver：任何新加入 DOM 的元素，若 inline font-size 是純 px，
  // 自動改寫為 calc(NNpx * var(--scale)) → 隨字級縮放。一次涵蓋所有注入內容。
  const _PX_FONT_RE = /^\s*(\d+(?:\.\d+)?)px\s*$/;
  function _scaleInlineFontSize(el) {
    // el 自身
    const fs = el.style && el.style.fontSize;
    if (fs) {
      const m = _PX_FONT_RE.exec(fs);
      if (m) el.style.fontSize = `calc(${m[1]}px * var(--scale))`;
    }
    // 子孫（querySelectorAll 只回 element，attr 篩 inline style 含 font-size）
    if (el.querySelectorAll) {
      el.querySelectorAll('[style*="font-size"]').forEach((c) => {
        const cfs = c.style.fontSize;
        if (!cfs) return;
        const mm = _PX_FONT_RE.exec(cfs);
        if (mm) c.style.fontSize = `calc(${mm[1]}px * var(--scale))`;
      });
    }
  }
  function _setDefaultFontScale() {
    // 預設「中」(scale=1.15)：套用 --scale + 修 toggle 按鈕 is-active 狀態
    // 使用者再點切換時，mockup 原 handler 會接手覆寫
    document.documentElement.style.setProperty("--scale", "1.15");
    document.querySelectorAll('#font-toggle button').forEach((b) => {
      if (b.dataset.scale === "1.15") b.classList.add("is-active");
      else b.classList.remove("is-active");
    });
  }

  function _installInlineFontScaleObserver() {
    // 先掃一次現有 DOM（mockup inline px）
    try { _scaleInlineFontSize(document.body); } catch (_e) {}
    const obs = new MutationObserver((muts) => {
      for (const mu of muts) {
        mu.addedNodes && mu.addedNodes.forEach((n) => {
          if (n.nodeType === 1) {
            try { _scaleInlineFontSize(n); } catch (_e) {}
          }
        });
      }
    });
    obs.observe(document.body, { childList: true, subtree: true });
  }

  function init() {
    // 全域安全網：任何忘了 .catch 的 async（如載入函式內 await api() 斷網 throw）
    // 不再靜默 console error，至少給使用者一個提示，避免「畫面卡住卻沒反應」。
    if (!window._kbv5RejHandler) {
      window._kbv5RejHandler = true;
      window.addEventListener("unhandledrejection", (ev) => {
        const msg = (ev && ev.reason && (ev.reason.message || ev.reason)) || "";
        if (/Failed to fetch|NetworkError|load failed/i.test(String(msg))) {
          toast("網路連線異常，部分內容可能未載入", "error");
        }
      });
    }
    _injectFontScaleOverrides();
    _installInlineFontScaleObserver();
    // Phase5-C：預設字級「中」(--scale=1.15)
    _setDefaultFontScale();
    // Phase5-C：移除 more-menu 中「搜尋結果」與「標籤分類」兩項（mock 頁，已有實用替代）
    // 搜尋結果 → 用 topbar 搜尋；標籤分類 → library 左下 tag-chips + 標籤搜尋
    document.querySelectorAll('.more-menu__item[data-page="search"], .more-menu__item[data-page="tags"]')
      .forEach((el) => el.remove());
    // §31 應用內回報：more-menu 注入「💬 回報問題」
    wireFeedbackEntry();
    // 分享連結：/share/{token} → 記下 token，照正常流程（需登入）後以檢視頁開啟
    const shareMatch = window.location.pathname.match(/^\/share\/([A-Za-z0-9_\-]+)$/);
    if (shareMatch) _pendingShareToken = shareMatch[1];
    // 若帶 ?logout=1（從 doLogout 跳轉過來）→ 強制顯示登入頁 + 訊息
    const isPostLogout = /[?&]logout=1\b/.test(window.location.search);
    if (isPostLogout) {
      try {
        const url = new URL(window.location.href);
        url.searchParams.delete("logout");
        window.history.replaceState({}, "", url.pathname + url.search + url.hash);
      } catch (e) {}
    }
    // 停掉 submit 頁可見度下拉的 mock modal（onVisibilityChange）→ 改純記錄
    // submit 提交時可見度預設 department；進階可見度於發布後在文件頁設定
    window.onVisibilityChange = function (sel) {
      // no-op：不開 mock modal。值保留在 select 上即可。
    };
    wireLogin();
    wireAccount();
    wireLogout();
    wireAdmin();
    wireSubmit();
    wireReview();
    wireLibrary();
    wireDashboard();
    wireMyTasks();
    wireNotifications();
    wireFavorites();
    wireTrashPage();        // §7.7 / §12.15 軟刪除/垃圾桶
    wireEditPage();         // §12.12 編輯頁
    wireVersionsPage();     // §12.13 版本歷史頁
    wireTagsPage();         // §12.21 標籤分類頁
    wireAttachmentsPage();  // §12.19 媒體庫
    wireProfilePage();      // §12.x 個人主頁
    wireAdvancedSearchPage();  // §12.17 進階搜尋
    wireTopbarSearch();         // §12.16 / Phase5-C 補：topbar 搜尋列
    wireUserImportPage();       // §19.13 / §46.3 Phase5-E CSV 匯入使用者
    installSwitchPageGuard();  // 攔截 switchPage，無權限頁進不去
    if (isPostLogout) {
      showLoginPage();
      setTimeout(() => toast("已登出", "ok"), 100);
    } else {
      probeSession();
    }
    // Health
    fetch("/api/health").then((r) => r.ok && r.json()).then((j) => {
      if (j) { NS.health = j; }
    }).catch(() => {});
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();